web自动化测试之cypress篇章

版本

文章依赖版本：^11.2.0
最新版本：^12.x

前提准备与说明

• 安装 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');

// ...

模拟按键

// 按住 ctrl
cy.get('body').type('{ctrl}', { release: false });

// 抬起 ctrl
cy.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.app/article/26
GitHub: https://github.com/Alex-Programer
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。