javascript - 使用 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"]', 'LukeSkywalker@voyage.com')
    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 引导我走向正确的方向。我的第一个问题是放置，监听器需要在发出请求之前设置，我是在请求之后设置的。说得通。我最大的问题是将监听器分配给一个变量，以便我可以将期望称为最后一行。将其分配给变量会导致返回页面。我需要做的只是在监听器内运行测试。在使用 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"]', 'LukeSkywalker@voyage1.com')
    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"]', 'LukeSkywalker@voyage.com')
  await page.type('input[id="Password"]', 'LukeSkywalker123', {delay: 100})

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

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

编辑:进行调整以反射(reflect)最终的结果。