web-dev-qa-db-ja.com

サイプレスボタンをクリックした後のAPIを待ちます

私はReact Appを作りました。これはすべて完全に動作していて、私は今やサイプレスを使ってエンドテストを終了しています。

React Appはすべて同じURLで動作します。ルートは何もありません。アプリの内部からのAPI呼び出しはボタンクリックで処理されます。

アプリの基礎はエンドユーザーがいくつかのオプションを選択し、次にフィルタを押して選択したオプションに依存するグラフを表示します。

_cy.get('button').contains('Filter').click()
_

ボタンがサイプレスで押されると、予想通りに戻ってきた3 APIコールを実行しますが、Cypress Docsを越えて、インライン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から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
}) 
_
7
Geoff

これを試して:

    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();
   })
 _
0
MarcinW