如何使用剧作家等待请求并验证响应？

Question

这是我第一次使用 playwright，我不知道如何等待请求并验证响应。我已经使用 cypress 很长时间了，管理网络请求非常容易。例如，我需要在单击按钮后验证响应，这就是我使用 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')
        })

这就是我尝试对剧作家做同样的事情的方式，但它会验证GET在单击“保存”按钮之前很久就发送的请求。我不知道如何正确管理这个请求，这对我的测试套件来说是一个阻碍：

        await contacts.clickSaveBtn()

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

任何帮助或建议将非常感激

Answer 1

您需要做的是首先开始等待响应，然后单击，这样就waitForResponse()可以捕获由于单击而产生的实际响应。

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

这应该可以处理可能的竞争条件。

Answer 2

或者，您可以分配一个承诺，然后等待它：

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

它更具可读性，并且您可以获得响应值。