版本
文章依赖版本：^11.2.0 最新版本：
前提筹备与阐明
- 装置
cypress的客户端软件作为运行环境. - 在我的项目根目录下装置
cypress - 配置启动脚本
{ "e2e": "cypress open", // 关上客户端手动选择性执行 "test": "cypress run && cypress run --component" // 在命令行里，执行所有的测试用例}cypress 的 api ，都是以同步的写法，来异步执行的。比方 async await 那样，它不须要显示申明，间接调用。比方在获取元素的时候，它会有相应的等待时间来异步解决。
应用场景
返回某个页面
cy.visit(url);获取元素
选择器匹配
// 这种匹配形式，能够参考 css 的 querySelector 的用法cy.get(selector);内容匹配
// 内容匹配，下列语句将会匹配蕴含了 hello 文本的元素cy.contain('hello');事件调用
根本事件
// 以调用点击事件为例，其它事件也能够同样如此cy.get(selector).click();简单事件
// 这种形式，除了触发根本事件，还能够触发 mousedown、mouseup 这类的事件，来模仿简单的用户操作cy.get(selector).trigger(eventName);内容校验
// 该语法是在判断选中的元素，应该有 hello 的内容cy.get(selector).should('have.value', 'hello');// 判断元素的 top 值，是否为 10 px;cy.get(selector).should('have.css', 'top').and('eq', '10px');// ...模仿按键
// 按住 ctrlcy.get('body').type('{ctrl}', { release: false });// 抬起 ctrlcy.get('body').type('{ctrl}', { release: true });接口申请
获取接口的调用后果
// 开始监听某个接口 cy.intercept({ method: 'GET', // 比方监听 /api/login?account=xxx，写法为：/api/login* url: `接口的path局部`, }).as('test');// 此处留神。在监听的代码开始执行时，前面的申请行为如果不是该接口，就会报错。也就是说，在开始监听后，须要确保接下来的申请肯定是这个监听的申请。所以不能一开始就去监听。举荐做法就是在监听后，确定后续行为马上能够监听到该接口来解决，比方在这里触发某个按钮的点击行为，来调用接口// 获取接口的申请后果cy.wait('@test') .its('response.body') .then(data => { cy.log(JSON.stringify(data)); });根据上述形容，能够封装如下办法应用
export const watchRequest = <T>(url: string, trigger: () => void, callback: (data: T) => void) => { cy.intercept({ method: 'GET', url: `${url}*`, }).as(url); trigger(); cy.wait(`@${url}`) .its('response.body') .then(data) => { callback(data); });};批改申请参数
// 批改 get 申请的参数 cy.intercept('/api/test*', (req) => { const request = JSON.parse(req.query as string); req.query.account = 2;});留神：批改的申请参数，在控制台外面看申请时，参数没有产生显示变动，实际上曾经扭转了。
强制期待
cy.wait(1000); // 期待1s自定义指令
元素是否存在
申明类型
/// <reference types="cypress" />/// <reference types="cypress-wait-until" />declare namespace Cypress { interface Chainable<Subject> { /** * 查看元素是否存在 * * @param selector 选择器 * @return Chainable<Subject> */ isElementExist(selector: string): Chainable<Subject>; }}定义指令
/// <reference types="cypress" />/// <reference types="cypress-wait-until" />require("cypress-wait-until");export function isElementExist(selector: string) { return cy .window() .then(($window) => $window.document.querySelector(selector));}Cypress.Commands.add("isElementExist", isElementExist);应用指令
cy.isElementExist(".shoe-id").then((value) => { if (value) { // ... } else { // ... }}测试数据
cypress/fixtures 目录下的 json 文件能够当作测试数据来用，例如: user.json:
{ "username": "hello world"}那么在应用的时候就能够这么获取
cy.fixture('user').then(res => { console.log(res.username);})作者：Alex
文章题目：《web自动化测试之cypress篇章》
文章公布日期：2023-02-17 14:56
原文博客链接：https://alex-blog-site.vercel...
GitHub: https://github.com/Alex-Progr...
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。