Cypress 快速上手
0x01 概述
（1）简介
- 官网：https://www.cypress.io/
- Cypress 是一个自动化测试框架，能够轻松地为现代 Web 应用程序创建测试，直观地调试它们，并在持续集成构建中自动运行它们
- 特点：实时重新加载、时间回溯调试、自动等待改变、网络流量控制、支持截屏录屏、提供测试云平台
- 优势：方便快速上手、执行速度快、提供可视化操作界面、社区支持强大
- 命令行选项：
npx cypress- 调试模式：
open - 运行模式：
run- 有头/无头模式：
--headed - 指定浏览器：
--browser=chrome
- 有头/无头模式：
- 调试模式：
（2）安装配置
- 使用命令
npm init -y快速初始化项目的 Node 环境 - 使用命令
npm install --save-dev cypress安装 Cypress - 使用命令
npx cypress open启动 Cypress - Component Testing 是组件测试，以下先使用端到端测试（E2E Tesing）
- 选择 Continue 后根据电脑上已安装的浏览器进行选择，以下以 Chrome v139 为例
- 完成配置后，会自动打开浏览器，并在项目目录生成 cypress 目录
- 根目录
- cypress
- fixtures：测试数据目录
- example.json
- support： 辅助函数、命令扩展
- commands.js
- e2e.js
- fixtures：测试数据目录
- node_modules：依赖目录
- cypress.config.js：Cypress 配置文件
- package.json：项目配置文件
- package-lock.json：确切项目配置文件
- cypress
- 在浏览器页面选择
Scaffold example specs生成一些官方提供的测试案例文件
- 根目录
- 在左侧选择案例并等待 Cypress 执行
- 在左侧可回溯历史操作，上方地址栏左侧的按钮可以定位页面中的元素如何通过 Cypress 访问
（3）第一个用例
-
在项目根目录下创建 jsconfig.json
{ "compilerOptions": { "baseUrl": "./", "types": ["cypress"] }, "include": ["cypress/**/*.js"] } -
在项目根目录下创建 index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form> <input data-cy="input-username" type="text" name="username" placeholder="username" /> <input data-cy="input-password" type="password" name="password" placeholder="password" /> <button data-cy="button-login" id="button-login">Login</button> </form> <script> document.getElementById("button-login").addEventListener("click", (e) => { e.preventDefault(); fetch("/auth/login", { method: "GET", }) .then((response) => response.json()) .then((reply) => { if (reply.code === "0") window.open("/dashboard"); else return; }); }); </script> </body> </html> -
在 cypress 目录下新建 e2e\login.cy.js
/// <reference types="cypress"> describe("登录测试用例", () => { beforeEach(() => { cy.visit("http://127.0.0.1:3001/index.html"); }); it("login", () => { cy.intercept("POST", "/auth/login").as( "loginRequest" ); cy.get("[data-cy=input-username]").type("admin"); cy.get("[data-cy=input-password]").type("123456"); cy.get("[data-cy=button-login]").click(); cy.wait("@loginRequest").then((interception) => expect(interception.response.statusCode).to.eq(200) ); }); }); -
在 Cypress 可视化界面选择 login.cy.js 并完成测试
0x02 常用语法
（1）断言
断言方法：
should()，如cy.get("[data-cy=dialog]").should("exist");
-
存在性：
should("exist") -
文本内容：
- 包含：
should("contain", "文本") - 精准匹配：
should("have.text", "文本")
- 包含：
-
元素可见性：
- 可见：
should("be.visible") - 不可见：
should("not.be.visible")
- 可见：
-
表单输入：
should("have.value", "12345") -
页面导航：
- 包含：
cy.url().should("include", "/login") - 精确匹配：
cy.location("pathname").should("eq", "/login")
- 包含：
-
网络请求：
cy.intercept("POST", "/login").as("loginReq") -
验证请求：
cy .get("@loginReq") .its("request.body") .should("deep.equal", { username: "admin", password: "12345" })- 验证响应的状态码：
its("response.statusCode").should("eq", 200)
- 验证响应的状态码：
-
元素属性：
should("have.attr", "type", "text")，should("have.class", "card") -
元素数量：
should("have.length", 3) -
本地存储：
cy .window() .its("localStorage.token") .should("exist")
（2）页面导航
- 加载页面：
visit("path/to/new/page") - 操作浏览器历史记录：
go("back")，go("forward") - 重载：
reload()
（3）元素定位
- CSS 选择器：
get("button.primary")，get("#container") - 属性选择器：
get("[data-cy=input-username]")，get("input[type='text']") - 文本精确匹配：
cy.contains("文本")- 指定元素中文本匹配：
cy.contains(".card", "文本") - 正则表达式匹配：
cy.contains(/^[0-9]/g)
- 指定元素中文本匹配：
（4）层级关系
需要先选择元素后进行层级选择
- 父母层级：
parent() - 孩子层级：
children() - 兄弟层级：
siblings() - 兄弟且向前邻近层级：
prev() - 兄弟且向后邻近层级：
next()
（5）within
within()方法需要传入一个回调函数作为参数- 传入的回调函数用于对多个元素执行同一套方法
（6）元素操作
-
输入：
type() -
清空：
clear() -
聚焦：
focus() -
失焦：
blur() -
提交：
submit() -
点击：
click() -
双击：
dblclick() -
右击：
rightclick() -
单（多）选框选中：
check() -
下拉框选中：
select()既可以通过索引选中，也可以通过文本选中
-
模拟滚动：
srcollTo() -
滚动使视口到指定元素：
scrollIntoView()
-End-
浙公网安备 33010602011771号