puppeteer 与测试相结合的问题答案

【问题标题】：Problem with puppeteer in combination with testingpuppeteer 与测试相结合的问题
【发布时间】：2020-10-20 22:09:35
【问题描述】：

我遇到了问题。我是 JavaScript 新手，我无法真正解决这个错误。

我通过 puppeteer 从网站获取数据，然后我想测试它是否正确：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://6mr2n.csb.app/#');

    header = await page.evaluate(() => {
        header = document.querySelector('header[class="header"]').innerText;
        return header;
    });

    console.info(`The header is: ${header}`);
    await browser.close
    module.exports = header;
})();

我的测试文件（开玩笑）是：

const index = require('./index');

test('Hallo', () => {
    expect(index.header).toEqual('todos');
  });

可能我只是愚蠢，但我确实尝试了很多来解决这个问题。运行主文件有效，但运行测试（npm run test）给出以下结果：

expect(received).toEqual(expected) // deep equality

Expected: "todos"
Received: undefined

  4 | 
  5 | test('Hallo', () => {
> 6 |     expect(index.header).toEqual('todos');
    |                          ^
  7 |   });

  at Object.<anonymous> (index.test.js:6:26)

还有：

Cannot log after tests are done. Did you forget to wait for something async in your test?
Attempted to log "The header is: todos".

【问题讨论】：

标签： javascript node.js npm puppeteer

【解决方案1】：

您可以在 puppeteer 脚本中使用命名的异步函数（例如：header()），它返回您需要的标头值，最后将其导出为主函数之外的 module.exports.header = header。

const puppeteer = require('puppeteer')

const header = async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://6mr2n.csb.app/#')

  const headerVal = await page.evaluate(() => {
    headerVal = document.querySelector('header[class="header"]').innerText
    return headerVal
  })

  await browser.close()
  console.info(`The header is: ${headerVal}`)
  return headerVal
}

module.exports.header = header

你的测试也需要一个异步函数，所以你可以等待它，例如：

const index = require('./index')

test('Hallo', async () => {
  const headerVal = await index.header()
  expect(headerVal).toEqual('todos')
})

注意：你需要browser.close()来关闭浏览器实例。

注意 2： 您也可以像这样检索 innerText：

const headerVal = await page.evaluate(el => el.innerText, await page.$('.header'))

【讨论】：

【解决方案2】：

您在async 函数中设置了module.exports，但require('./index') 不等待此设置并返回空对象。（顺便说一句，你需要module.exports.header = header 才能使用index.header）。

要解决这个问题，您可以尝试返回一个 Promise 并等待它：

const puppeteer = require('puppeteer');

module.exports = (async () => { /* ... */ return header; })();

const headerPromise = require('./index');

(async function main() {
  const header = await headerPromise;
  test('Hallo', () => {
    expect(header).toEqual('todos');
  });
})();

【讨论】：