Playwright synchronization issue with Angular application

user_12045701 0
Viewed 761

I'm trying to automate a scenario where in the service queries the DB and renders the data on to the UI. This rendering process takes quiet a lot of time (around 3 mins). Playwright doesn't wait till the page load complete. I tried using

await page.waitForLoadState();,
await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded'); and 
await page.setDefaultNavigationTimeout(150);

I'm working on an angular application, i have a lot of scenarios where in i face these type of sync issues.

single-page-application playwright angular typescript automated-tests
1 Answers

Implement custom wait function

till grid/table/ or other object fully loaded:

The easiest way is probably to use page.waitForFunction to wait until the grid/table is filled with enough rows.

For example you could wait till 1000 rows are loaded in the table with the following code:

await page.waitForFunction(() => document.querySelectorAll('#table-selector tr').length >= 1000);

Wait for response

WaitForResponse worked for me for waiting for long service responses with custom timeout:

Typically, you have to start waiting for the response before the action that causes the call happens.

// Alternative way with a predicate.
const [response] = await Promise.all([
  // Waits for the next response matching some conditions
  page.waitForResponse(response => response.url() === 'https://example.com' && response.status() === 200 , { timeout: 300000 }),
  // Triggers the response
  page.click('button.triggers-response'),
]);

Verify response body

Cases where verifying response status is not enough and response body also needs to be verified.

    const promise= page.waitForResponse(/abcd/); // Regex 
    await page.goto('https://myurl.com', {waitUntil: 'networkidle', timeout: 30000}); 
    var response = await promise; // waiting for promise
    let resp = await response.json(); 
    console.log(resp); 
    await browser.close();

Source: https://playwright.dev/docs/api/class-page#page-wait-for-response

user_18314560
Related