From 81f576862ec938a69b4548381a73e698b9c2e56d Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Thu, 4 Dec 2025 13:29:33 +0100 Subject: [PATCH] Wait for composed storybooks to load before continuing --- .../e2e-tests/composition.spec.ts | 82 +++++++++--------- .../react/e2e-tests/composition.spec.ts | 84 +++++++++---------- 2 files changed, 79 insertions(+), 87 deletions(-) diff --git a/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts b/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts index da15b351624b..242823cd4a0e 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts +++ b/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts @@ -1,19 +1,25 @@ -import { expect, test } from "@playwright/test"; +import { expect, test } from '@playwright/test'; -import { SbPage } from "../../../../code/e2e-tests/util"; +import { SbPage } from '../../../../code/e2e-tests/util'; -const STORYBOOK_URL = "http://localhost:6006"; +const STORYBOOK_URL = 'http://localhost:6006'; -test.describe("composition", () => { +test.describe('composition', () => { // the composed storybook can be slow to load, so we need to increase the timeout - test.describe.configure({ mode: "serial", timeout: 60000, retries: 2 }); - test("should filter and render composed stories", async ({ page }) => { + test.describe.configure({ mode: 'serial', timeout: 60000, retries: 2 }); + test('should filter and render composed stories', async ({ page }) => { await page.goto(STORYBOOK_URL); await new SbPage(page, expect).waitUntilLoaded(); - // Expect that composed Storybooks are visible - await expect(page.getByTitle("Storybook 8.0.0")).toBeVisible(); - await expect(page.getByTitle("Storybook 7.6.18")).toBeVisible(); + // Expect that composed Storybooks are visible and loaded + await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible(); + await expect(page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]')).toBeVisible({ + timeout: 15000, + }); + await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible(); + await expect(page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]')).toBeVisible({ + timeout: 15000, + }); // Expect composed stories to be available in the sidebar await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click(); @@ -21,27 +27,25 @@ test.describe("composition", () => { page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]') ).toBeVisible(); - await page - .locator('[id="storybook\\@7\\.6\\.18_components-badge"]') - .click(); + await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click(); await expect( page .locator('iframe[title="storybook-ref-storybook\\@7\\.6\\.18"]') .contentFrame() - .locator("#storybook-root") - .getByText("Default") + .locator('#storybook-root') + .getByText('Default') ).toBeVisible({ timeout: 15000 }); // Expect composed stories `to be available in the search - await page.getByPlaceholder("Find components").fill("Button primary"); + await page.getByPlaceholder('Find components').fill('Button primary'); await expect( - page.getByRole("option", { - name: "Primary Storybook 7.6.18 / @components / Button", + page.getByRole('option', { + name: 'Primary Storybook 7.6.18 / @components / Button', }) ).toBeVisible(); - const buttonStory = page.getByRole("option", { - name: "Primary Storybook 8.0.0 / @blocks / examples / Button", + const buttonStory = page.getByRole('option', { + name: 'Primary Storybook 8.0.0 / @blocks / examples / Button', }); await expect(buttonStory).toBeVisible(); await buttonStory.click(); @@ -51,13 +55,11 @@ test.describe("composition", () => { page .locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]') .contentFrame() - .getByRole("button") + .getByRole('button') ).toBeVisible({ timeout: 15000 }); }); - test("should filter and render composed stories on mobile", async ({ - page, - }) => { + test('should filter and render composed stories on mobile', async ({ page }) => { page.setViewportSize({ width: 320, height: 800 }); await page.goto(STORYBOOK_URL); await new SbPage(page, expect).waitUntilLoaded(); @@ -66,47 +68,41 @@ test.describe("composition", () => { // scroll down to the bottom of the element getByText('Skip to canvasStorybookSearch') - await page.getByTitle("Storybook 7.6.18").scrollIntoViewIfNeeded(); + await page.getByTitle('Storybook 7.6.18').scrollIntoViewIfNeeded(); // Expect that composed Storybooks are visible - await expect(page.getByTitle("Storybook 8.0.0")).toBeVisible(); - await expect(page.getByTitle("Storybook 7.6.18")).toBeVisible(); + await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible(); + await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible(); // Expect composed stories to be available in the sidebar - await expect( - page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]') - ).toBeVisible(); + await expect(page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]')).toBeVisible(); await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click(); await expect( page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]') ).toBeVisible(); - await page - .locator('[id="storybook\\@7\\.6\\.18_components-badge"]') - .click(); - await page - .locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]') - .click(); + await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click(); + await page.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]').click(); await expect( page .locator('iframe[title="storybook-ref-storybook\\@7\\.6\\.18"]') .contentFrame() - .locator("#storybook-root") - .getByText("Default") + .locator('#storybook-root') + .getByText('Default') ).toBeVisible({ timeout: 15000 }); await page.click('button[aria-label="Open navigation menu"]'); // Expect composed stories `to be available in the search - await page.getByPlaceholder("Find components").fill("Button primary"); + await page.getByPlaceholder('Find components').fill('Button primary'); await expect( - page.getByRole("option", { - name: "Primary Storybook 7.6.18 / @components / Button", + page.getByRole('option', { + name: 'Primary Storybook 7.6.18 / @components / Button', }) ).toBeVisible(); - const buttonStory = page.getByRole("option", { - name: "Primary Storybook 8.0.0 / @blocks / examples / Button", + const buttonStory = page.getByRole('option', { + name: 'Primary Storybook 8.0.0 / @blocks / examples / Button', }); await expect(buttonStory).toBeVisible(); await buttonStory.click(); @@ -116,7 +112,7 @@ test.describe("composition", () => { page .locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]') .contentFrame() - .getByRole("button") + .getByRole('button') ).toBeVisible({ timeout: 15000 }); }); }); diff --git a/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts b/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts index da15b351624b..95eba0ca9b7e 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts +++ b/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts @@ -1,19 +1,25 @@ -import { expect, test } from "@playwright/test"; +import { expect, test } from '@playwright/test'; -import { SbPage } from "../../../../code/e2e-tests/util"; +import { SbPage } from '../../../../code/e2e-tests/util'; -const STORYBOOK_URL = "http://localhost:6006"; +const STORYBOOK_URL = 'http://localhost:6006'; -test.describe("composition", () => { +test.describe('composition', () => { // the composed storybook can be slow to load, so we need to increase the timeout - test.describe.configure({ mode: "serial", timeout: 60000, retries: 2 }); - test("should filter and render composed stories", async ({ page }) => { + test.describe.configure({ mode: 'serial', timeout: 60000, retries: 2 }); + test('should filter and render composed stories', async ({ page }) => { await page.goto(STORYBOOK_URL); await new SbPage(page, expect).waitUntilLoaded(); - // Expect that composed Storybooks are visible - await expect(page.getByTitle("Storybook 8.0.0")).toBeVisible(); - await expect(page.getByTitle("Storybook 7.6.18")).toBeVisible(); + // Expect that composed Storybooks are visible and loaded + await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible(); + await expect(page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]')).toBeVisible({ + timeout: 15000, + }); + await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible(); + await expect(page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]')).toBeVisible({ + timeout: 15000, + }); // Expect composed stories to be available in the sidebar await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click(); @@ -21,27 +27,25 @@ test.describe("composition", () => { page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]') ).toBeVisible(); - await page - .locator('[id="storybook\\@7\\.6\\.18_components-badge"]') - .click(); + await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click(); await expect( page .locator('iframe[title="storybook-ref-storybook\\@7\\.6\\.18"]') .contentFrame() - .locator("#storybook-root") - .getByText("Default") + .locator('#storybook-root') + .getByText('Default') ).toBeVisible({ timeout: 15000 }); - // Expect composed stories `to be available in the search - await page.getByPlaceholder("Find components").fill("Button primary"); + // Expect composed stories to be available in the search + await page.getByPlaceholder('Find components').fill('Button primary'); await expect( - page.getByRole("option", { - name: "Primary Storybook 7.6.18 / @components / Button", + page.getByRole('option', { + name: 'Primary Storybook 7.6.18 / @components / Button', }) ).toBeVisible(); - const buttonStory = page.getByRole("option", { - name: "Primary Storybook 8.0.0 / @blocks / examples / Button", + const buttonStory = page.getByRole('option', { + name: 'Primary Storybook 8.0.0 / @blocks / examples / Button', }); await expect(buttonStory).toBeVisible(); await buttonStory.click(); @@ -51,13 +55,11 @@ test.describe("composition", () => { page .locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]') .contentFrame() - .getByRole("button") + .getByRole('button') ).toBeVisible({ timeout: 15000 }); }); - test("should filter and render composed stories on mobile", async ({ - page, - }) => { + test('should filter and render composed stories on mobile', async ({ page }) => { page.setViewportSize({ width: 320, height: 800 }); await page.goto(STORYBOOK_URL); await new SbPage(page, expect).waitUntilLoaded(); @@ -66,47 +68,41 @@ test.describe("composition", () => { // scroll down to the bottom of the element getByText('Skip to canvasStorybookSearch') - await page.getByTitle("Storybook 7.6.18").scrollIntoViewIfNeeded(); + await page.getByTitle('Storybook 7.6.18').scrollIntoViewIfNeeded(); // Expect that composed Storybooks are visible - await expect(page.getByTitle("Storybook 8.0.0")).toBeVisible(); - await expect(page.getByTitle("Storybook 7.6.18")).toBeVisible(); + await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible(); + await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible(); // Expect composed stories to be available in the sidebar - await expect( - page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]') - ).toBeVisible(); + await expect(page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]')).toBeVisible(); await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click(); await expect( page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]') ).toBeVisible(); - await page - .locator('[id="storybook\\@7\\.6\\.18_components-badge"]') - .click(); - await page - .locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]') - .click(); + await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click(); + await page.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]').click(); await expect( page .locator('iframe[title="storybook-ref-storybook\\@7\\.6\\.18"]') .contentFrame() - .locator("#storybook-root") - .getByText("Default") + .locator('#storybook-root') + .getByText('Default') ).toBeVisible({ timeout: 15000 }); await page.click('button[aria-label="Open navigation menu"]'); // Expect composed stories `to be available in the search - await page.getByPlaceholder("Find components").fill("Button primary"); + await page.getByPlaceholder('Find components').fill('Button primary'); await expect( - page.getByRole("option", { - name: "Primary Storybook 7.6.18 / @components / Button", + page.getByRole('option', { + name: 'Primary Storybook 7.6.18 / @components / Button', }) ).toBeVisible(); - const buttonStory = page.getByRole("option", { - name: "Primary Storybook 8.0.0 / @blocks / examples / Button", + const buttonStory = page.getByRole('option', { + name: 'Primary Storybook 8.0.0 / @blocks / examples / Button', }); await expect(buttonStory).toBeVisible(); await buttonStory.click(); @@ -116,7 +112,7 @@ test.describe("composition", () => { page .locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]') .contentFrame() - .getByRole("button") + .getByRole('button') ).toBeVisible({ timeout: 15000 }); }); });