如何知道在 puppeteer 中提交的表单是否没有错误答案

【问题标题】：How to know if form is submitted without errors in puppeteer如何知道在 puppeteer 中提交的表单是否没有错误
【发布时间】：2020-04-15 23:34:51
【问题描述】：

我正在尝试提交form，并且我正在测试由于输入无效而无法提交表单的情况。如果我输入的邮政编码有效，那么这行代码将返回null，因为没有错误信息。

await self.page.waitForFunction(
    'document.querySelector("#adr-zip-error")'
  );

但是我必须在此之前硬编码延迟或设置某种超时来捕获此错误消息。我还尝试以相同的方式检查表单本身是否为空，但同样，它仅在我在一段时间后检查时才有效，因为表单提交需要时间。

有没有办法在不使用硬编码延迟的情况下判断表单是否成功提交？

【问题讨论】：

没有一个通用的方法，因为不是每个表单提交都一定会产生导航请求。一个例子是多步骤表格。是针对特定网站的吗？如果是，你能举个例子吗？
该网站是 shipt.com，但您需要登录才能看到上面的编辑地址选项，这是我遇到此问题的地方。此表单不会生成导航请求。如果表单没有导航到其他地方，是否没有其他方法可以检查表单上的响应？

标签： web-scraping puppeteer

【解决方案1】：

这不是通用解决方案，而是针对此问题量身定制的。你可以使用waitForResponse

const response = await page.waitForResponse(response => response.url().startsWith("https://app.shipt.com/api/v1/customer_addresses"));
if (response.ok())
//success

或者，您可以只检查输入的有效性：

const invalid = await page.evaluate(() => document.querySelector('#adr-zip').getAttribute('aria-invalid') === "true");

【讨论】：

第一个效果很好。出于某种原因，无论表单提交是否正确，第二个评估为真。请问您如何获得用于响应的正确网址？您是在开发工具的网络选项卡中找到它吗？
@BillTaha 是的，测试了几次以找出模式

【解决方案2】：

提交后，您可以执行以下操作：

await Promise.race([
  page.waitFor('#adr-zip-error'),
  page.waitForNavigation()
])

然后

let error = await page.$('#adr-zip-error')

如果错误先发生会通知您

【讨论】：