core(test): add generatable iframe trace

core/test/computed/page-dependency-graph-test.js

@@ -10,24 +10,22 @@ import {PageDependencyGraph} from '../../computed/page-dependency-graph.js';
 import {BaseNode} from '../../lib/lantern/base-node.js';
 import {getURLArtifactFromDevtoolsLog, readJson} from '../test-utils.js';
 
-const sampleTrace = readJson('../fixtures/traces/iframe-m79.trace.json', import.meta);
-const sampleDevtoolsLog = readJson('../fixtures/traces/iframe-m79.devtoolslog.json', import.meta);
+const sampleTrace = readJson('../fixtures/artifacts/iframe/trace.json', import.meta);
+const sampleDevtoolsLog = readJson('../fixtures/artifacts/iframe/devtoolslog.json', import.meta);
 
 describe('PageDependencyGraph computed artifact', () => {
   describe('#compute_', () => {
-    it('should compute the dependency graph', () => {
+    it('should compute the dependency graph', async () => {
       const context = {computedCache: new Map()};
-      return PageDependencyGraph.request({
+      const output = await PageDependencyGraph.request({
         trace: sampleTrace,
         devtoolsLog: sampleDevtoolsLog,
         URL: getURLArtifactFromDevtoolsLog(sampleDevtoolsLog),
-      }, context).then(output => {
-        assert.ok(output instanceof BaseNode, 'did not return a graph');
-
-        const dependents = output.getDependents();
-        const nodeWithNestedDependents = dependents.find(node => node.getDependents().length);
-        assert.ok(nodeWithNestedDependents, 'did not link initiators');
-      });
+      }, context);
+      assert.ok(output instanceof BaseNode, 'did not return a graph');
+      const dependents = output.getDependents();
+      const nodeWithNestedDependents = dependents.find(node => node.getDependents().length);
+      assert.ok(nodeWithNestedDependents, 'did not link initiators');
     });
   });
 });

core/test/fixtures/artifacts/iframe/regenerate.js

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {startFlow} from '../../../../index.js';
+import {updateTestFixture} from '../update-test-fixture.js';
+
+/**
+ * @param {import('puppeteer').Page} page
+ * @param {number} port
+ */
+async function runUserFlow(page, port) {
+  const flow = await startFlow(page, {
+    flags: {
+      throttlingMethod: 'provided',
+    },
+  });
+
+  await flow.navigate(`http://localhost:${port}/perf/frame-metrics.html`);
+
+  return flow;
+}
+
+/**
+ * @param {LH.Artifacts} artifacts
+ */
+function verify(artifacts) {
+  const {traceEvents} = artifacts.Trace;
+
+  if (!traceEvents.find(e =>
+    e.name === 'LayoutInvalidationTracking' && e.args.data.nodeName.startsWith('IFRAME '))) {
+    throw new Error('no layout invalidation found inside iframe');
+  }
+}
+
+await updateTestFixture({
+  name: 'iframe',
+  about: 'Page with an iframe performing a lot of layout',
+  saveTrace: true,
+  saveDevtoolsLog: true,
+  runUserFlow,
+  verify,
+});

core/test/fixtures/artifacts/update-test-fixture.js

@@ -6,6 +6,8 @@
 
 // https://docs.google.com/spreadsheets/d/1AaYzpzWnpXQ4JB5IZzOkTO9Zf5Sm0I8dsp7MhBgthMg/edit?usp=sharing
 
+import fs from 'fs';
+
 import * as puppeteer from 'puppeteer';
 import {getChromePath} from 'chrome-launcher';
 
@@ -34,7 +36,9 @@ export async function updateTestFixture(collectMeta) {
   });
   const server = new Server(0);
   const dir = `${LH_ROOT}/core/test/fixtures/artifacts/${collectMeta.name}`;
-  server.baseDir = `${dir}/page`;
+  if (fs.existsSync(`${dir}/page`)) {
+    server.baseDir = `${dir}/page`;
+  }
   await server.listen(0, 'localhost');
   const port = server.getPort();
 

core/test/lib/lantern/metrics/__snapshots__/interactive-test.js.snap

@@ -10,8 +10,8 @@ Object {
 
 exports[`Metrics: Lantern TTI should compute predicted value on iframes with substantial layout 1`] = `
 Object {
-  "optimistic": 6207,
-  "pessimistic": 6242,
-  "timing": 6226,
+  "optimistic": 2372,
+  "pessimistic": 2386,
+  "timing": 2379,
 }
 `;

core/test/lib/lantern/metrics/interactive-test.js

@@ -13,8 +13,8 @@ import {readJson} from '../../../test-utils.js';
 
 const trace = readJson('../../../fixtures/traces/progressive-app-m60.json', import.meta);
 const devtoolsLog = readJson('../../../fixtures/traces/progressive-app-m60.devtools.log.json', import.meta);
-const iframeTrace = readJson('../../../fixtures/traces/iframe-m79.trace.json', import.meta);
-const iframeDevtoolsLog = readJson('../../../fixtures/traces/iframe-m79.devtoolslog.json', import.meta);
+const iframeTrace = readJson('../../../fixtures/artifacts/iframe/trace.json', import.meta);
+const iframeDevtoolsLog = readJson('../../../fixtures/artifacts/iframe/devtoolslog.json', import.meta);
 
 describe('Metrics: Lantern TTI', () => {
   it('should compute predicted value', async () => {