How to wait for requests and validate responses using playwright?

Question

This is my first time using playwright and I can't figure out how to wait for requests and validate responses. I've been using cypress for a quite a long time, and it was pretty easy to manage network requests. For example, I need to validate response after clicking a button and this is how I would do it with cypress:

        cy.server()
        cy.route('POST', '/api/contacts').as('newContact')

        cy.get('.btn').click()

        cy.wait('@newContact').then((response) => {
            expect(response.status).to.eq(400)
            expect(response.responseBody.data.name).to.eq('abcde')
        })

And this is how I'm trying to do the same thing with playwright, but it validates GET request that was sent long before it even clicked save button. I can't figure out how to manage this request properly and that's a show stopper for my test suite:

        await contacts.clickSaveBtn()

        await page.waitForResponse((resp) => {
            resp.url().includes('/api/contacts')
            expect(resp.status()).toBe(400)
        })

Any help or advice would be really appreciated

pavelsaman · Accepted Answer · 2021-03-25 09:27:28Z

60

What you need to do is first start waiting for the response and then click, so the waitForResponse() can catch the actual response coming as a result of the click.

await Promise.all([
    page.waitForResponse(resp => resp.url().includes('/api/contacts') && resp.status() === 400),
    contacts.clickSaveBtn()
]);

This should handle the possible race condition.

answered Mar 25, 2021 at 9:27

pavelsaman

8,4321 gold badge19 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ggorlen Over a year ago

I suggest the following update: const [response] = await Promise.all([, because often times you'll want to use the response after it arrives.

Vishal Aggarwal Jan 31 at 4:08

See one complete end to end usage example - stackoverflow.com/a/79401743/1831456

Mewoulou Le Roy Loïc Oct 1 at 5:41

what about when a request has parameters and ids ( constanlt changing ) in the endpoint

eeeeeeeeeeeeeeeeeeeeeeeeeeeeee · Accepted Answer · 2022-12-26 18:53:55Z

24

Alternatively, you can assign a promise, then later wait for it:

const responsePromise = page.waitForResponse(resp => resp.url().includes('/api/contacts') && resp.status() === 400);
await contacts.clickSaveBtn();
const response = await responsePromise;

It's more readable and you get the response value.

answered Dec 26, 2022 at 18:53

eeeeeeeeeeeeeeeeeeeeeeeeeeeeee

1,2051 gold badge14 silver badges23 bronze badges

2 Comments

Drashti Patel Jul 3 at 13:12

Starting waitForResponse after triggering the action risks missing the network event if it happens too quickly, causing flaky tests; using Promise.all ensures you begin waiting before the action triggers, preventing race conditions.

eeeeeeeeeeeeeeeeeeeeeeeeeeeeee Jul 10 at 14:18

Even if the promise resolves too quickly, it will still hold the correct value. You don't need to get to await before it's resolved.

Kimy BF · Accepted Answer · 2023-04-04 19:10:33Z

3

I was looking for the same, this worked for me:

 const response = await page.waitForResponse((response) => response.url().includes("/api/contacts"));
    
     // Assert the response status and body
     const responseBody = await response.json();
     expect(response.status()).toBe(200);

answered Apr 4, 2023 at 19:10

Kimy BF

1,0893 gold badges13 silver badges24 bronze badges

Comments

chamyeongdo · Accepted Answer · 2024-07-25 03:47:14Z

1

How about doing it this way?

import { Page } from "playwright";
import _ from 'lodash';

function expectJsonStructure(json: any, structure: any): boolean {
  return _.every(structure, (value, key) => {
    if (_.isString(value)) {
      return _.has(json, value);
    }

    return expectJsonStructure(json[key], value)
  });
}

async function waitForJsonResponse(page: Page, structure: any) {
  const response = await page.waitForResponse(async (response)=> {
    try {
      const json = await response.json();

      return expectJsonStructure(json, structure);
    } catch (error) {
      return false;
    }
  });

  return await response.json();
}


// Example JSON that matches the expected structure:
const exampleJson = {
  data: {
    foo: {
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" }
      ],
      total: 2
    },
    bar: {
      items: [
        { id: 3, name: "Item 3" },
        { id: 4, name: "Item 4" },
        { id: 5, name: "Item 5" }
      ],
      total: 3
    }
  }
};

// Usage example
async function performActionAndWaitForResponse(page: Page, element: any) {
  const [, json] = await Promise.all([
    element.click(),
    waitForJsonResponse(page, [
      { data: { foo: ['items', 'total'] } },
      { data: { bar: ['items', 'total'] } },
    ])
  ]);
  
  console.log('Received JSON:', json);
  return json;
}

see link https://gist.github.com/chamyeongdo/cd7b7c0717bfb58548faf2f2be331f49

edited Jul 25, 2024 at 3:47

answered Jul 25, 2024 at 3:42

chamyeongdo

212 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Pascalmh · Accepted Answer · 2024-09-06 09:01:11Z

0

The other Responses provide the technical answer - however this tests an implementation detail. When you can try to test what happened to your UI as a result of the response that came back from your API.

In your Example you are adding a new Contact - check that it is visible in the UI now. This way you'd discover a caching issue if there was one e.g. (Endpoint said it added the Contact but the Cache for the Endpoint that Lists the Contacts is not invalidated).

Also your test would still work even when the endpoint was renamed/moved/etc.

answered Sep 6, 2024 at 9:01

Pascalmh

1,9071 gold badge12 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to wait for requests and validate responses using playwright?

5 Answers 5

3 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related