2020-12-18 cypress-mgmm

介绍

Cypress是基于JavaScript语言的一种前端自动化测试工具。Cypress是自集成的，这类测试框架统称为e2e测试，即end to end（端到端）测试。

优势

1. 安装简单，界面友好，运行速度快
2. 全程都会有录屏。
3. 支持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

步骤

1. 访问网页

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://www.baidu.com');
  })
})

该步骤我们应该访问一个比较稳定且可控的页面，切记以下几点：

• 随时可能更改，这会破坏测试。
• 可能会进行A / B测试，从而无法获得一致的结果。
• 可能检测到您是脚本，并阻止了您的访问（Google这样做了）。
• 可能启用了安全功能，从而阻止了Cypress的工作。
  所以这也需要我们的开发同事进行配合

2. 查询元素
   可以查找页面中是否存在特定文本等
   cy.contains("百度一下")
   image.png

retry
cypress测试失败后会尝试着再次测试，它会自动等待并重试，因为它希望最终在DOM中找到该内容。它不会立即失败！

image.png

3. 点击元素
   拿到一个页面后，我们要模仿人工操作，去进行输入或者点击，那首先我们需要获取到输入框和按钮。
   例如我们想要在输入框内输入“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;
}