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

score 29 · Accepted Answer · answered Mar 25 '21 at 09:27

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.

score 8 · Answer 2 · answered Dec 26 '22 at 18:53

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.

score 1 · Answer 3 · answered Apr 04 '23 at 19:10

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);

How to wait for requests and validate responses using playwright?

3 Answers3