web自动化测试之cypress篇章
2023-02-16 本文已影响0人
AlexProgramer
版本
文章依赖版本：^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
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
