为什么Puppeteer的简单测试失败了：“等待功能失败：超时超过500毫秒”？

Question

在尝试使用Jest和Puppeteer设置一些简单的端到端测试时，我发现我编写的任何测试都会因超时而无法解决。

这是一个简单的示例测试文件，它与Puppeteer's own example略有不同：

import puppeteer from 'puppeteer';

describe('Load Google Puppeteer Test', () => {
  test('Load Google', async () => {
    const browser = await puppeteer.launch({
      headless: false
    });

    const page = await browser.newPage();
    await page.goto('https://google.co.uk');
    await expect(page).toMatch("I'm Feeling Lucky");
    await browser.close();
  });
});

它产生的反应：

TimeoutError: Text not found "I'm Feeling Lucky"
      waiting for function failed: timeout 500ms exceeded

我已经尝试将自定义超时添加到goto行，test子句等等，都没有效果。关于可能导致这种情况的任何想法？谢谢。

Answer 1

我要说的是，使用toMatch需要显示文本。但是，在您的情况下，您要验证的文本是与按钮关联的文本。

你应该尝试这样的事情：

await expect(page).toMatchElement('input[value="I\'m Feeling Lucky"]');

更新1：

另一种可能性（也就是你自己提出的那种）是验证在页面有机会加载之前超时。根据我的经验，这是在无头模式下执行代码的常见问题。它非常快。有时太快了。在UI中的所有内容都准备就绪之前，可以执行语句。

在这种情况下，最好在代码中添加一些waitForSelector语句，如下所示：

await page.waitForSelector('input[value="I\'m Feeling Lucky"]');

这将确保在继续执行代码中的下一步之前显示所需的选择器。通过这样做，您将使脚本更加健壮，同时保持效率 - 这些等待不会减慢您的代码速度。他们只是暂停，直到puppeteer注册您要与之交互的选择器/验证为显示。大多数时候你甚至都不会注意到暂停，因为它会如此短暂（我说的是毫秒）。

但这将使您的脚本坚如磐石，同时确保在测试执行期间网页因任何原因响应较慢时，事情不会中断。