web自动化测试之cypress篇章

fasdfasdf12312
404 阅读3分钟

web自动化测试之cypress篇章

版本

文章依赖版本：^11.2.0

最新版本：RUNOOB 图标

前提准备与说明

{
	"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

原文博客链接：alex-blog-site.vercel.app/article/26

GitHub: github.com/Alex-Progra…

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

avatar
文章
阅读
粉丝