在前端开发中,对于一个开发完毕的页面,我们需要保证该页面的 UI 表现符合用户的使用习惯,且功能正确。于是,通过自动化测试的方式,可以确保代码不会因为频繁的修改而影响页面的正确性。
Cypress 是一个端到端测试框架,它可以让你编写与用户交互的前端测试。本篇文章将介绍 Cypress 的基本使用方法,以及如何使用 Cypress 进行 UI 自动化测试。
安装 Cypress
使用 npm 安装 Cypress:
--- ------- ------- ----------
编写测试用例
添加测试脚本
在 package.json
文件中添加 Cypress 的脚本:
- ---------- - ------- -------- ----- - -
这样可以通过 npm run test
命令来启动 Cypress。Cypress 会自动运行测试并生成报告。
创建测试用例
在 cypress/integration
目录下创建一个测试用例文件 example.spec.js
。
------------------- ---------- - ---------- ----- --- ---- ------ ---------- - ------------- -- --
这个测试用例会访问首页,并确保该页面已经加载完成。
运行测试
执行 npm run test
命令,Cypress 会自动运行测试,显示测试结果报告。
Cypress 还提供了交互式的测试环境,可以通过 npm run cypress:open
命令打开。
使用 Cypress 进行 UI 自动化测试
在浏览器中,有很多操作需要我们来测试,例如点击、输入、滚动等。下面是一个实例,用 Cypress 来完成一个搜索功能的测试。
新建一个测试用例
在 cypress/integration
目录下创建一个测试用例文件 search.spec.js
。
---------------- --------------- ---------- - ---------- -------- -- ------ --- -------- ---------- - ----------------------------------- ------------------------------------------------- -------------------------- ---------- -- --
首先,我们访问谷歌主页。然后,使用 cy.get('input[name=q]')
来获取搜索框,并使用 type()
方法向搜索框中输入关键字 Cypress.io
。在输入完成后,按下 Enter
键来提交表单。最后,我们通过 cy.url()
方法来检查是否跳转到谷歌搜索页面。
运行测试
执行 npm run test
命令,Cypress 会自动运行测试,显示测试结果报告。
Cypress 还提供了交互式的测试环境,可以通过 npm run cypress:open
命令打开。
总结
Cypress 是一个十分优秀的前端自动化测试框架,可以帮助我们轻松地完成 UI 自动化测试。如果你还没有使用过 Cypress 进行自动化测试,不妨试试。它可以让你的代码更加可靠,并提高开发效率。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64b0a1d648841e9894cb61bd