Creating a Custom Wait Function
Ensuring the grid, table, or any object is fully loaded:
One of the simplest methods involves using page.waitForFunction to wait until the desired element is populated with sufficient data.
For instance, you can set a wait condition for 1000 rows in a table like this:
await page.waitForFunction(() => document.querySelectorAll('#table-selector tr').length >= 1000);
Waiting for Response
Utilizing WaitForResponse to handle extended service response times along with custom timeout limits:
Usually, it's essential to initiate the waiting process before triggering the action that prompts the request.
// An example using a predicate.
const [response] = await Promise.all([
// Awaits a suitable response based on specific conditions
page.waitForResponse(response => response.url() === 'https://example.com' && response.status() === 200 , { timeout: 300000 }),
// Initiates the response trigger
page.click('button.triggers-response'),
]);
Validating Response Data
Situations where merely confirming the response status isn't adequate and verifying the response body becomes necessary.
const promise= page.waitForResponse(/abcd/); // Using Regular Expression
await page.goto('https://myurl.com', {waitUntil: 'networkidle', timeout: 30000});
var response = await promise; // Waiting for the promise fulfillment
let resp = await response.json();
console.log(resp);
await browser.close();
Source: