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;
    }
  });
};
複製代碼