如何将灯塔与testcafe集成在一起? [英] how to integrate lighthouse with testcafe?

问题描述

我需要在调用lighthouse

https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/index.js#L41

async function lighthouse(url, flags = {}, configJSON, connection) {
  // verify the url is valid and that protocol is allowed
  if (url && (!URL.isValid(url) || !URL.isProtocolAllowed(url))) {
    throw new LHError(LHError.errors.INVALID_URL);
  }

  // set logging preferences, assume quiet
  flags.logLevel = flags.logLevel || 'error';
  log.setLevel(flags.logLevel);

  const config = generateConfig(configJSON, flags);

  connection = connection || new ChromeProtocol(flags.port, flags.hostname);

  // kick off a lighthouse run
  return Runner.run(connection, {url, config});
}

在我的testcafe中，我的测试看起来像

And in my testcafe my tests look like

test('Run lighthouse, async t => {
  lighthouse('https://www.youtube.com', {}, {}, ????)
})

我无法获取testcafe打开的chrome实例的connection，而不是生成新的chromeRunner

I am unable to retrieve the connection of the chrome instance that testcafe had opened up, instead of spawning a new chromeRunner

推荐答案

有一个名为 testcafe-lighthouse ，它有助于使用TestCafe审核网页.它还具有生成HTML详细报告的功能.

there is an npm library called testcafe-lighthouse which helps to audit web pages using TestCafe. It also has the capability to produce an HTML detailed report.

通过以下方式安装插件:

Install the plugin by:

$ yarn add -D testcafe-lighthouse
# or 
$ npm install --save-dev testcafe-lighthouse

• 具有默认阈值的审核

import { testcafeLighthouseAudit } from 'testcafe-lighthouse';

fixture(`Audit Test`).page('http://localhost:3000/login');

test('user performs lighthouse audit', async () => {
  const currentURL = await t.eval(() => document.documentURI);
  await testcafeLighthouseAudit({
    url: currentURL,
    cdpPort: 9222,
  });
});

• 使用自定义阈值进行审核:

import { testcafeLighthouseAudit } from 'testcafe-lighthouse';

fixture(`Audit Test`).page('http://localhost:3000/login');

test('user page performance with specific thresholds', async () => {

  const currentURL = await t.eval(() => document.documentURI);

  await testcafeLighthouseAudit({
    url: currentURL,
    thresholds: {
      performance: 50,
      accessibility: 50,
      'best-practices': 50,
      seo: 50,
      pwa: 50,
    },
    cdpPort: 9222,
  });
});

• 您需要像下面这样开始测试:

# headless mode, preferable for CI
npx testcafe chrome:headless:cdpPort=9222 test.js

# non headless mode
npx testcafe chrome:emulation:cdpPort=9222   test.js

我希望它将对您的自动化过程有所帮助.

I hope it will help your automation journey.

这篇关于如何将灯塔与testcafe集成在一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！