使用Puppeteer捕获HTTP响应的正确方法是什么？

Question

我试图从用户注册中捕获http响应状态。

我的代码看起来像这样：

  it.only('returns a 400 response if email is taken', async () => {
    await page.goto(`${process.env.DOMAIN}/sign-up`)
    await page.waitFor('input[id="Full Name"]')

    await page.type('input[id="Full Name"]', 'Luke Skywalker')
    await page.type('input[id="Email"]', '[email protected]')
    await page.type('input[id="Password"]', 'LukeSkywalker123', {delay: 100})
    await page.click('input[type="submit"]', {delay: 1000})

    const response = await page.on('response', response => response)

    console.log('request status', response.status)
    // expect(response).toEqual(400)
  })

文档提供了拦截请求并使用它执行操作的示例：

await page.setRequestInterception(true);
page.on('request', request => {
  request.respond({
    status: 404,
    contentType: 'text/plain',
    body: 'Not Found!'
  });
});

而且我尝试了类似的模式无济于事，以及许多其他模式。我所做的一切都返回了page，这是一个巨大的物体，没有任何地位，我可以看到。任何帮助深表感谢。

做了什么：

感谢@tomahaug指导我正确的方向。我的第一个问题是放置，需要在发出请求之前设置监听器，我在请求之后就有了它。说得通。我最大的问题是将监听器分配给变量，以便我可以将expect作为我的最后一行。将其分配给变量会导致返回page。我需要做的只是在监听器内运行测试。当我使用done()抛出错误并且错误时，我关闭了我的测试，如下所示，我的代码的工作版本：

it.only('returns a 400 response if email is taken', async () => {
    await page.goto(`${process.env.DOMAIN}/sign-up`)
    await page.waitFor('input[id="Full Name"]')

    await page.type('input[id="Full Name"]', 'Luke Skywalker')
    await page.type('input[id="Email"]', '[email protected]')
    await page.type('input[id="Password"]', 'LukeSkywalker123', {delay: 100})

    await page.on('response', response => {
      if (response.request().method === 'POST' && response.url === `${process.env.USERS_API_DOMAIN}/sessions`) {
        expect(response.status).toEqual(400)
      }
    })

    await page.click('input[type="submit"]', {delay: 1000})
  })

  after(async function () {
    await browser.close()
  })

希望这有助于其他人！

Answer 1

我相信你应该按照这些方针做点什么。请注意回调函数done。

代码的作用是，它附加一个响应的监听器，然后单击提交按钮。收到响应后，它会检查状态代码，断言它，并通过调用done终止测试。

您可能希望有一个if语句，它检查它是您在回调中检查的表单的实际响应，因为响应处理程序可能会为其他并发请求发出事件。

it.only('returns a 400 response if email is taken', () => {
  await page.goto(`${process.env.DOMAIN}/sign-up`)
  await page.waitFor('input[id="Full Name"]')

  await page.type('input[id="Full Name"]', 'Luke Skywalker')
  await page.type('input[id="Email"]', '[email protected]')
  await page.type('input[id="Password"]', 'LukeSkywalker123', {delay: 100})

  await page.on('response', (response) => {
    if (
      response.request().method === 'POST' && 
      response.url === `${process.env.USERS_API_DOMAIN}/sessions`) 
    {
      expect(response.status).toEqual(400)
    }
  })

  await page.click('input[type="submit"]', {delay: 1000})
})

我没有测试过代码，但它应该给你正确的想法。

编辑：调整以反映最终得出的结果。

Answer 2

response.url是一个功能，你必须称之为：

response.url()

response.request().method也一样：

response.request().method()