web-dev-qa-db-ja.com

サイプレステストでページをロードした後、XHRリクエストを確実に待つにはどうすればよいですか？

私のアプリでは、ページにアクセスすると、データを取得してページに表示するためにいくつかのネットワーク要求を行います。その後、ボタンをクリックしてフィールドに入力し、そのデータをフィルタリングします。

基本的にページにアクセスしていくつかのフィルターを適用し、dom内のものが正しく見えることを確認するサイプレステストがあります。

it(`filters the data by 'price'`, () => {
  cy.server()
  cy.route('POST', 'http://my-api.biz/api').as('apiRequest')

  cy.visit('/')

  // initial page load loads the min and max price bounds for the UI,
  // as well as the data to initially populate the page. they happen
  // to hit the same URL with different POST params
  cy.wait(['@apiRequest', '@apiRequest'])

  cy.get('#price-filter-min').type('1000')
  cy.get('#price-filter-max').type('1400')

  // wait for data to get refreshed
  cy.wait('@apiRequest')

  cy
    .get('[data-test-column="price"]')
    .each($el => {
      const value = parseFloat($el.text())
      expect(value).to.be.gte(1000)
      expect(value).to.be.lte(1400)
    })
})

ただし、サイプレスがページをロードしているように見える場合があり、XHRリクエストを実行しますbefore待機し、その後散発的に失敗します：

CypressError：再試行のタイムアウト：cy.wait（）は、ルート 'apiRequest'への2番目の応答を30000ms待機してタイムアウトしました。応答はありませんでした。

既に発生したリクエストを待っているからです。

このテストを書くより良い方法はありますか？この競合状態を回避するページにアクセスしてXHRリクエストを待つ方法はありますか？

[〜＃〜] update [〜＃〜]

孤立したテストケースでこれを再作成しようとしましたが、すべて正常に動作しているようです。そのため、おそらくオペレータエラーが発生しています。

cypress
6
schpet

このようなことができます

// Give an alias to request
cy.server().route("GET", /odata/locations/**).as('dataGetFirst')

// Visit site
cy.visit('admin/locations')

// Wait for response.status to be 200
cy.wait('@dataGetFirst').its('status').should('be', 200) 

// Continue
7
Luis Marroquin

cy.visit('/')を使用しているので、configにbaseUrlが設定されていると思います。 cy.route()のURLパラメーターは、baseUrl +舞台裏でパラメーターとして渡す文字列を行います。

したがって、POST要求を送信するURLは_http://my-api.biz/apihttp://my-api.biz/api_またはそのようなものです。

ルートコマンドを次のように変更してみてください。

cy.route('POST', '/api/foobar').as('apiRequest')

追加のドキュメントと例：https://docs.cypress.io/guides/guides/network-requests.html#Fixtures =

0
TJH