web-dev-qa-db-ja.com

サイプレス-UI操作によってトリガーされるxhrリクエストを待ちます

Select要素を備えたアプリがあります。select値を変更すると、ページはXHRリクエストを送信して、データをロードしてテーブルに挿入します。サイプレスは、リクエストが終了するまで待機し、データがテーブルにレンダリングされた後、テーブルの行数を確認する必要があります。

これは私が現在持っているコードです：

    cy.get('[name="pageselct"]').select('300'); // fire a request to load data

    // the below line get executed before the data actually loaded: 
    const totalTableRows = cy.get('#listingsData > tr').length;

どうすればそれを達成できますか？

cypress
5
Or Bachar

サイプレスでは、XHRを待つのは簡単です。詳細については、 https://docs.cypress.io/api/commands/wait.html#Alias を参照してください。

// Start the server that waits for routes
cy.server();

// Set the XHR up as a route, do not mock the return (unless you want to)
cy.route("GET", "/xhr/to/wait/for").as("getData");

// Fire a request to load data
cy.get('[name="pageselct"]').select('300');

// Wait for the route to complete
cy.wait("@getData");

// The below line will not get executed before the data actually loaded
const totalTableRows = cy.get('#listingsData > tr').length;
3
Brendan