E2E 測試框架 cypress 實踐

什麼是 Cypress？

Cypress 是非常年輕但很受開發者歡迎的測試框架，mac本地開發的話不需要安裝別的依賴，npm install Cypress 即可，開箱即用，對於ES6 ES7的語法天然支持，不僅支持本地瀏覽器直接模擬測試，也支持終端測試。還有測試錄屏功能，方便在測試失敗的時候，查看當時的失敗的場景，方便修改。整體來說上手快，學習成本較低。對於一下 Casperjs，感覺是全方面秒殺。

安裝 Cypress

環境依賴

• Mac OS 10.9+ (Mavericks+), only 64bit binaries are provided for macOS.
• Linux Ubuntu 12.04+, Fedora 21, Debian 8, 64-bit binaries
• Windows 7+, only 32bit binaries are provided for Windows.
• 如果在Cli 中運行需要確保系統安裝以下依賴
  apt-get install xvfb libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2，使用docker的用戶可以參考 cypress-docker-images

安裝命令

# mac
npm install cypress -D
# 安裝完成後可以使用cypress verify 運行成功即爲安裝成功
node_modules/.bin/cypress verify

使用 Cypress

當安裝完成cypress後，運行node_modules/.bin/cypress open， 會打開一個可視化界面，然後cypress會在你的工作目錄下生成一個cypress目錄

cypress
├── fixtures
│   └── example.json
├── integration # 測試文件
│   └── examples
│       ├── actions.spec.js
│       ├── aliasing.spec.js
│       ├── assertions.spec.js
│       ├── connectors.spec.js
│       ├── cookies.spec.js
│       ├── cypress_api.spec.js
│       ├── files.spec.js
│       ├── local_storage.spec.js
│       ├── location.spec.js
│       ├── misc.spec.js
│       ├── navigation.spec.js
│       ├── network_requests.spec.js
│       ├── querying.spec.js
│       ├── spies_stubs_clocks.spec.js
│       ├── traversal.spec.js
│       ├── utilities.spec.js
│       ├── viewport.spec.js
│       ├── waiting.spec.js
│       └── window.spec.js
├── plugins # 定義一些初始化設置跟變量
│   └── index.js
└── support # 可以抽取一些公共的方法作爲我們的私有命令
    ├── commands.js
    └── index.js

先寫一個簡單的測試

測試一下百度的搜索功能

// cypress/integration/baidu.spec.js
describe('首頁檢測', () => {
  it('應該能進入首頁，並且能搜索', () => {
    cy.visit('https://baidu.com');
    cy.get('#kw').type('cypress').wait(2000).get('#su').click().get('#kw').type(' github');
  });
});

在 Cypress 的可視化界面裏面，我們可以清晰的看到我們的測試代碼每一步在做什麼。除了可視化界面外，Cypress還支持在ci中運行（注意linux環境需要安裝上訴依賴），只需要運行cypress run即可。並且在ci中的運行，cyprss會將操作記錄在cypress/videos文件夾中，如果失敗了也會記錄下最後失敗場景的截圖。這樣我們再自動化測試中，如果失敗了也能輕鬆的追溯到案發現場！

最後記錄下我在使用 Cypress 些問題跟經驗

1. 在ci中運行一定要記得安裝環境依賴，如果對於安裝有疑問，可以翻閱cypress-docker-images
2. 我們可以利用 commands 功能進行一些公用方法的封裝。（示例見下）
3. 可以在 cypress/plugins/index.js 設置一些基礎的環境變量之類的數據，方便統一管理

// cypress/plugins/index.j
const baseUrls = {
  dev: 'http://localhost:8080/',
  test: 'http://test.com
  prod: 'http://prod.com
};

module.exports = (on, config) => {
  // TODO: 根據不同的環境變量切換一些配置
  const testENV = process.env.TEST_ENV || 'dev';

  config.env['TEST_ENV'] = testENV;
  config.baseUrl = baseUrls[testENV];
  return config;
};

4. 對於 Cypress 獲取 iframe 裏面的元素，目前 Cypress 還沒有像 testcafe 框架一樣的 switchToIframe 方法，目前這個方法在 Cypress 的規劃中，但是我們可以使用另外一種方式去獲取。

// 可以給 cypress comand cypress/support/commands.js
Cypress.Commands.add('iframe', { prevSubject: 'element' }, $iframe => {
  return new Cypress.Promise(resolve => {
    resolve($iframe.contents().find('body'));
  });
});

// 在使用的時候只需要get到了之後，調用一下就可以切入到iframe裏面 cypress/integration/**.spec.js
cy.get('iframe').iframe()
        
// 劃重點 必須要配置一下瀏覽器打開時候的屬性 cypress/plugins/index.js
module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, args) => {
    // 爲了解決iframe 讀取的問題 https://peter.sh/experiments/chromium-command-line-switches/
    // issue： https://github.com/cypress-io/cypress/issues/136
    if (browser.name === 'chrome') {
      args.push('--disable-site-isolation-trials');
      return args;
    }
  });
};