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.