[Question] Wait for XHR triggered by action

I’m attempting to use playwright for e2e testing of our web application. One of the pages is a form input that automatically saves user input, using the onBlur event on the form <input>s.

The workflow we’re testing is:

• Navigate to the page
• Grab the value of a form input
• Append a string to the value
• Click away from the input to trigger the XHR request to the server to save the input
• Refresh page
• Verify that the form input is the same as what was previously inputted

Playwright code:

await page.goto(URL);
const selector = '[data-testid="name"]';
let element = await page.$(selector);
const originalName = await element.getAttribute('value');
const testTag = ' TestingTag';
await page.fill(selector, originalName + testTag);
await page.click('h1'); // <-- triggers onBlur, initiating XHR request
await page.reload();
element = await page.$(selector);
const alteredName = await element.getAttribute('value');
expect(alteredName === originalName + testTag);

The issue we’re seeing is that after the page is reloaded with the original value. This is because page.reload() happens immediately, not waiting for the XHR request to initiate or resolve.

We’ve tried to use page.waitForLoadState to detect and wait for network connections, but that hasn’t worked.

await page.fill(selector, originalName + testTag);
await page.click('h1');
await page.waitForLoadState('networkidle');
await page.reload();
/** also doesn't work **/
await page.fill(selector, originalName + testTag);
await Promise.all([
  page.waitForLoadState('networkidle'),
  page.click('h1')
]);
await page.reload();

We realize that it may be because the XHR request isn’t initiated by the time page.waitForLoadState is executed, so we’re wondering if we’re either not using page.waitForLoadState properly, not using the appropriate API to wait for XHR requests, or what we’re trying to do isn’t possible (at least not out of the box) with playwright.

Thanks for your help in advance.

[arjunattam]

Thanks @sedenardi. Yes, you’re right about page.waitForLoadState('networkidle') – this only works to check the load state after a navigation, and not at an arbitrary point in time. We have some prototypes on how this can work, and we should explore making them available. cc @dgozman

The promise.all pattern is better since the click triggers the action.

[sedenardi]

Hi @sedenardi – did you try waiting for the network call before page.reload? Something like this should work:

await page.click('h1');
await page.waitForResponse('https://example.com/resource');

API reference

• waitForRequest
• waitForResponse

@arjun27 We did, and that does indeed work. However, we were trying to avoid making our tests dependent on the underlying routes that are being called to save the data. This isn’t a complete show-stopper since our tests do depend on the URLs of pages.

For page.waitForLoadState('networkidle'), I think we were expecting different behavior. It doesn’t seem to consider network connections that are pending when it’s called. We tested this by adding a 2s delay to the server route that handles the XHR route, and then delaying the call to page.waitForLoadState('networkidle') by 1s to make sure it’s called while the XHR request is pending. page.waitForLoadState('networkidle') immediately returns, which runs counter to what we expected from the docs (“wait until there are no network connections for at least 500 ms”).

What are the timing implications of using waitForResponse? Is it pretty much guaranteed to always be called before any responses from the proceeding action (even if the XHR that page.click causes finishes in, say, 20ms)? Would it make more sense to do something like

await Promise.all([
  page.waitForResponse((resp: Response) => resp.url().includes(XHR_URL)),
  page.click('h1')
]);