jest、puppeteer 使用超时

Question

Timeout - Async callback was not invoked within the 5000ms timeout specified

最近在弄UI测试，使用的是jest和puppeteer。主要是测试登录页面。

跟着网上的教程捣鼓了许久，有个错误没搞懂怎么解决。

错误如下：

 Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

      63 | });
      64 |
    > 65 | test('login failure', async () => {
         | ^
      66 |   await page.waitForSelector('#username', {
      67 |         timeout: 5000,
      68 |       });

      at Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:85:20)
      at Object.test (src/tests/login.test.js:65:1)

测试的代码如下：

const puppeteer = require('puppeteer');

let browser;
let page;

beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: false,
    slowMo: 200,
  });
  page = await browser.newPage();
});

afterAll(() => {
  browser.close();
});

test('open page', async () => {
  await page.goto('localhost:8000/web/login');
});

test('login failure', async () => {
  await page.waitForSelector('#username', {
        timeout: 5000,
      });
  await page.type('#username', 'test');
  await page.type('#password', '1111');
  await page.click('#submit');
  await page.waitForSelector('.ant-message-notice',{ timeout: 5000});
});

研究到现在，倒是把协议那个弄好了

协议那方面的错， 我将page.goto('http://localhost:8000/web/login')改成page.goto('localhost:8000/web/login'就Ok了~

超时这个问题却一直没有进展，目前我认为是jest的一次测试默认就是不能超过5s。因为我现在将步骤简化了，把验证登录时将输入的用户名和密码变得简单，从而将测试缩在5s之内。

 PASS  src/tests/login.test.js (9.914s)
  √ open page (2080ms)
  √ login failure (4981ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        10.871s
Ran all test suites.

所以，有没有人了解这方面QAQ，难道是修改jest的配置吗？还是需要怎么解决，jest的配置也不知道在哪里解决OTZ

Answer 1

超时问题解决~ 看了这段话，我就豁然开朗了~
4 个主要的生命周期函数：

afterAll(fn, timeout): 当前文件中的所有测试执行完成后执行 fn, 如果 fn 是 promise，jest 会等待 timeout 毫秒，默认 5000
afterEach(fn, timeout): 每个 test 执行完后执行 fn，timeout 含义同上
beforeAll(fn, timeout): 同 afterAll，不同之处在于在所有测试开始前执行
beforeEach(fn, timeout): 同 afterEach，不同之处在于在每个测试开始前执行

因此我就在想，是不是 每次test后面也是可以设置timeout呢

然后就pass了~

Answer 2

首先要把timeout的概念区分下。
jest这类测试框架的timeout是指每个case之间的超时时间 （比如before操作过程则timeout）
puppeteer 这类at框架的timeout是指，select某个dom节点时候的超时时间 （比如找一个button找不到则timeout）
另外at里还有个概念你估计已经混淆了，就是wait time，指让页面等待一会儿不做任何操作，你可以把它想象成sleep，puppeteer里应该有类似sleep的api供你调用，puppeteer的每个api可能也有timeout的参数供你单独设置，puppeteer 我不熟你自己查查文档，至少selenium里是有这个功能的