2020-12-18 cypress-mgmm
介绍
Cypress是基于JavaScript语言的一种前端自动化测试工具。Cypress是自集成的，这类测试框架统称为e2e测试，即end to end（端到端）测试。
优势
- 安装简单，界面友好，运行速度快
- 全程都会有录屏。
- 支持debug调试，随时暂停。
安装
npm i cypress --save-dev
运行
./node_modules/.bin/cypress open
image.png
编写测试用例
-
进入examples目录新建自己的测试脚本
image.png
如baidu.spec.js
describe('My First Test', function () {
it('Does not do much!', function () {
cy.visit("https://www.baidu.com")
cy.get("#kw", {timeout: 2000}).type("黑洞")
cy.wait(100)
cy.get("#su", { timeout: 2000 }).click()
})
});
- 会同步在cypress的终端界面上
-
单击其中一个脚本，即可开始运行
image.png
步骤
- 访问网页
describe('My First Test', () => {
it('Visits the Kitchen Sink', () => {
cy.visit('https://www.baidu.com');
})
})
该步骤我们应该访问一个比较稳定且可控的页面，切记以下几点：
- 随时可能更改，这会破坏测试。
- 可能会进行A / B测试，从而无法获得一致的结果。
- 可能检测到您是脚本，并阻止了您的访问（Google这样做了）。
- 可能启用了安全功能，从而阻止了Cypress的工作。
所以这也需要我们的开发同事进行配合
- 查询元素
可以查找页面中是否存在特定文本等
cy.contains("百度一下")
image.png
retry
cypress测试失败后会尝试着再次测试，它会自动等待并重试，因为它希望最终在DOM中找到该内容。它不会立即失败！
image.png
- 点击元素
拿到一个页面后，我们要模仿人工操作，去进行输入或者点击，那首先我们需要获取到输入框和按钮。
例如我们想要在输入框内输入“cypress”并点击“百度一下”这个按钮
cy.get("#sw").type("cypress"); // 通过css选择器获取页面元素
cy.contains("百度一下").click();
image.png
4.提出断言
通过should方法来实现
当我们点击了百度一下以后，页面发生了跳转，此时我们可以看到页面路径变为了www.baidu.com/s，此时我们可以验证一下页面路径是否确实在我们预期之内：
cy.url().should("include", "/s")
image.png
页面过渡
切换页面时，我们不需要考虑新的页面是否加载完毕，这个工作cy会帮我们解决。
它会自动检测到诸如a之类的东西，page transition event并会自动暂停运行命令，直到下一页完成加载为止。
如果下一页未完成其加载阶段，则赛普拉斯将结束测试并出现错误。
前面我们提到过，cypress在超时之前未找到DOM元素要等待4秒钟-但是在这种情况下，当cypress检测到DOM元素时，page transition event它会自动将单个事件的超时增加到60秒PAGE LOAD。
换句话说，根据命令和发生的事件，cypress会自动更改其预期的超时以匹配Web应用程序的行为。
这些各种超时在配置文档中定义。
调试
左侧栏目会将所有的命令一一列举，当我们将鼠标放置在命令上，该条命令所对应的过程会实时显示在右侧的窗口中，包括一些事件行为，如点击
image.png
function fuck(list) {
// 输入list如[["是", "否"], ["是", "否"]]
if (list.length == 0) {
return [];
}
let res = list[0];
for (let i = 1; i < list.length; i++) {
const result = [];
for (let j = 0; j < res.length; j++) {
for (let k = 0; k < list[i].length; k++) {
result.push(list[i][k]+res[j]);
}
}
res = result;
}
return res;
}
