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

转载于:https://juejin.im/post/5c0663d051882516e70dd205