Cypress 系列之----03 常见问题

【问题1】不支持多浏览器测试

 

【问题2】当元素不存在或者没有找到时，测试会失败

这个坑貌似听起来很正确，但我们想一下这个场景：如果我们希望当某个元素不存在时，需要执行某个操作。但是因为以上默认的实现，没有找到元素，所以会直接报错。

或者某个元素刚开始没有出现，必须将页面滚动到底部，直到全部数据加载完后才出现，也会遇到问题。

有没有方法解决？有 有 有！

利用jquery 查找元素的length是否大于0，然后利用if或while循环进行判断。

if (Cypress.$('.show-more-button').length > 0) {
  cy.get('.show-more-button a').click();
}
else{
  do something
}/

有没有方法解决？有 有 有！

使用cypress-promise这个库 如上述代码在返回最外层使用 promisify()方法，在使用ES7 promise语法 async await 就可以转换成为异步操作。

async getElementsText(selector) {
 return await promisify(Cypress.$(fxConfig[selector]).map(function () {
   return Cypress.$(this).text()
 }).get()))
}

【问题3】除了cy对象外的所有操作都是同步的

这就意味着类似以下代码你必须用promise封装，否则将会出现错误永远拿不到正确值，因为Cypress.$其实使用的是jquery对象，方法返回永远都是同步。

getElementsText(selector) {
  return Cypress.$(fxConfig[selector]).map(function () {
    return Cypress.$(this).text()
  })get()))
}

【问题4】CypressError: Timed out retrying: cy.type() failed because this element is readonly:

<input type="text" id="fstRegYm" name="fstRegYm" value="" readonly="readonly" class="in-pre" placeholder="请填写注册登记日期">

Fix this problem, or use {force: true} to disable error checking.
https://on.cypress.io/element-cannot-be-interacted-with

 解决办法：操作中加上参数{force: true} 

 

 【问题1】Uncaught TypeError: Cannot read property 'style' of undefined

This error originated from your application code, not from Cypress.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the 'uncaught:exception' event.

https://on.cypress.io/uncaught-exception-from-application

  解决办法：忽略页面本身存在的未处理异常,代码如下

Cypress.Commands.add('exceptionIgnore', () => {
    cy.on('uncaught:exception', (err, runnable) => {
        expect(err.message).to.include(`Cannot read property 'style' of undefined`)

        // using mocha's async done callback to finish
        // this test so we prove that an uncaught exception
        // was thrown
        done()
        // return false to prevent the error from
        // failing this test
        return false
    })
})
---------
describe('Echannel moblie Test--shortTermTravelInsurance', () => {
  before(() => {
    cy.exceptionIgnore();
  })