Merge pull request #24519 from storybookjs/norbert/improve-bench-script

Build: Fix bench script
storybookjs · Oct 20, 2023 · c906a1a · c906a1a
2 parents 07715ee + 66ede2f
commit c906a1a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/scripts/bench/browse.ts b/scripts/bench/browse.ts
@@ -1,5 +1,5 @@
 import { chromium } from 'playwright';
-import { now } from './utils';
+import { now, getPreviewPage } from './utils';
 
 interface Result {
   managerHeaderVisible?: number;
@@ -44,7 +44,7 @@ async function benchAutodocs(url: string) {
 
   const tasks = [
     async () => {
-      const previewPage = await page.frame({ url: /iframe.html/ }).page();
+      const previewPage = await getPreviewPage(page);
       await previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
@@ -71,7 +71,7 @@ async function benchMDX(url: string) {
 
   const tasks = [
     async () => {
-      const previewPage = await page.frame({ url: /iframe.html/ }).page();
+      const previewPage = await getPreviewPage(page);
       await previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
@@ -89,15 +89,15 @@ async function benchMDX(url: string) {
 
 async function benchStory(url: string) {
   const result: Result = {};
-  const browser = await chromium.launch(/* { headless: false } */);
+  // change this to true, to see the browser in action
+  const browser = await chromium.launch({ headless: true });
   await browser.newContext();
   const page = await browser.newPage();
 
   const start = now();
   await page.goto(`${url}?path=/story/example-button--primary`);
 
   const tasks = [
-    //
     async () => {
       await page.waitForSelector('.sidebar-header', { state: 'attached' });
       result.managerHeaderVisible = now() - start;
@@ -107,7 +107,7 @@ async function benchStory(url: string) {
       result.managerIndexVisible = now() - start;
     },
     async () => {
-      const previewPage = await page.frame({ url: /iframe.html/ }).page();
+      const previewPage = await getPreviewPage(page);
       await previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');

diff --git a/scripts/bench/utils.ts b/scripts/bench/utils.ts
@@ -1,5 +1,6 @@
 import { join } from 'path';
 import { ensureDir, writeJSON, readJSON, readdir } from 'fs-extra';
+import type { Page } from 'playwright-core';
 import type { BenchResults } from './types';
 
 export const now = () => new Date().getTime();
@@ -30,3 +31,11 @@ export const loadBench = async (options: SaveBenchOptions): Promise<Partial<Benc
   }, Promise.resolve({}));
   // return readJSON(join(dirname, `bench.json`));
 };
+
+export async function getPreviewPage(page: Page) {
+  await page.waitForFunction(() => {
+    return document.querySelector('iframe')?.contentDocument.readyState === 'complete';
+  });
+  const previewPage = await page.frame({ url: /iframe.html/ }).page();
+  return previewPage;
+}