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

Question

所以我现在在 Cypress 中有一个不稳定的测试用例。当模态加载时，它会跳过填写名称部分，但会填写其他所有内容。因此，导致它第一次失败，但在重试时，它通过了。我尝试添加一个断言（见下文），但它不起作用。我试图避免使用等待命令进行添加，但想看看是否还有 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()

   }    
}

Answer 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.Adding .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.Use 超时而不是等待

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

4.Use 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()
})

Answer 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()
})

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

Looking for alternatives to cy.wait() on a flaky test in Cypress

javascript

testing

race-condition

cypress