Testcafe: Integrate TestCafe with Google Chrome lighthouse

[miherlosev]

https://github.com/GoogleChrome/lighthouse
https://stackoverflow.com/questions/54863796/how-to-integrate-lighthouse-with-testcafe

[tsvetann]

Any chance for an update here? Thx

[arubtsov]

Hello @tsvetann,
 
Thank you for your interest in our tool. At present, Lighthouse integration won't be very useful because the underlying testcafe proxy will negatively affect Lighthouse metrics. To implement this feature, we need to support native browser protocols first: https://github.com/DevExpress/testcafe/issues/2623 and https://github.com/DevExpress/testcafe/issues/2624. Feel free to vote for them.

[Tall-KU-RideOn]

+100 - I would love to use TestCafe to integrate LightHouse into our testing! Their suggestion of puppeteer introduces a completely different language into my Automation that I do not want. This would be 100% beneficial! Please implement. :)

[AlexSkorkin]

Thank you for your input.

[vvedachalam]

Same here. I would love Lighthouse to get integrated with TestCafe so that I no need to rely on other frameworks to Audit our App.

[abhinaba-ghosh]

Hi there,
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.

• Audit with default threshold

import { testcafeAudit } from 'testcafe-lighthouse';

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

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

• Audit with custom Thresold:

import { testcafeAudit } from 'testcafe-lighthouse';

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

test('user page performance with specific thresholds', async (t) => {
const currentURL = await t.eval(() => document.documentURI);
  await testcafeAudit({
    url: currentURL,
    thresholds: {
      performance: 50,
      accessibility: 50,
      'best-practices': 50,
      seo: 50,
      pwa: 50,
    },
    cdpPort: 9222,
  });
});

• you need to kick start the test like below:

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

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

[miherlosev]

Hi @abhinaba-ghosh

Thank you for your efforts. Before we close this enhancement, we need to perform a small test your library.

[abhinaba-ghosh]

Hi @miherlosev That would be great. Feel free to raise PR and suggest enhancements. One probable enhancement is to fetch the cdpPort runtime, rather than depend on the user to provide it in the test script. I have tried to collect the information, but it seems not possible from userAgent.

[miherlosev]

I've created an issue to extend the t.browserInfo information with cdpPort value. Track it to be notified about our progress.

[abhinaba-ghosh]

@miherlosev Can you check the latest version 1.0.2 (testcafe-lighthouse)

Your changes are there.

[miherlosev]

The module checking is blocked by this issue: https://github.com/DevExpress/testcafe/issues/5190. We will research the cause of the issue and check for a suitable solution. We will update this thread once we have any news.

[abhinaba-ghosh]

The exports issue related to testcafe-lighthouse is solved in version 1.2.0
Reference: https://github.com/abhinaba-ghosh/testcafe-lighthouse/issues/4

[AlexSkorkin]

Thank you for the update. We will take it into account.

[abhinaba-ghosh]

@miherlosev Is it good to close now?

[miherlosev]

Yes, we can close this issue.