tests: add more cases for oopif smoke test (#13705)

GoogleChrome · Mar 1, 2022 · ceb03cb · ceb03cb
1 parent a1de8e9
commit ceb03cb
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 19 deletions.
diff --git a/lighthouse-cli/test/fixtures/oopif-requests.html b/lighthouse-cli/test/fixtures/oopif-requests.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>Hello frames</h1>
+    <iframe id="oopif" src="https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" style="width: 100vw; height: 110vh;"></iframe>
+  </body>
+</html>
diff --git a/lighthouse-cli/test/fixtures/oopif-scripts.html b/lighthouse-cli/test/fixtures/oopif-scripts.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>Hello frames</h1>
+    <iframe id="iframe-1" src="http://localhost:10200/oopif-simple-page.html" style="position: fixed"></iframe>
+    <iframe id="iframe-2" src="http://localhost:10503/oopif-simple-page.html" style="position: fixed"></iframe>
+  </body>
+</html>
diff --git a/lighthouse-cli/test/fixtures/oopif-simple-page.html b/lighthouse-cli/test/fixtures/oopif-simple-page.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="simple-script.js"></script>
+  <script>
+    new Worker('simple-worker.mjs', { type: 'module' });
+    new Worker('simple-worker.js');
+
+    window.addEventListener('load', () => {
+      fetch('simple-script.js').then(r => r.text()).then(eval);
+    });
+  </script>
+</head>
+<body>
+  <h1>Just a simple page</h1>
+</body>
+</html>
diff --git a/lighthouse-cli/test/fixtures/oopif.html b/lighthouse-cli/test/fixtures/oopif.html
diff --git a/lighthouse-cli/test/fixtures/simple-script.js b/lighthouse-cli/test/fixtures/simple-script.js
@@ -0,0 +1,3 @@
+'use strict';
+
+console.log('🪁');
diff --git a/lighthouse-cli/test/fixtures/simple-worker.js b/lighthouse-cli/test/fixtures/simple-worker.js
@@ -0,0 +1,5 @@
+'use strict';
+
+self.importScripts('./simple-script.js?importScripts');
+
+console.log('hello from worker!');
diff --git a/lighthouse-cli/test/fixtures/simple-worker.mjs b/lighthouse-cli/test/fixtures/simple-worker.mjs
@@ -0,0 +1,5 @@
+'use strict';
+
+import './simple-script.js?esm';
+
+console.log('hello from worker!');
diff --git a/lighthouse-cli/test/smokehouse/core-tests.js b/lighthouse-cli/test/smokehouse/core-tests.js
@@ -33,6 +33,7 @@ import offlineReady from './test-definitions/offline-ready.js';
 import offlineSwBroken from './test-definitions/offline-sw-broken.js';
 import offlineSwSlow from './test-definitions/offline-sw-slow.js';
 import oopifRequests from './test-definitions/oopif-requests.js';
+import oopifScripts from './test-definitions/oopif-scripts.js';
 import perfBudgets from './test-definitions/perf-budgets.js';
 import perfDebug from './test-definitions/perf-debug.js';
 import perfDiagnosticsAnimations from './test-definitions/perf-diagnostics-animations.js';
@@ -92,6 +93,7 @@ const smokeTests = [
   offlineSwBroken,
   offlineSwSlow,
   oopifRequests,
+  oopifScripts,
   perfBudgets,
   perfDebug,
   perfDiagnosticsAnimations,

diff --git a/lighthouse-cli/test/smokehouse/test-definitions/oopif-requests.js b/lighthouse-cli/test/smokehouse/test-definitions/oopif-requests.js
@@ -40,8 +40,8 @@ const config = {
  */
 const expectations = {
   lhr: {
-    requestedUrl: 'http://localhost:10200/oopif.html',
-    finalUrl: 'http://localhost:10200/oopif.html',
+    requestedUrl: 'http://localhost:10200/oopif-requests.html',
+    finalUrl: 'http://localhost:10200/oopif-requests.html',
     audits: {
       'network-requests': {
         details: {
@@ -67,16 +67,8 @@ const expectations = {
         },
         isPositionFixed: false,
       },
-      {
-        id: 'outer-iframe',
-        src: 'http://localhost:10200/online-only.html',
-        clientRect: {
-          width: '>0',
-          height: '>0',
-        },
-        isPositionFixed: true,
-      },
     ],
+    ScriptElements: [],
   },
 };
 

diff --git a/lighthouse-cli/test/smokehouse/test-definitions/oopif-scripts.js b/lighthouse-cli/test/smokehouse/test-definitions/oopif-scripts.js
@@ -0,0 +1,123 @@
+/**
+ * @license Copyright 2022 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+/** @type {LH.Config.Json} */
+const config = {
+  extends: 'lighthouse:default',
+  categories: {
+    performance: {
+      title: 'Performance',
+      auditRefs: [{id: 'oopif-iframe-test-audit', weight: 0}],
+    },
+  },
+  audits: [
+    // Include an audit that *forces* the IFrameElements artifact to be used for our test.
+    {path: 'oopif-iframe-test-audit'},
+  ],
+  settings: {
+    // This test runs in CI and hits the outside network of a live site.
+    // Be a little more forgiving on how long it takes all network requests of several nested iframes
+    // to complete.
+    maxWaitForLoad: 180000,
+  },
+  passes: [
+    // CI machines are pretty weak which lead to many more long tasks than normal.
+    // Reduce our requirement for CPU quiet.
+    {
+      passName: 'defaultPass',
+      cpuQuietThresholdMs: 500,
+    },
+  ],
+};
+
+/**
+ * @type {Smokehouse.ExpectedRunnerResult}
+ * Expected Lighthouse audit values for sites with OOPIFS.
+ */
+const expectations = {
+  lhr: {
+    requestedUrl: 'http://localhost:10200/oopif-scripts.html',
+    finalUrl: 'http://localhost:10200/oopif-scripts.html',
+    audits: {
+      'network-requests': {
+        details: {
+          items: {
+            _includes: [
+              {url: 'http://localhost:10200/oopif-scripts.html'},
+              {url: 'http://localhost:10200/oopif-simple-page.html'},
+              {url: 'http://localhost:10503/oopif-simple-page.html'},
+              // simple-script.js is included many times
+              // 2 * (1 from <script>, 1 from fetch) = 4
+              // Note, the network records from the workers are _not_ captured! If they
+              // were, then we would see 8 simple-script.js
+              {url: 'http://localhost:10200/simple-script.js', resourceType: 'Script'},
+              {url: 'http://localhost:10503/simple-script.js', resourceType: 'Script'},
+              {url: 'http://localhost:10200/simple-script.js', resourceType: 'Fetch'},
+              {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'},
+            ],
+            // Ensure the above is exhaustive (except for favicon, which won't be fetched in devtools/LR).
+            _excludes: [
+              {url: /^((?!favicon).)*$/s},
+            ],
+          },
+        },
+      },
+    },
+  },
+  artifacts: {
+    IFrameElements: [
+      {
+        id: 'iframe-1',
+        src: 'http://localhost:10200/oopif-simple-page.html',
+        clientRect: {
+          width: '>0',
+          height: '>0',
+        },
+        isPositionFixed: true,
+      },
+      {
+        id: 'iframe-2',
+        src: 'http://localhost:10503/oopif-simple-page.html',
+        clientRect: {
+          width: '>0',
+          height: '>0',
+        },
+        isPositionFixed: true,
+      },
+    ],
+    // Only `oopif-simple-page.html`'s inclusion of `simple-script.js` should show up here.
+    // All other scripts are filtered out because of our "OOPIF" filter (including anything
+    // that is just in another process, like a worker).
+    ScriptElements: [
+      {
+        src: 'http://localhost:10200/simple-script.js',
+        source: 'network',
+        content: /🪁/,
+      },
+      {
+        src: 'http://localhost:10503/simple-script.js',
+        source: 'network',
+        content: /🪁/,
+      },
+    ],
+  },
+};
+
+export default {
+  id: 'oopif-scripts',
+  expectations,
+  config,
+};