Cypress 进阶知识

Cypress practice note

配置文件 cypress.config.json

怎么实现用例错误录屏以及截图？

cypress提供了很好的机制，默认情况下，当使用cypress run mode运行测试的时候，会自动进行错误用例的screenshot以及video record。但是需要注意的是，默认情况下，video会被压缩32CRF，这一数值可以在1-50 之间进行更改。在执行下一次cypress run的时候会默认清除上一次留下的数据。

Videos: {
        videoUploadOnPasses: false,
        video : true,
        videosFolder: "",
        videoTimestamp: "combined",
    },

怎么实现用例重试？

cypress中提供了用例重试机制

  retries: {
    runMode: 2,
    openMode: 2
  },

retires可以配置的位置比较灵活，在config文件中进行配置，那作用范围就是运行模式下的所有用例。在test suit中进行配置，那作用范围就是整个test suit；当然也可以针对某个test case设置重试，可以针对一些test flaky增加重试的次数以保证测试的稳定。

怎么实现切换环境？

实现环境切换是很有必要的，这样的话同一套用例就可以适配不同的环境。方法有很多种：

1. 增加不同环境的配置文件，运行的时候指定配置文件。

创建新的config folder，然后创建不同环境的config.json文件。运行的时候指定config文件。

1. 使用env在config文件中进行配置，然后讲运行环境作为环境变量注入，注入后会根据该值选择相应的配置。

    env: {
      apiUrl: "",
      mobileViewportWidthBreakpoint: 414,
      coverage: false,
      codeCoverage: {
        url: "",
        exclude: "cypress/**/*.*",
      },
      sit: "https://swab-sit.moh.gov.sg/appointment/login?key=%7B%22iv%22%3A%22e1d85a0a67001427b9502fa37a024d5a%22%2C%22content%22%3A%22072be20d5bd37dfb5baa122bf24b38e0%22%7D",
      uat: "https://swab-uat.moh.gov.sg/appointment/login?key=%7B%22iv%22%3A%22e1d85a0a67001427b9502fa37a024d5a%22%2C%22content%22%3A%22072be20d5bd37dfb5baa122bf24b38e0%22%7D",
    },

怎么指定用例的查找路径？

Cypress是基于mocha完成的测试用例以及测试加载，所以本质上是改进的mocha的test runner，默认是所有文件中后缀为c y.js/ts/的文件。也可以在配置中指定查找范围。

怎么设置测试报告？

Cypress在常用组件中的应用

Cypress 测试radio组件

cy.get(Gender_of_female).then((result) => {
        if (result.attr('checked')) {
            cy.get(Gender_of_male).check()
        } else {
            cy.get(Gender_of_female).check()
        }
        });

Cypress 测试checkbox组件

可以选择select方法，选择多个符合条件的checkbox，可以使用check()方法选中某个。

Cypress 测试pop up/ alert

selenium框架测试pop up或者alert的时候，我们一般都会切换window或者使用pop up方法捕获弹出的内容再进行操作，cypress天然的特性就代表它不需要这样的步骤，直接操作弹出元素就可以了。

Cypress 测试iframe

Cypress 测试slot

Cypress之CSS选择器

Cypress最佳实践

设置全局URL

为了绕过同源策略，当 Cypress 开始运行测试时，会在 localhost 上打开一个随机端口进行初始化，直到遇见第一个 cy.visit() 命令里的 URL 才匹配被测应用程序的 URL。当 Cypress 以交互模式启动时，会看到 Cypress 先运行在 localhost 上然后又切换到 URL 重新运行（多消耗了一部分时间），在 cypress.json 中设置 baseUrl ，这样不仅可以在运行时节省 Cypress 匹配被测应用程序 URl 的时间，还可以在编写待访问的 URL 时，忽略 baseUrl，直接写后面的路径。

避免访问多个站点

为了绕开同源策略的限制而实现的方案，使得 Cypress 不能支持在一个测试用例文件里访问多个不同域名的 URL，如果访问了多个不同域名的站点，Cypress 会直接报错。在最新的Cypress中提供了cy.origin()方法解决了这个问题，但是仍然不建议访问脱离控制的第三方应用。

删除等待代码

不同于其他的测试框架，cypress的query方法都天然带有重试和超时时间，所以不需要强制等待页面渲染，要避免这样的写法：

it('错误的做法，强制等待的栗子', function () {
    cy.server()
    cy.route('/commands/action/*').as('getAction')
    cy.wait(3000)
    cy.log(123)
});
​
​
it('正确的做法，使用别名来等待', function () {
    cy.server()
    cy.route('/commands/action/*').as('getAction')
    cy.wait('@getAction', {timeout: 50000}).then(function (xhr) {
        cy.log(xhr)
    })
});

停用条件测试

所谓的条件测试就是，如果A=true则执行B操作，否则就执行C操作。但是在Cypress中认为条件测试是不稳定的。测试本来就应该是有固定的期望结果的，这样不确定的条件测试可能在条件失效的时候导致测试的结果也不再可靠。所以我们应该尽量增加前置条件使得测试指向唯一的结果。如果一定要用条件测试，可以使用：

```javascript
cy.get(Gender_of_female).then((result) => {
        if (result.attr('checked')) {
            cy.get(Gender_of_male).check()
        } else {
            cy.get(Gender_of_female).check()
        }
        });
```

注意：cypress断言的返回值是一个cypress对象，可以继续执行其他操作，不是一个布尔值，所以无法直接使用断言当作条件。

实时调试和中断

使用debug或者debugger进行实时调试或者中断

cy.get('nav').debug()

it('debugger', function () {
    cy.get('a').then(function () {
        debugger
    })
});

断言最佳实践

断言方式分为BDD的和TDD的两种不同的方式，在cypress中同时支持这两种不同方式，对于BDD，也就是我们常见的断言方式，GIVEN，WHEN，THEN expectation result。对于TDD也就是在断言中包含了测试数据和测试结果。

使用custome command

Custom Commands 被认为是替代 PageObject 的良好选择，使用 Custom Commands 可以创建自定义命令和替换现有命令。Custom Commands 默认存放在 cypress/support/commands.js 文件中，因为它是通过 supportFile（ 定义在 cypress/support/index.js ）中的 import 语句导入的，所以会在所有测试用例执行前加载。

定义custome command的好处

• 定义在 cypress/support/command.js 中的命令可以像 Cypress 内置命令那样直接使用，无须 import 对应的 page（实际上 PageObject 模式在 Cypress 看来无非是数据/操作函数的共享）

• 自定义命令可以比 PageObject 模式运行更快，Cypress 和应用程序运行在同一个浏览器中，意味着 Cypress 可以直接发送请求到应用程序并设置运行测试所需要的用户状态，而这一切通常无须通过页面操作，这使得使用了自定义命令的测试会更加稳定

• 自定义命令允许重写 Cypress 内置命令，意味着可以自定义测试框架并立刻全局应用。