最近在研究如何提升项目质量,提炼了许多个用于自测的测试用例,但是每次修改后,都手工测试,成本太高,于是就想到了自动化测试。
在一年前已将 Cypress 集成到管理后台的项目中,不过没有投入到实践中。今天在实践时发现,版本已经到了 12.X,当时集成的版本是 8.X。
一、准备
在重新安装后,将之前的目录直接删除,运行命令后。
npx cypress open
1)目录
又会在根目录自动生成新文件,测试用例都会写在 e2e 目录中。
|-- downloads |-- e2e |----- example.spec.js |-- fixtures |-- support
将 cypress open 命令添加到 scripts 中,就能通过 npm run cypress 命令执行E2E测试了。
{ "scripts": { "cypress": "cypress open" } }
2)启动
在刚启动时,会先让你选择一款浏览器,我选择了 Chrome。
然后就会自动打开浏览器,右边的控制台我自己打开的,用于查看通信和打印信息。
中间有许多自动生成的 demo spec,初学者可以作为参考。
在点击某一个 spec 文件后,就会进入测试页面,左侧是可以回溯的测试过程和结果,中间是在执行的界面。
若测试不通过,会有醒目的红色错误提示。
二、实践
本次实践的测试对象是一个管理后台,管理后台是需要登录的,肯定不能在每一个测试用例都要重复登录的操作。
况且,我们的后台会限制登录次数,若登录太多,就会禁用账号。
1)登录
思前想后,决定直接存储登录后的鉴权信息,我们在登录后,会将此信息存储到 localStorage 中。
此时需要考虑一个问题,那就我团队中每个人的登录账号是不同的,如何存储这些信息。
阅读官方文档后,发现可以将配置信息放在 fixtures 目录中,创建 config.json 文件,内容如下。
{ "name": "xxx@xxx.me", "pwd": "yyy2023", "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9", "authorities": "*" }
config.json 文件会被版本忽略,所以文件即使被修改,也不会提交到版本库中。
然后将存储的功能封装成一条命令,这样在各个测试用例中调用会比较简洁。
Cypress.Commands.add('saveToken', () => { cy.fixture('config.json').then((config) => { const { token, authorities } = config; localStorage.setItem('token', token); localStorage.setItem('authorities', authorities); }); });
在 beforeEach() 方法中只需执行 cy.saveToken() 就能保持登录态。
describe('短链服务', () => { beforeEach(() => { cy.saveToken(); // 保持登录态 cy.visit('/operate/shortChain');// 跳转页面 }); });
2)测试
在解决登录态后,就开始正式的测试。
Cypress 的断言集成了 Chai,并且扩展了 Sinon 和 jQuery,也就是说,可以在框架内使用它们提供的功能。
下图是需要测试的短链服务界面,接下来会测试新建、更新、查询、分页和删除。
点击新建,会有一个弹框,在弹框中有一个表单。
cy.get() 用于查找元素,其参数可以是一个 CSS 选择器字符串,官方文档有专门一栏介绍查询方法。
cy.type() 用于填写文本框,官方还提供了点击、双击、上传文件等功能。scrollBehavior: false 是为了禁止移动滚动条。
页面截图需要上传,测试用的图像保存在 fixtures 目录中,cy.fixture() 可以读取此目录中的文件。
cy.selectFile() 用于上传文件,demo 加了个 @ 符号,不加就无法获取到文件。
it('存储', () => { // 定位到新建按钮 cy.get('.ant-btn').first().click(); cy.wait(500); // 在填写表单控件时禁用滚动 cy.get('.ant-modal #url').type(`http://www.xxx.com/test${random()}.html`, { scrollBehavior: false }); cy.get('.ant-modal #remark').type('测试', { scrollBehavior: false }); // 上传图像,图像存储在 fixtures 目录内 cy.fixture('demo.png', { encoding: null }).as('demo'); cy.get('input[type=file]').selectFile('@demo', { force: true }); cy.wait(1000); // 存储 cy.get('.ant-modal .ant-btn-primary').click(); cy.get('.ant-modal').should('not.exist'); // 断言存储流程是否正常 cy.scrollTo(0, 0); cy.wait(2000); });
cy.wait() 就是等待,因为自动操作速度很快,有时候需要停顿下,用肉眼观察下结果。
cy.should() 用于创建断言,这与之前的 expect() 断言稍有不同,其参数就是断言结果,关键字可以参考 Chai 的断言方法。
Cypress 提供了众多的 API,还有很大的挖掘空间,并且提供了丰富的 demo,学习起来也比较方便。
文章来源地址https://www.toymoban.com/news/detail-436286.html文章来源:https://www.toymoban.com/news/detail-436286.html
到了这里,关于Node.js躬行记(28)——Cypress自动化测试实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!