Playwright Wait for Response

The playwright can wait for network responses triggered by clicking or other actions in a browser.

 await page.waitForResponse('response url');

Let us see it in action. For this, we will be working on the reqres API site.

await page.goto('https://reqres.in/')
await page.locator('//li[@data-id="users-single"]').click()
await Promise.all([
       page.waitForResponse(resp => resp.url().includes('/api/users/2') && resp.status() === 200),
       page.locator("(//span[@class='url'])[1]").click()
       
   ]);
 await expect(page.locator('body > pre:nth-child(1)')).toHaveText('{"data":{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}')

• Initially, we click on the single-user GET method.
• Within a promise, we were wrapping the clicking of the URL, the response wait time, and providing the GET request URL.
• This will prevent race conditions after clicking on the link and waiting for the URL response.
• In the end, we have asserted with expect for the JSON body it presents itself after clicking.

await page.goto('https://reqres.in/')
await page.locator('//li[@data-id="users-single"]').click()
const [response] = await Promise.all([
       page.waitForResponse(resp => resp.url().includes('/api/users/2') && resp.status() === 200),
       page.locator("(//span[@class='url'])[1]").click()
       
   ]);
   console.log(response.body())
 await expect(page.locator('body > pre:nth-child(1)')).toHaveText('{"data":{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}')

• We can also get the response body by storing the Promise into a variable and returning it.