自动化测试已经成为现代软件开发流程中不可或缺的一环,其中前端类测试工具的出现为前端开发者带来了福音。Cypress 是一款全新的前端自动化测试工具,它的特点在于易用性、速度快、可靠性高、自带自动化 UI。下面我们就来总结一下 Cypress 打造自动化测试平台的最佳实践与技巧。
安装 Cypress
首先要进行 Cypress 的安装。可以使用 npm 进行全局安装:
npm install cypress -g
安装完成后,可通过命令 cypress open
打开 Cypress 的 GUI 界面。
编写测试用例
Cypress 支持 JavaScript 和 CoffeeScript 两种语言编写测试用例,以 JavaScript 为例,我们新建一个 spec.js
文件来编写测试用例:
describe('My First Test', function() { it('Visit Google', function() { cy.visit('https://www.google.com') cy.contains('Gmail').click() }) })
上面的测试用例使用 describe
函数来描述测试场景,其中包含一个测试用例 it
。在这个例子中,我们使用了 Cypress 的 cy.visit()
方法来访问 Google 的首页,使用 cy.contains()
方法来选择页面上的 "Gmail" 元素,并通过 click()
方法来触发点击事件。
运行测试用例
在 GUI 界面中,我们可以选择要运行的测试用例。点击运行后,Cypress 会自动执行测试用例并生成报告。
当然也可以在命令行中运行 Cypress:
cypress run --spec cypress/integration/spec.js
这会执行 cypress/integration/spec.js
文件中的所有测试用例。
Cypress 的命令
Cypress 提供了丰富的命令来支持测试用例的编写。在这里我们介绍一些常用的命令及其用法。
visit()
用来访问一个 URL。
cy.visit('https://www.google.com')
get()
用来获取一个元素。
cy.get('input[name="username"]')
type()
用来在某个元素中输入文字。
cy.get('input[name="username"]').type('testuser')
click()
用来触发一个元素的点击事件。
cy.get('button[type="submit"]').click()
submit()
用来提交一个表单。
cy.get('form').submit()
should()
用来断言一个元素是否符合某个条件。
cy.get('input[name="username"]').should('have.value', 'testuser')
Cypress 的钩子函数
Cypress 提供了一些钩子函数,可以在测试用例执行前或执行后进行一些操作。
before()
在所有测试用例执行前执行。
before(() => { // 做一些准备工作 })
beforeEach()
在每个测试用例执行前执行。
beforeEach(() => { // 每个测试用例执行前都会执行这里的代码 })
after()
在所有测试用例执行后执行。
after(() => { // 收尾工作 })
afterEach()
在每个测试用例执行后执行。
afterEach(() => { // 每个测试用例执行后都会执行这里的代码 })
实战
下面我们来实战一下,用 Cypress 编写一个自动化测试用例。
准备工作
在这个例子中,我们以 React 创建的一个 To-do List 应用为例进行自动化测试。先新建一个 React 项目:
npx create-react-app cypress-demo cd cypress-demo
然后安装 Cypress:
npm install cypress --save-dev
测试用例
在 cypress/integration
文件夹下新建一个 todo.spec.js
文件,编写测试用例。
首先是访问页面:
describe('To-do List', () => { beforeEach(() => { cy.visit('/') }) })
然后是添加 To-do 项:
it('should add a new to-do item', () => { cy.get('input').type('Buy milk') cy.get('button[type="submit"]').click() cy.contains('Buy milk') })
接着是标记 To-do 项为已完成:
it('should mark a to-do item as completed', () => { cy.get('input').type('Buy milk') cy.get('button[type="submit"]').click() cy.contains('Buy milk').click() })
最后是删除 To-do 项:
it('should delete a to-do item', () => { cy.get('input').type('Buy milk') cy.get('button[type="submit"]').click() cy.contains('Buy milk').siblings('button').click() cy.get('li').should('not.contain', 'Buy milk') })
然后就可以运行测试用例了。
运行测试用例
在命令行中执行:
npm run cy:open
选择要运行的测试用例,Cypress 将会自动打开一个页面并执行测试用例。
总结
Cypress 是一款非常优秀的前端自动化测试工具,它的使用方法和其他测试工具有所不同,但是它的易用性和速度确实非常优秀。在使用 Cypress 进行测试时,需要特别注意编写好测试用例,尤其是需要正确处理异步操作,这有助于提高测试的可靠性。我们希望这篇文章能够帮助大家更好地了解 Cypress 的使用方法和技巧,进而更好地实现自动化测试。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64d4e636b5eee0b525cbd0d0