From ead37ab33f69708386d0c6d02e1a47b4c2ffeef5 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 19 Oct 2023 18:19:26 +0200
Subject: [PATCH 1/2] fix bench script

---
 scripts/bench/browse.ts | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/scripts/bench/browse.ts b/scripts/bench/browse.ts
index c063fed1ff8d..cb1670ea08ca 100644
--- a/scripts/bench/browse.ts
+++ b/scripts/bench/browse.ts
@@ -44,6 +44,13 @@ async function benchAutodocs(url: string) {
 
   const tasks = [
     async () => {
+      await page.waitForFunction(() => {
+        const iframe = document.querySelector('iframe');
+        if (!iframe) {
+          return false;
+        }
+        return iframe.contentDocument.readyState === 'complete';
+      });
       const previewPage = await page.frame({ url: /iframe.html/ }).page();
       await previewPage.setDefaultTimeout(40000);
 
@@ -71,6 +78,13 @@ async function benchMDX(url: string) {
 
   const tasks = [
     async () => {
+      await page.waitForFunction(() => {
+        const iframe = document.querySelector('iframe');
+        if (!iframe) {
+          return false;
+        }
+        return iframe.contentDocument.readyState === 'complete';
+      });
       const previewPage = await page.frame({ url: /iframe.html/ }).page();
       await previewPage.setDefaultTimeout(40000);
 
@@ -89,7 +103,8 @@ 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();
 
@@ -97,7 +112,6 @@ async function benchStory(url: string) {
   await page.goto(`${url}?path=/story/example-button--primary`);
 
   const tasks = [
-    //
     async () => {
       await page.waitForSelector('.sidebar-header', { state: 'attached' });
       result.managerHeaderVisible = now() - start;
@@ -107,6 +121,13 @@ async function benchStory(url: string) {
       result.managerIndexVisible = now() - start;
     },
     async () => {
+      await page.waitForFunction(() => {
+        const iframe = document.querySelector('iframe');
+        if (!iframe) {
+          return false;
+        }
+        return iframe.contentDocument.readyState === 'complete';
+      });
       const previewPage = await page.frame({ url: /iframe.html/ }).page();
       await previewPage.setDefaultTimeout(40000);
 

From 66ede2f9fe80a449b4711df752065b89401ae2ac Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 20 Oct 2023 09:23:04 +0200
Subject: [PATCH 2/2] refactor for less duplicated code

---
 scripts/bench/browse.ts | 29 ++++-------------------------
 scripts/bench/utils.ts  |  9 +++++++++
 2 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/scripts/bench/browse.ts b/scripts/bench/browse.ts
index cb1670ea08ca..43d03756411b 100644
--- 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,14 +44,7 @@ async function benchAutodocs(url: string) {
 
   const tasks = [
     async () => {
-      await page.waitForFunction(() => {
-        const iframe = document.querySelector('iframe');
-        if (!iframe) {
-          return false;
-        }
-        return iframe.contentDocument.readyState === 'complete';
-      });
-      const previewPage = await page.frame({ url: /iframe.html/ }).page();
+      const previewPage = await getPreviewPage(page);
       await previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
@@ -78,14 +71,7 @@ async function benchMDX(url: string) {
 
   const tasks = [
     async () => {
-      await page.waitForFunction(() => {
-        const iframe = document.querySelector('iframe');
-        if (!iframe) {
-          return false;
-        }
-        return iframe.contentDocument.readyState === 'complete';
-      });
-      const previewPage = await page.frame({ url: /iframe.html/ }).page();
+      const previewPage = await getPreviewPage(page);
       await previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
@@ -121,14 +107,7 @@ async function benchStory(url: string) {
       result.managerIndexVisible = now() - start;
     },
     async () => {
-      await page.waitForFunction(() => {
-        const iframe = document.querySelector('iframe');
-        if (!iframe) {
-          return false;
-        }
-        return iframe.contentDocument.readyState === 'complete';
-      });
-      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
index c2dd21aeb18b..c9c159cb5782 100644
--- 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;
+}