Implement alternative for user-agent check for determining valid browser

[noahmcgill]

Context

Hi there. Due to company technical requirements, my team sets a static user agent in our test suite's Playwright config file that is browser-agnostic. We currently don't have the option to use each browser instance's default user agent. This package is just what we need except for one issue.

Problem

Because of this, the following snippet from audit.js is preventing us from using this package:

  const uaParser = require('ua-parser-js');

  // eslint-disable-next-line no-undef
  const ua = await auditConfig.page.evaluate(() => navigator.userAgent);
  const currentBrowserName = uaParser(ua).browser.name;

  if (!checkBrowserIsValid(currentBrowserName)) {
    throw new Error(`${currentBrowserName} is not supported. Skipping...`);
  }

Since our tests run with a user agent that does not contain the browser, currentBrowserName parses as undefined and the Error message always throws, even when the test is running in chromium.

Possible Solution

We introduce a new optional property in the playwrightLighthouseConfig interface, for example browserOverride of type string, that allows the playAudit function to bypass the use of the user agent for determining the browser and instead rely on the browserName from Playwright's base fixture or a manual defining of the browser name. Here's how it might work:

testFile.js

 test.describe('lighthouse tests', () => {
   test('test accessibility', async ({ page, browserName }) => {
     await page.goto('https://github.com');

     await playAudit({
       page: page,
       port: 9443,
       browserOverride: browserName, // defaults to chromium, but can be set in the Playwright config file
       thresholds: {
         accessibility: 98
       }
     )};
   }
 }

audit.js

  if (auditConfig.page) {
    let currentBrowserName = auditConfig.browserOverride;

    if(!browserOverride) {
      const uaParser = require('ua-parser-js');

      // eslint-disable-next-line no-undef
      const ua = await auditConfig.page.evaluate(() => navigator.userAgent);
      const currentBrowserName = uaParser(ua).browser.name;
    }

    if (!checkBrowserIsValid(currentBrowserName)) {
      throw new Error(`${currentBrowserName} is not supported. Skipping...`);
    }
  }

This would be a non-breaking solution for consumers updating their package version.

Please let me know your thoughts on this solution or if you think there is a better one/another workaround! I'd be happy to put up a PR for this. Thanks.

[qxdmmc]

I have the same problem. Is there a solution?

[abhinaba-ghosh]

@noahmcgill nice one! Would you mind raising a PR, will review.

[luisromanbcn]

I have the same issue and I downloaded the code to implement, doing a few changes, and checked that everything works with the solution. @abhinaba-ghosh looks the @noahmcgill message is from 1 year ago so do you mind if I create the PR for this one? I don't have permission so I cannot create it right now.

[abhinaba-ghosh]

Kindly create a PR 🙌

[abhinaba-ghosh]

Kindly fork the repo, make changes and raise a PR against the master branch here

[luisromanbcn]

Sure! Doing it right now

[luisromanbcn]

@abhinaba-ghosh here you have it https://github.com/abhinaba-ghosh/playwright-lighthouse/pull/48