在 Cypress 测试中，如果预期的 XHR 请求没有发出，我如何重试按钮单击：waitUntil() with click XHR condition？

Question

在一个非常高的层次上，我们点击一个命令建筑控制点的按钮；打开或关闭灯。单击应该向服务器发送 POST 请求。问题是有时，单击按钮后 POST 请求不会发出。该按钮没有指示它是否已被单击的功能（次要增强）。

目前，我想使用 Cypress 插件解决这个问题 waitUntil()。

    // define routes
    cy.server();
    cy.route('POST', '\*\*/pointcommands').as('sendCommand');

    // setup checkFunction for cy.waitUntil()
    const waitForPost200 = () => cy.wait('@sendCommand', {timeout: 10000}).then(xhr => cy.wrap(xhr).its('status').should('eq', 200));

    // setup jQuery for cy.pipe()
    const click = $el => $el.click();

    // click the button
    cy.get('.marengo-ok')
      .should('be.visible')
      .pipe(click);
      // need to pass in a synchronous should() check so that the click is retried. How can we achieve this with waitUntil ?

    // wait until checkFunction waitForPost200() returns truthy
    cy.waitUntil( (): any => waitForPost200(), {
      timeout: 10000,
      interval: 1000,
      errorMsg: 'POST not sent `enter code here`within time limit'
    });

Answer 1

据我所知，在失败的情况下（如果没有进行 XHR 调用）无法利用 cy.wait('@sendCommand') 命令恢复测试。

我想到的最快的解决方案如下：

let requestStarted = false; // will be set to true when the XHR request starts
cy.route({
  method: 'POST',
  url: '\*\*/pointcommands',
  onRequest: () => (requestStarted = true)
}).as('sendCommand');

cy.get(".marengo-ok").as("button");

cy.waitUntil(() =>
    cy
    .get("@button")
    .should('be.visible')
    .click()
    .then(() => requestStarted === true)
, {
  timeout: 10000,
  interval: 1000,
  errorMsg: 'POST not sent `enter code here`within time limit'
});

cy.wait("@sendCommand");

你可以玩a repo我给你准备的，我模拟你的情况。这是我的回购中测试的最终结果。

如果您需要更多帮助，请告诉我

Answer 2

我认为潜在的问题是测试运行器在附加事件侦听器之前单击了按钮。请参阅 https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/ My advice (aside from using waitUntil plugin), is to use https://github.com/NicholasBoll/cypress-pipe 中的讨论，其中提供 cy.pipe 并使用 jQuery 方法单击按钮

// cypress-pipe does not retry any Cypress commands
// so we need to click on the element using
// jQuery method "$el.click()" and not "cy.click()"
const click = $el => $el.click()

cy.get('.owl-dt-popup')
  .should('be.visible')
  .contains('.owl-dt-calendar-cell-content', dayRegex)
  .pipe(click)
  .should($el => {
    expect($el).to.not.be.visible
  })

在 Cypress 测试中，如果预期的 XHR 请求没有发出，我如何重试按钮单击：waitUntil() with click XHR condition？

In Cypress tests, how do I retry a button click if an expected XHR request does not go out : waitUntil() with click XHR condition??

javascript

xmlhttprequest

wait

cypress