乐闻世界logo
搜索文章和话题
前端E2E自动化测试方案 - Cypress 入门教程

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

乐闻的头像
乐闻

2023年06月21日 09:49· 阅读 2043

背景

项目的稳定性是项目迭代过程中最重要的关注点，在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教程，来介绍更多测试方式与进阶用法，感兴趣的朋友尽情期待～

标签：
Cypress