tests(smoke): test fr navigations in devtools

lighthouse-cli/test/smokehouse/lighthouse-runners/devtools.js

@@ -42,14 +42,18 @@ async function setup() {
  * CHROME_PATH determines which Chrome is used–otherwise the default is puppeteer's chrome binary.
  * @param {string} url
  * @param {LH.Config.Json=} configJson
- * @param {{isDebug?: boolean}=} testRunnerOptions
+ * @param {{isDebug?: boolean, useLegacyNavigation?: boolean}=} testRunnerOptions
  * @return {Promise<{lhr: LH.Result, artifacts: LH.Artifacts, log: string}>}
  */
 async function runLighthouse(url, configJson, testRunnerOptions = {}) {
   const chromeFlags = [
     `--custom-devtools-frontend=file://${devtoolsDir}/out/Default/gen/front_end`,
   ];
-  const {lhr, artifacts, logs} = await testUrlFromDevtools(url, configJson, chromeFlags);
+  const {lhr, artifacts, logs} = await testUrlFromDevtools(url, {
+    config: configJson,
+    chromeFlags,
+    useLegacyNavigation: testRunnerOptions.useLegacyNavigation,
+  });
 
   if (testRunnerOptions.isDebug) {
     const outputDir = fs.mkdtempSync(os.tmpdir() + '/lh-smoke-cdt-runner-');

lighthouse-cli/test/smokehouse/test-definitions/oopif-scripts.js

@@ -66,13 +66,15 @@ const expectations = {
               {url: 'http://localhost:10503/simple-script.js', resourceType: 'Fetch'},
               {url: 'http://localhost:10200/simple-worker.js'},
               {url: 'http://localhost:10503/simple-worker.js'},
-              // For some reason, we only see these when running in DevTools!
-              {_runner: 'devtools', url: 'http://localhost:10200/simple-worker.mjs'},
-              {_runner: 'devtools', url: 'http://localhost:10503/simple-worker.mjs'},
-              {_runner: 'devtools', url: 'http://localhost:10200/simple-script.js?esm', resourceType: 'Script'},
-              {_runner: 'devtools', url: 'http://localhost:10503/simple-script.js?esm', resourceType: 'Script'},
-              {_runner: 'devtools', url: 'http://localhost:10200/simple-script.js?importScripts', resourceType: 'Other'},
-              {_runner: 'devtools', url: 'http://localhost:10503/simple-script.js?importScripts', resourceType: 'Other'},
+              // These requests are emitted in workers so Lighthouse doesn't capture them.
+              // For some reason, legacy navigations in DevTools still pick them up.
+              // https://github.com/GoogleChrome/lighthouse/issues/14211
+              {_legacyOnly: true, _runner: 'devtools', url: 'http://localhost:10200/simple-worker.mjs'},
+              {_legacyOnly: true, _runner: 'devtools', url: 'http://localhost:10503/simple-worker.mjs'},
+              {_legacyOnly: true, _runner: 'devtools', url: 'http://localhost:10200/simple-script.js?esm', resourceType: 'Script'},
+              {_legacyOnly: true, _runner: 'devtools', url: 'http://localhost:10503/simple-script.js?esm', resourceType: 'Script'},
+              {_legacyOnly: true, _runner: 'devtools', url: 'http://localhost:10200/simple-script.js?importScripts', resourceType: 'Other'},
+              {_legacyOnly: true, _runner: 'devtools', url: 'http://localhost:10503/simple-script.js?importScripts', resourceType: 'Other'},
             ],
             // Ensure the above is exhaustive (except for favicon, which won't be fetched in devtools/LR).
             _excludes: [

lighthouse-core/scripts/pptr-run-devtools.js

@@ -54,8 +54,6 @@ const argv_ = y
   .argv;
 
 const argv = /** @type {Awaited<typeof argv_>} */ (argv_);
-/** @type {LH.Config.Json=} */
-const config = argv.config ? JSON.parse(argv.config) : undefined;
 
 /**
  * Ideally we would use `page.evaluate` instead of this,
@@ -214,6 +212,16 @@ async function runLighthouse() {
 
   return resultPromise;
 }
+
+function disableLegacyNavigation() {
+  // @ts-expect-error global
+  const panel = UI.panels.lighthouse || UI.panels.audits;
+  const toolbarRoot = panel.contentElement.querySelector('.lighthouse-settings-pane .toolbar').shadowRoot;
+  const checkboxRoot = toolbarRoot.querySelector('span[is="dt-checkbox"]').shadowRoot;
+  const checkboxEl = checkboxRoot.querySelector('input');
+  checkboxEl.checked = false;
+  checkboxEl.dispatchEvent(new Event('change'));
+}
 /* eslint-enable */
 
 /**
@@ -278,11 +286,12 @@ async function installConsoleListener(inspectorSession, logs) {
 
 /**
  * @param {string} url
- * @param {LH.Config.Json=} config
- * @param {string[]=} chromeFlags
+ * @param {{config?: LH.Config.Json, chromeFlags?: string[], useLegacyNavigation?: boolean}} [options]
  * @return {Promise<{lhr: LH.Result, artifacts: LH.Artifacts, logs: string[]}>}
  */
-async function testUrlFromDevtools(url, config, chromeFlags) {
+async function testUrlFromDevtools(url, options = {}) {
+  const {config, chromeFlags, useLegacyNavigation} = options;
+
   const browser = await puppeteer.launch({
     executablePath: getChromePath(),
     args: chromeFlags,
@@ -307,6 +316,10 @@ async function testUrlFromDevtools(url, config, chromeFlags) {
 
     await waitForFunction(inspectorSession, waitForLighthouseReady);
 
+    if (!useLegacyNavigation) {
+      await evaluateInSession(inspectorSession, disableLegacyNavigation);
+    }
+
     let configPromise = Promise.resolve();
     if (config) {
       // Must attach to the Lighthouse worker target and override the `self.createConfig`
@@ -353,6 +366,8 @@ async function readUrlList() {
 async function main() {
   const chromeFlags = parseChromeFlags(argv['chromeFlags']);
   const outputDir = argv['output-dir'];
+  /** @type {LH.Config.Json=} */
+  const config = argv.config ? JSON.parse(argv.config) : undefined;
 
   // Create output directory.
   if (fs.existsSync(outputDir)) {
@@ -388,7 +403,7 @@ async function main() {
         timeout = setTimeout(reject, 100_000, new Error('Timed out waiting for Lighthouse to run'));
       });
       const {lhr, artifacts} = await Promise.race([
-        testUrlFromDevtools(urlList[i], config, chromeFlags),
+        testUrlFromDevtools(urlList[i], {config, chromeFlags}),
         timeoutPromise,
       ]).finally(() => {
         clearTimeout(timeout);