Merge pull request #27165 from storybookjs/jeppe/27059-bench-script-f…

…lakiness Bench: Fix flake `Cannot read properties of null (reading 'page')`
storybookjs · May 16, 2024 · 27fa22a · 27fa22a
2 parents 3974106 + f96341e
commit 27fa22a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/scripts/bench/browse.ts b/scripts/bench/browse.ts
@@ -37,15 +37,15 @@ async function benchAutodocs(url: string) {
   const browser = await chromium.launch(/* { headless: false } */);
   await browser.newContext();
   const page = await browser.newPage();
-  await page.setDefaultTimeout(40000);
+  page.setDefaultTimeout(40000);
 
   const start = now();
   await page.goto(`${url}?path=/docs/example-button--docs`);
 
   const tasks = [
     async () => {
       const previewPage = await getPreviewPage(page);
-      await previewPage.setDefaultTimeout(40000);
+      previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
       await previewPage.getByText('Primary UI component for user interaction');
@@ -72,7 +72,7 @@ async function benchMDX(url: string) {
   const tasks = [
     async () => {
       const previewPage = await getPreviewPage(page);
-      await previewPage.setDefaultTimeout(40000);
+      previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
       await previewPage.getByText('Configure your project');
@@ -108,7 +108,7 @@ async function benchStory(url: string) {
     },
     async () => {
       const previewPage = await getPreviewPage(page);
-      await previewPage.setDefaultTimeout(40000);
+      previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
       await previewPage.getByText('Button');

diff --git a/scripts/bench/utils.ts b/scripts/bench/utils.ts
@@ -33,9 +33,24 @@ export const loadBench = async (options: SaveBenchOptions): Promise<Partial<Benc
 };
 
 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;
+  /**
+   * Fix flakiness in preview iframe retrieval
+   * Sometimes the iframe is not yet available when we try to access it,
+   * even after waiting for the readyState to be complete.
+   *
+   * This loop will keep trying to access the iframe until it's available.
+   */
+  for (let i = 0; i < 10; i++) {
+    // eslint-disable-next-line @typescript-eslint/no-loop-func
+    await page.waitForFunction(() => {
+      return document.querySelector('iframe')?.contentDocument.readyState === 'complete';
+    });
+
+    const previewPage = page.frame({ url: /iframe.html/ })?.page();
+    if (previewPage) {
+      return previewPage;
+    }
+  }
+
+  throw new Error('The preview iframe was never found');
 }