前端E2E自动化测试方案 - Cypress 入门教程

背景

项目的稳定性是项目迭代过程中最重要的关注点,在Web应用开发中,如何保证程序的高质量,可靠和良好的用户体验是指关重要的。为了达到这些目标,E2E自动化测试是不可或缺的环节。

目前市面上流行的E2E自动化框架中,cypress是基于JavaScript编写用例的框架,作为前端开发者,可以轻松接入E2E自动化测试。

Cypress为开发者提供了简洁、高效的测试方法,无论是对于初学者还是经验丰富的开发者,都能迅速上手。本文会标签 - 乐闻世界站点为例,详细介绍cypress v12版本完整的接入流程。

使用步骤

安装Cypress

因为cypress是独立的cli工具,我们可以单独新建文件夹维护测试用例,也可以直接在对应需要测试的项目下维护用例。

bash
npm install cypress --save-dev

初始化 Cypress

bash
npx cypress open

这个命令会启动cypress的UI界面,并且会在项目中新建 cypress的文件夹,自动化测试相关的配置和用例文件都在此文件夹中。

编写第一个测试用例

  1. cypress/e2e**目录下新建以 .cy.js**为扩展名的文件,例如为标签页面创建一个名为 tag.cy.js 的文件。当然cypress也是支持 .ts 后缀的文件,习惯使用typescript的同学可以使用ts文件来编写用例 Tag页面实际的UI展示,感兴趣的可以尝试访问https://www.levenx.com/tags

    编写简单的测试用例:

    尝试访问Tag页面,判断能否正常访问页面

    bash
    describe("Tag页面用例", () => { it("访问Tag页面,查看功能是否正常", () => { cy.visit("<https://www.levenx.com/tags>"); cy.contains("乐闻世界").should("be.visible"); }); });

运行测试用例

cypress 操作页面详细步骤

  1. 选择 「E2E Testing」

  2. 选择「运行浏览器」

  3. 选择「测试用例」

  4. 运行效果

总结

本文介绍了Cypress最基础的使用流程,并成功运行了第一个E2E测试用例。我们后续会推出系列Cypress教程,来介绍更多测试方式与进阶用法,感兴趣的朋友尽情期待~