在赛普拉斯的一个片状测试中寻找 cy.wait() 的替代品答案

【问题标题】：Looking for alternatives to cy.wait() on a flaky test in Cypress在赛普拉斯的一个片状测试中寻找 cy.wait() 的替代品
【发布时间】：2021-02-15 20:09:54
【问题描述】：

所以我现在在赛普拉斯有一个不稳定的测试用例。当模态加载时，它会跳过填写名称部分，但会填写其他所有内容。因此，导致它第一次失败，但在重试时，它通过了。我尝试添加一个断言（见下文），但它不起作用。我试图避免使用等待命令添加，但想看看是否有任何其他替代 cy.wait()。

describe("Coach dealing with forms" () => {
 beforeEach(() => {
    loginfile.login(users.coach)
});

it("Can fill out form and submit", () => {
    cy.get("#modal-button").click()
    cy.get("#modal-form").should("exist")
    cy.get("#form-name").type("Mike Johnson")
    cy.get("#form-age").type("33")
    cy.get("#form-email").type("mj09@yahoo.com)
    cy.get("#submit-button").click()

   }    
}

【问题讨论】：

标签： javascript testing cypress race-condition

【解决方案1】：

有多种方法可以处理不稳定的测试。您可以尝试这些并检查最适合您的用例：

1.Test Retires 简单有效，只要自动重试执行就可以了。可以在全局范围内使用cypress.json 或describe 块或it 块。

为它屏蔽：

  // `it` test block with custom configuration
  it('allows user to login', {
    retries: {
      runMode: 2,
      openMode: 2
    }
  }, () => {
    // ...
  })

对于描述块：

// Customizing retry attempts for a suite of tests
describe('User bank accounts', {
  retries: {
    runMode: 2,
    openMode: 2,
  }
}, () => {
  // The per-suite configuration is applied to each test
  // If a test fails, it will be retried
  it('allows a user to view their transactions', () => {
    // ...
  }

  it('allows a user to edit their transactions', () => {
    // ...
  }
})

2.在写入名称字段之前添加.visible和click()

it("Can fill out form and submit", () => {
    cy.get("#modal-button").click()
    cy.get("#modal-form").should("exist")
    cy.get("#form-name").should('be.visible') //making sure the name field is visible
    cy.get("#form-name").click() //clicking on the name field
    cy.get("#form-name").type("Mike Johnson")
    cy.get("#form-age").type("33")
    cy.get("#form-email").type("mj09@yahoo.com")
    cy.get("#submit-button").click()
})

3.使用超时代替等待

cy.get("#form-name", {timeout: 10000}).type("Mike Johnson")

4.使用cy.intercept() 等待XHR 请求完成执行。在这里，我假设单击导致问题的模态按钮后有一些未完成的 XHR 请求。如果不是这样，您可以调试您的测试以找出并相应地应用拦截。

it("Can fill out form and submit", () => {
    cy.intercept('http://example.com/settings').as('getSettings') //Intercept the url that is triggered after clicking the modal button
    cy.get("#modal-button").click()
    cy.wait('@getSettings') //Wait till that request has finished execution
    cy.get("#modal-form").should("exist")
    cy.get("#form-name").type("Mike Johnson")
    cy.get("#form-age").type("33")
    cy.get("#form-email").type("mj09@yahoo.com")
    cy.get("#submit-button").click()
})

【讨论】：

【解决方案2】：

您应该为type() 命令添加一个超时时间（不是给get() 命令），并在其后加上should() 以确认已输入值。

type() 和 should() 都会重试直到成功。

it("Can fill out form and submit", () => {
  cy.get("#modal-button").click()
  cy.get("#modal-form")  // .should("exist") - don't need as cy.get() does that already

  cy.get("#form-name").type("Mike Johnson", {timeout: 10000}) // wait for actionability
    .should('have.value', 'Mike Johnson');

  cy.get("#form-age").type("33")
  cy.get("#form-email").type("mj09@yahoo.com")
  cy.get("#submit-button").click()
})

【讨论】：