Cypress-前端E2E测试工具初体验

前言：这个是跟着官方文档学习的一个记录，可能有误差！可以自行前往官网学习：https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test?utm_source=Binary%3A%20App&utm_medium=Docs%20Menu&utm_content=First%20Test#Write-your-first-test

什么是 Cypress

Cypress 是一个开源的前端测试自动化框架，用于模拟用户与页面交互的一个自动测试工具

安装 Cypress

npm i cypress --save-dev

然后你需要等待他下载 exe 文件到你的电脑

下载完成后修改你的 package.json，在 script 一栏修改成你的执行命令

{
  "name": "cypress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "cypress:open": "cypress open"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "cypress": "^10.10.0"
  }
}

然后就是启动

npm run cypress:open

从一个简单的用例开始

我们先新建一个测试文件，然后在里面写下两段脚本：

// success
describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})
// fail
describe('My Second Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(false)
  })
})

在 cypress 运行后结果如下：

可以看到 cypress 捕获到了这个错误

测试一个真正的页面

1. 访问一个页面

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    // 页面访问
    cy.visit('https://example.cypress.io')
  })
})

2. 查找元素或内容

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    // 页面访问
    cy.visit('https://example.cypress.io')
    // 查找含有 type 的元素
    cy.contains('type')
    // 查找含有 type 的元素
    cy.contains('hype')
  })
})

运行结果如下：

在官方的示例页面中并没有含有 hype 这个单词的元素，因此抛出了错误

3. 模拟点击元素

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    // 页面访问
    cy.visit('https://example.cypress.io')
    // 查找含有 type 的元素并进行点击
    cy.contains('type').click()
  })
})

4. 进行断言

在上面进行了模拟点击后页面应该会跳转到点击元素指定的位置，因此我们可以用一个断言进行判断是否到了指定的位置

describe('My First Test', () => {
  it('clicking "type" navigates to a new url', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    // 判断当前 url 是否包含着 '/commands/actions'
    cy.url().should('include', '/commands/actions')
  })
})

到这里就已经完成了 Cypress 一个测试的流程，如果你想引入更多的测试，比如检测一个 input 是否可以正常输入内容，可以仿照这样子写：

describe('My First Test', () => {
  it('Gets, types and asserts', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    // 判断当前 url 是否包含着 '/commands/actions'
    cy.url().should('include', '/commands/actions')

    // 获取类名为 '.action-email' 的元素
    cy.get('.action-email')
      // 输入内容 'fake@email.com'
      .type('fake@email.com')
      // 判断是否含有指定内容
      .should('have.value', 'fake@email.com')
  })
})

当然官方并不推荐通过类名去获取元素，具体原因可以看官方文档的解释：https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

官方最推荐的是在标签上添加 data- 的前缀以便顺利捕获元素，比如：

<div data-cy="test">Test Element</div>

然后我们就可以通过这个自定义属性进行获取元素，并且获取的准确度大大提升

cy.get('[data-cy="test"]').click()

Cypress 有什么用？

看完整个流程我的第一反应是：这个人工测试也行啊，手动的自己测试，但后来想了一下，可能对于一些特定场景，自动化测试可能比手动好且效率高，以下列几个个人所想到的场景和想法：

执行大量操作，手动操作一下子记不住时
涉及到权限验证的操作，是否存在偶然性使得部分违规操作可行
简单但是有多种组合变化的操作
页面阻挡的元素被强制触发点击时的响应

希望在未来随着个人的学习与发展 Cypress 可以变得越来越重要