單擊按鈕后，賽普拉斯等待 API

Question

我制作了一個 React 應用程序，一切都運行良好，我現在正在使用 Cypress 編寫一些端到端測試。

React 應用程序都在同一個 url 上工作，它沒有任何路由，並且來自應用程序內部的 api 調用是通過單擊按鈕處理的。

該應用程序的基礎是最終用戶選擇一些選項，然后按過濾器查看一些依賴於所選選項的圖表。

cy.get('button').contains('Filter').click()

當在柏樹中按下按鈕時，它會運行 3 api 調用，這些調用按預期返回，但是查看柏樹文檔沒有簡單的方法，除非我使用內聯cy.wait(15000)這並不理想，因為有時它們會返回快很多，有時它們返回的速度較慢，具體取決於所選的選項。

編輯 1我試過使用服務器和路由：

cy.server({ method: 'GET' });
cy.route('/endpoint1*').as('one')
cy.route('/endpoint2*').as('two')
cy.route('/endpoint3*').as('three')
cy.get('button').contains('Filter').click()
cy.wait(['@one', '@two', '@three'], { responseTimeout: 15000 }) 

這給了我錯誤：

CypressError: Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: 'one'. No request ever occurred.

經過進一步調查

從responseTimeout更改為 just timeout修復了錯誤。

cy.server({ method: 'GET' });
cy.route('/endpoint1*').as('one')
cy.route('/endpoint2*').as('two')
cy.route('/endpoint3*').as('three')
cy.get('button').contains('Filter').click()
cy.wait(['@one', '@two', '@three'], { timeout: 15000 }).then(xhr => {
  // Do what you want with the xhr object
}) 

Answer 1

聽起來你會想要等待路線。 像這樣的東西：

cy.server();
cy.route('GET', '/api/route1').as('route1');
cy.route('GET', '/api/route2').as('route2');
cy.route('GET', '/api/route3').as('route3');

cy.get('button').contains('Filter').click();

// setting timeout because you mentioned it can take up to 15 seconds.
cy.wait(['@route1', '@route2', 'route3'], { responseTimeout: 15000 });

// This won't execute until all three API calls have returned
cy.get('#something').click();

Answer 2

您可以使用超時參數，而不是使用.wait 。 這樣，如果它完成得更快，您就不必等待。

cy.get('button').contains('Filter', {timeout: 15000}).click()

這在此處的官方文檔中被稱為選項參數之一。

Answer 3

cy.server()和cy.route()在Cypress 6.0.0中被棄用 在未來的版本中，將刪除對cy.server()和cy.route()的支持。 考慮改用cy.intercept() 。

這對我有用...

例如：-看屏幕截圖

    cy.intercept('GET', 'http://localhost:4001/meta').as('route');
    cy.get(':nth-child(2) > .nav-link').click();
    cy.contains('Filter');
    cy.wait(['@route'], { responseTimeout: 15000 });

Answer 4

嘗試這個：

    cy.contains('button', 'Save').click();
    cy.get('[data-ng-show="user.manage"]', { timeout: 10000 }).should('be.visible').then(() => {
      `cy.get('[data-ng-show="user.manage"]').click();
   })