前端E2E测试略详解（以cypress为例）

上一篇文章很简略的介绍了E2E测试的一些框架，本文从相对更详细的层面进行整理

E2E测试 (by cypress)：

cypress安装

npm install cypress --save-dev

cypress启动

./node_modules/.bin/cypress open

推荐将启动命令配置在package.json的scripts中，命名为e2e

cypress自定义设置

cypress默认有推荐配置，我们可根据业务需求进行一些配置的覆盖。
配置创建方式：在根目录中创建cypress.json，常用内容如下：

{
  "viewportWidth": 1440,
  "viewportHeight": 960,
  "chromeWebSecurity": false,
  "fixturesFolder": "test/cypress/fixtures",
  "integrationFolder": "test/cypress/integration",
  "pluginsFile": "test/cypress/plugins",
  "screenshotsFolder": "test/cypress/screenshots",
  "videosFolder": "test/cypress/videos",
  "supportFile": "test/cypress/support",
  "requestTimeout": 10000,
  "defaultCommandTimeout": 10000,
  "baseUrl": "http:/***:****"
}

测试流程

1. 确定要测试的流程

以“添加员工”为例，流程为：登录——>点击添加员工进入添加员工界面——>填写员工信息——>点击保存完成添加——>等待跳转员工管理页面，检验表格中是否存在新增员工的数据

2. 明确流程中涉及操作的元素

登录：用户名输入框、密码输入框（无法测试手机或图片验证码，可以选择使用cookies）
点击添加员工：添加员工按钮
填写员工信息：手机号输入框、姓名输入框、分支按钮与分支弹窗、邮箱输入框、民族选择框与选项面板、性别选择框与选项面板、出生日期输入框
保存员工信息：保存按钮
检验添加成功与否：员工信息表格组件

3. 给操作元素确定标记

用户名输入框：data-test-input_username
密码输入框：data-test-input_password
添加员工按钮：data-test-btn_add
手机号输入框：data-test-input_phonenumber
姓名输入框：data-test-input_name
分支按钮：data-test-btn_branch
分支弹窗：data-test-selector_branch
邮箱输入框：data-test-input_email
民族选择框：data-test-select_nation
民族选项面板：data-test-option_nation
性别选择框：data-test-select_sex
性别选项面板：data-test-option_sex
出生日期输入框：data-test-input_date
保存按钮：data-test-btn_save
员工信息表格：data-test-table_staff

4. 编写该流程测试用例

  it('add staff', function() {
    cy.get('[data-test-btn_add]').click({force: true});
    cy.wait(1000)
    cy.get('[data-test-input_phonenumber]').type(phoneNumber)
    cy.get('[data-test-input_name]').type(userName)
    cy.get('[data-test-btn_branch]').click();
    cy.get('[data-test-selector_branch]').contains('PC组').prev().click();
    cy.get('[data-test-selector_branch]').contains('确 定').click();
    cy.get('[data-test-input_email]').type(email)
    cy.get('[data-test-select_nation]').click()
    cy.get('[data-test-option_nation]').eq(0).click()
    cy.get('[data-test-select_sex]').click()
    cy.get('[data-test-option_sex]').eq(0).click()
    cy.get('[data-test-input_date]').find('input').type('2017-08-08{enter}');
    cy.get('[data-test-btn_save]').click()
    cy.get('[data-test-table_staff]').should('contain', userName)
      .and('contain', phoneNumber)
  })

5. 开发过程中给相应元素进行标记

<Button type="primary" data-test-btn_add>添加员工</Button>
<Input data-test-input_phonenumber v-model.trim="form.mobilePhone.number"  @change="handleMobilePhoneChanged" v-loading="mobiePhoneInChecking" size="small">
<Input data-test-input_name v-model.trim="form.name"  size="small" maxlenth="20"></Input>
...

6. 开发完成后运行e2e测试

npm run dev
npm run e2e
点击测试文件

e2e测试成本与收益

成本分析：

cypress安装极为简单，且仅需修改少量配置即可集成到项目中，使用方式也很简洁；
工作流程和需要操作的元素是正常开发工作都要考虑的，几乎不算增加成本；
给操作元素确定标记在参见命名规范和确定操作元素的基础上可以较为轻易的完成；
cypess的e2e测试语法与单元测试语法相同，学习成本较低，编写测试用例较为简单；
在开发过程中给涉及操作的元素加上标记是很容易的，只需要额外付出很少的时间就能完成，但由于标记无法自动删除，因此会略微增加文件体积；
cypress运行简单，操作便捷，所增额外成本较少。
总的来说，相较于不使用e2e测试的项目开发，集成e2e测试的成本是很低的。

收益分析：

e2e测试可以替代人工进行流程测试，节省人力成本，在多次测试情况下收益更为显著；
使用e2e测试可以定期监测线上项目，及时发现问题，这在之前是没有的过程，线上项目的问题都是让用户直接发现反馈，如果能在一些用户遇到之前就能先发现并解决，无疑能起到很好的效果。

成本收益对比

综上分析，集成e2e测试的成本是比较低的，而收益较为明显，因此在项目中集成e2e测试是利大于弊的。

关于一些问题的解答

1. 为什么要打点？

①使用打点获取元素稳定性最高；

②打点后编写测试用例更便捷；

③打点过程也是对流程的整理；

④通过打点可以在业务代码开发完成就可以编写测试用例。

2. e2e测试的缺点？

①测试稳定性不高，偶尔会因为其他因素导致测试流程失败（如网路超时）；

②出现bug只能得到测试不通过的信息，但对出现bug的原因无法追溯。

3. 选用cypress进行e2e测试有什么问题？

①cypress基于chromenium，暂不支持其他型号浏览器的测试，无法测试浏览器兼容性；

②cypress控制台没有给出操作时长数据，不能测试代码性能；

③当项目实现方式（UI组件变化、组件结构变化等）出现变化时，可能导致一些预期打点位置不再适合或无法进行打点，需要根据更改后的结构对出现问题的组件重新处理。