Skip to content

Commit 8edd8c5

Browse files
ghengeveldghengeveld
authored
Merge pull request #33278 from storybookjs/fix-composition-e2e
E2E: Wait for composed Storybooks to load before continuing test
2 parents 7bd55eb + 81f5768 commit 8edd8c5

File tree

2 files changed

+79
-87
lines changed

2 files changed

+79
-87
lines changed

‎test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts‎

Lines changed: 39 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,51 @@
1-
import { expect, test } from "@playwright/test";
1+
import { expect, test } from '@playwright/test';
22

3-
import { SbPage } from "../../../../code/e2e-tests/util";
3+
import { SbPage } from '../../../../code/e2e-tests/util';
44

5-
const STORYBOOK_URL = "http://localhost:6006";
5+
const STORYBOOK_URL = 'http://localhost:6006';
66

7-
test.describe("composition", () => {
7+
test.describe('composition', () => {
88
// the composed storybook can be slow to load, so we need to increase the timeout
9-
test.describe.configure({ mode: "serial", timeout: 60000, retries: 2 });
10-
test("should filter and render composed stories", async ({ page }) => {
9+
test.describe.configure({ mode: 'serial', timeout: 60000, retries: 2 });
10+
test('should filter and render composed stories', async ({ page }) => {
1111
await page.goto(STORYBOOK_URL);
1212
await new SbPage(page, expect).waitUntilLoaded();
1313

14-
// Expect that composed Storybooks are visible
15-
await expect(page.getByTitle("Storybook 8.0.0")).toBeVisible();
16-
await expect(page.getByTitle("Storybook 7.6.18")).toBeVisible();
14+
// Expect that composed Storybooks are visible and loaded
15+
await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible();
16+
await expect(page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]')).toBeVisible({
17+
timeout: 15000,
18+
});
19+
await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible();
20+
await expect(page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]')).toBeVisible({
21+
timeout: 15000,
22+
});
1723

1824
// Expect composed stories to be available in the sidebar
1925
await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click();
2026
await expect(
2127
page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]')
2228
).toBeVisible();
2329

24-
await page
25-
.locator('[id="storybook\\@7\\.6\\.18_components-badge"]')
26-
.click();
30+
await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click();
2731
await expect(
2832
page
2933
.locator('iframe[title="storybook-ref-storybook\\@7\\.6\\.18"]')
3034
.contentFrame()
31-
.locator("#storybook-root")
32-
.getByText("Default")
35+
.locator('#storybook-root')
36+
.getByText('Default')
3337
).toBeVisible({ timeout: 15000 });
3438

3539
// Expect composed stories `to be available in the search
36-
await page.getByPlaceholder("Find components").fill("Button primary");
40+
await page.getByPlaceholder('Find components').fill('Button primary');
3741
await expect(
38-
page.getByRole("option", {
39-
name: "Primary Storybook 7.6.18 / @components / Button",
42+
page.getByRole('option', {
43+
name: 'Primary Storybook 7.6.18 / @components / Button',
4044
})
4145
).toBeVisible();
4246

43-
const buttonStory = page.getByRole("option", {
44-
name: "Primary Storybook 8.0.0 / @blocks / examples / Button",
47+
const buttonStory = page.getByRole('option', {
48+
name: 'Primary Storybook 8.0.0 / @blocks / examples / Button',
4549
});
4650
await expect(buttonStory).toBeVisible();
4751
await buttonStory.click();
@@ -51,13 +55,11 @@ test.describe("composition", () => {
5155
page
5256
.locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]')
5357
.contentFrame()
54-
.getByRole("button")
58+
.getByRole('button')
5559
).toBeVisible({ timeout: 15000 });
5660
});
5761

58-
test("should filter and render composed stories on mobile", async ({
59-
page,
60-
}) => {
62+
test('should filter and render composed stories on mobile', async ({ page }) => {
6163
page.setViewportSize({ width: 320, height: 800 });
6264
await page.goto(STORYBOOK_URL);
6365
await new SbPage(page, expect).waitUntilLoaded();
@@ -66,47 +68,41 @@ test.describe("composition", () => {
6668

6769
// scroll down to the bottom of the element getByText('Skip to canvasStorybookSearch')
6870

69-
await page.getByTitle("Storybook 7.6.18").scrollIntoViewIfNeeded();
71+
await page.getByTitle('Storybook 7.6.18').scrollIntoViewIfNeeded();
7072

7173
// Expect that composed Storybooks are visible
72-
await expect(page.getByTitle("Storybook 8.0.0")).toBeVisible();
73-
await expect(page.getByTitle("Storybook 7.6.18")).toBeVisible();
74+
await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible();
75+
await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible();
7476

7577
// Expect composed stories to be available in the sidebar
76-
await expect(
77-
page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]')
78-
).toBeVisible();
78+
await expect(page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]')).toBeVisible();
7979
await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click();
8080
await expect(
8181
page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]')
8282
).toBeVisible();
8383

84-
await page
85-
.locator('[id="storybook\\@7\\.6\\.18_components-badge"]')
86-
.click();
87-
await page
88-
.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]')
89-
.click();
84+
await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click();
85+
await page.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]').click();
9086
await expect(
9187
page
9288
.locator('iframe[title="storybook-ref-storybook\\@7\\.6\\.18"]')
9389
.contentFrame()
94-
.locator("#storybook-root")
95-
.getByText("Default")
90+
.locator('#storybook-root')
91+
.getByText('Default')
9692
).toBeVisible({ timeout: 15000 });
9793

9894
await page.click('button[aria-label="Open navigation menu"]');
9995

10096
// Expect composed stories `to be available in the search
101-
await page.getByPlaceholder("Find components").fill("Button primary");
97+
await page.getByPlaceholder('Find components').fill('Button primary');
10298
await expect(
103-
page.getByRole("option", {
104-
name: "Primary Storybook 7.6.18 / @components / Button",
99+
page.getByRole('option', {
100+
name: 'Primary Storybook 7.6.18 / @components / Button',
105101
})
106102
).toBeVisible();
107103

108-
const buttonStory = page.getByRole("option", {
109-
name: "Primary Storybook 8.0.0 / @blocks / examples / Button",
104+
const buttonStory = page.getByRole('option', {
105+
name: 'Primary Storybook 8.0.0 / @blocks / examples / Button',
110106
});
111107
await expect(buttonStory).toBeVisible();
112108
await buttonStory.click();
@@ -116,7 +112,7 @@ test.describe("composition", () => {
116112
page
117113
.locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]')
118114
.contentFrame()
119-
.getByRole("button")
115+
.getByRole('button')
120116
).toBeVisible({ timeout: 15000 });
121117
});
122118
});

‎test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts‎

Lines changed: 40 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,51 @@
1-
import { expect, test } from "@playwright/test";
1+
import { expect, test } from '@playwright/test';
22

3-
import { SbPage } from "../../../../code/e2e-tests/util";
3+
import { SbPage } from '../../../../code/e2e-tests/util';
44

5-
const STORYBOOK_URL = "http://localhost:6006";
5+
const STORYBOOK_URL = 'http://localhost:6006';
66

7-
test.describe("composition", () => {
7+
test.describe('composition', () => {
88
// the composed storybook can be slow to load, so we need to increase the timeout
9-
test.describe.configure({ mode: "serial", timeout: 60000, retries: 2 });
10-
test("should filter and render composed stories", async ({ page }) => {
9+
test.describe.configure({ mode: 'serial', timeout: 60000, retries: 2 });
10+
test('should filter and render composed stories', async ({ page }) => {
1111
await page.goto(STORYBOOK_URL);
1212
await new SbPage(page, expect).waitUntilLoaded();
1313

14-
// Expect that composed Storybooks are visible
15-
await expect(page.getByTitle("Storybook 8.0.0")).toBeVisible();
16-
await expect(page.getByTitle("Storybook 7.6.18")).toBeVisible();
14+
// Expect that composed Storybooks are visible and loaded
15+
await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible();
16+
await expect(page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]')).toBeVisible({
17+
timeout: 15000,
18+
});
19+
await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible();
20+
await expect(page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]')).toBeVisible({
21+
timeout: 15000,
22+
});
1723

1824
// Expect composed stories to be available in the sidebar
1925
await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click();
2026
await expect(
2127
page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]')
2228
).toBeVisible();
2329

24-
await page
25-
.locator('[id="storybook\\@7\\.6\\.18_components-badge"]')
26-
.click();
30+
await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click();
2731
await expect(
2832
page
2933
.locator('iframe[title="storybook-ref-storybook\\@7\\.6\\.18"]')
3034
.contentFrame()
31-
.locator("#storybook-root")
32-
.getByText("Default")
35+
.locator('#storybook-root')
36+
.getByText('Default')
3337
).toBeVisible({ timeout: 15000 });
3438

35-
// Expect composed stories `to be available in the search
36-
await page.getByPlaceholder("Find components").fill("Button primary");
39+
// Expect composed stories to be available in the search
40+
await page.getByPlaceholder('Find components').fill('Button primary');
3741
await expect(
38-
page.getByRole("option", {
39-
name: "Primary Storybook 7.6.18 / @components / Button",
42+
page.getByRole('option', {
43+
name: 'Primary Storybook 7.6.18 / @components / Button',
4044
})
4145
).toBeVisible();
4246

43-
const buttonStory = page.getByRole("option", {
44-
name: "Primary Storybook 8.0.0 / @blocks / examples / Button",
47+
const buttonStory = page.getByRole('option', {
48+
name: 'Primary Storybook 8.0.0 / @blocks / examples / Button',
4549
});
4650
await expect(buttonStory).toBeVisible();
4751
await buttonStory.click();
@@ -51,13 +55,11 @@ test.describe("composition", () => {
5155
page
5256
.locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]')
5357
.contentFrame()
54-
.getByRole("button")
58+
.getByRole('button')
5559
).toBeVisible({ timeout: 15000 });
5660
});
5761

58-
test("should filter and render composed stories on mobile", async ({
59-
page,
60-
}) => {
62+
test('should filter and render composed stories on mobile', async ({ page }) => {
6163
page.setViewportSize({ width: 320, height: 800 });
6264
await page.goto(STORYBOOK_URL);
6365
await new SbPage(page, expect).waitUntilLoaded();
@@ -66,47 +68,41 @@ test.describe("composition", () => {
6668

6769
// scroll down to the bottom of the element getByText('Skip to canvasStorybookSearch')
6870

69-
await page.getByTitle("Storybook 7.6.18").scrollIntoViewIfNeeded();
71+
await page.getByTitle('Storybook 7.6.18').scrollIntoViewIfNeeded();
7072

7173
// Expect that composed Storybooks are visible
72-
await expect(page.getByTitle("Storybook 8.0.0")).toBeVisible();
73-
await expect(page.getByTitle("Storybook 7.6.18")).toBeVisible();
74+
await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible();
75+
await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible();
7476

7577
// Expect composed stories to be available in the sidebar
76-
await expect(
77-
page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]')
78-
).toBeVisible();
78+
await expect(page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]')).toBeVisible();
7979
await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click();
8080
await expect(
8181
page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]')
8282
).toBeVisible();
8383

84-
await page
85-
.locator('[id="storybook\\@7\\.6\\.18_components-badge"]')
86-
.click();
87-
await page
88-
.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]')
89-
.click();
84+
await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click();
85+
await page.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]').click();
9086
await expect(
9187
page
9288
.locator('iframe[title="storybook-ref-storybook\\@7\\.6\\.18"]')
9389
.contentFrame()
94-
.locator("#storybook-root")
95-
.getByText("Default")
90+
.locator('#storybook-root')
91+
.getByText('Default')
9692
).toBeVisible({ timeout: 15000 });
9793

9894
await page.click('button[aria-label="Open navigation menu"]');
9995

10096
// Expect composed stories `to be available in the search
101-
await page.getByPlaceholder("Find components").fill("Button primary");
97+
await page.getByPlaceholder('Find components').fill('Button primary');
10298
await expect(
103-
page.getByRole("option", {
104-
name: "Primary Storybook 7.6.18 / @components / Button",
99+
page.getByRole('option', {
100+
name: 'Primary Storybook 7.6.18 / @components / Button',
105101
})
106102
).toBeVisible();
107103

108-
const buttonStory = page.getByRole("option", {
109-
name: "Primary Storybook 8.0.0 / @blocks / examples / Button",
104+
const buttonStory = page.getByRole('option', {
105+
name: 'Primary Storybook 8.0.0 / @blocks / examples / Button',
110106
});
111107
await expect(buttonStory).toBeVisible();
112108
await buttonStory.click();
@@ -116,7 +112,7 @@ test.describe("composition", () => {
116112
page
117113
.locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]')
118114
.contentFrame()
119-
.getByRole("button")
115+
.getByRole('button')
120116
).toBeVisible({ timeout: 15000 });
121117
});
122118
});

0 commit comments

Comments
 (0)