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;
    }
  });
};
复制代码