版本
文章依赖版本:^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.