• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Reliably waiting for network responses in Playwright

Playwright · September 4, 2022

Playwright makes what used to be complicated in end-to-testing almost too easily, especially waiting for network requests.

However, in the case of single-page applications (SPA) where a click on a link or button maybe fire a request but not a page load, you can encounter a situation where Playwright encounters a race condition between clicking and waiting for a response.

The issue is sometimes the waitForResponse in situations where the request might be faster than the click event finishing, it acts as if it never took place and times out. This issue is acknowledged in the Playwright documentation for page.waitForResponse.

The Playwright docs give an example of using Promise.all, but the syntax is a little less clean for my tastes.

// Note that Promise.all prevents a race condition
// between clicking and waiting for the response.
const [response] = await Promise.all([
  // Waits for the next response with the specified url
  page.waitForResponse('https://example.com/resource'),
  // Triggers the response
  page.click('button.triggers-response'),
]);

The proposed solution works, but we can make it cleaner by wrapping it in an asynchronous function instead:

export async function clickWait(page: Page, locator: string, url: string) {
  const [response] = await Promise.all([
    page.waitForResponse(url),
    page.click(locator)
  ]);

  return response;
}

And then, inside of your test cases, use it like this:

test('load button is clicked and WordPress posts are loaded', async ({ page }) => {
    await page.goto('http://localhost:8080/');
    await clickWait(page, '#load-posts', 'https://myapp.com/wp-json/wp/v1/post');
 })

This approach also works for waitForRequest and any other race condition situation you might encounter in Playwright. Just wrap in a function.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz