Handling Asynchronous Operations and Waiting Strategies

Welcome to the next phase of our course, where we delve into handling asynchronous operations and waiting strategies using Playwright. As web applications become more interactive and dynamic, managing asynchronous events is crucial for ensuring that your automated tests are both reliable and effective. This lesson will guide you through essential techniques for handling asynchronous operations, building on your existing Playwright skills.

Until now, we assumed that the operations that we perform (click, text filling, etc) are completed immediately. But in real world, it's usually not the case. You might say, well, we do await page.click(selector), so we wait for it to complete. But, in fact, when you click a button using Playwright and use await to wait for that action, the promise resolves immediately after the click action is dispatched, not when the onClick method completes. What does this mean?

Let's consider an example when we click on the Load More button in the app that we have investigated in this course. You may have noticed that it does not load everything immediately. It is a beautiful simulation of how things happen in real-world apps. Usually, to receive the data about books, it sends some request to a database, and it takes time to fetch the data from it. What happens in our code when we click it programmatically, is the program proceeds to the next line until the load more button finishes its job. So if we expect the number of visible books to be increased, it may not be the case if the app doesn't update data immediately.

In this lesson, you will learn how to manage asynchronous operations using Playwright's waiting strategies. This will allow your tests to synchronize actions with the web page's state, ensuring that elements are ready for interaction. Let's look at an example:

import { test, expect } from '@playwright/test';

test('async operations and waiting strategies', async ({ page }) => {
  await page.goto('http://localhost:3000');

  // Click the 'Load more' button
  await page.click('#load-more-btn');

  // Wait for the text 'Load More' to appear on the page
  await page.waitForSelector('text=Load More');

  // Validate the number of books loaded is 8
  const booksCnt = await page.locator('.book-title').count();
  expect(booksCnt).toBe(8);
});

In this test, we perform the following actions:

1. Page Navigation: The test begins by navigating to the desired URL using await page.goto('http://localhost:3000'). This ensures we are starting with a fresh state on the target page.

2. Using Selectors and Asynchronous Interactions: We interact with the "Load more" button using await page.click('#load-more-btn') and then wait for the text 'Load More' to reappear on the page with await page.waitForSelector('text=Load More'). After ensuring the text has appeared, we validate the number of elements loaded using await page.locator('.book-title').count() and then assert the count with expect(booksCnt).toBe(8). This ensures that the asynchronous loading of content is successfully completed.

Thus we are now familiar with one of the waiting strategies that helps us handle asynchronous operations. Another useful case is the network load state management: utilizing await page.waitForLoadState('networkidle') after the goto command can be essential in scenarios where you need to ensure all network requests are completed after page navigation or other actions. It helps prevent actions from being executed before the page is fully interactive.

import { test, expect } from '@playwright/test';

test('network load state management', async ({ page }) => {
  await page.goto('http://localhost:3000');

  // Ensure all network requests are completed before proceeding
  await page.waitForLoadState('networkidle');

  // Validate page is fully loaded by checking a key element
  const isLoaded = await page.isVisible('h1');
  expect(isLoaded).toBe(true);
});

• Navigation: The goto command navigates the browser to the specified URL and waits for the page to load.
• Network Idle State: After the initial page load, waitForLoadState('networkidle') pauses the script until there are no active network requests for at least 500 milliseconds. This ensures that all resources, such as images, scripts, and data, have been fully loaded.