From 13aa8c3b479c720859c1a063ac347137062b3beb Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 27 Jul 2023 10:51:16 +0200 Subject: [PATCH] Fix flaky e2e tests --- code/e2e-tests/addon-actions.spec.ts | 5 ----- code/e2e-tests/addon-backgrounds.spec.ts | 5 ----- code/e2e-tests/addon-controls.spec.ts | 5 ----- code/e2e-tests/addon-docs.spec.ts | 4 ---- code/e2e-tests/addon-interactions.spec.ts | 8 ++------ code/e2e-tests/addon-viewport.spec.ts | 4 ---- code/e2e-tests/framework-nextjs.spec.ts | 4 ---- code/e2e-tests/json-files.spec.ts | 4 ---- code/e2e-tests/manager.spec.ts | 8 ++------ code/e2e-tests/preview-web.spec.ts | 16 ++-------------- code/e2e-tests/util.ts | 8 ++++++++ code/playwright.config.ts | 9 +++------ 12 files changed, 17 insertions(+), 63 deletions(-) diff --git a/code/e2e-tests/addon-actions.spec.ts b/code/e2e-tests/addon-actions.spec.ts index c1a5dff84959..a38b6b82d118 100644 --- a/code/e2e-tests/addon-actions.spec.ts +++ b/code/e2e-tests/addon-actions.spec.ts @@ -5,11 +5,6 @@ import { SbPage } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; test.describe('addon-actions', () => { - test.afterEach(async ({ page }) => { - await page.evaluate(() => window.localStorage.clear()); - await page.evaluate(() => window.sessionStorage.clear()); - }); - test.beforeEach(async ({ page }) => { await page.goto(storybookUrl); await new SbPage(page).waitUntilLoaded(); diff --git a/code/e2e-tests/addon-backgrounds.spec.ts b/code/e2e-tests/addon-backgrounds.spec.ts index 689172c4be17..29ab0cbd1957 100644 --- a/code/e2e-tests/addon-backgrounds.spec.ts +++ b/code/e2e-tests/addon-backgrounds.spec.ts @@ -6,11 +6,6 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; const templateName = process.env.STORYBOOK_TEMPLATE_NAME; test.describe('addon-backgrounds', () => { - test.afterEach(async ({ page }) => { - await page.evaluate(() => window.localStorage.clear()); - await page.evaluate(() => window.sessionStorage.clear()); - }); - test.beforeEach(async ({ page }) => { await page.goto(storybookUrl); await new SbPage(page).waitUntilLoaded(); diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts index 388398def9b2..bcbf96019947 100644 --- a/code/e2e-tests/addon-controls.spec.ts +++ b/code/e2e-tests/addon-controls.spec.ts @@ -5,11 +5,6 @@ import { SbPage } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; test.describe('addon-controls', () => { - test.afterEach(async ({ page }) => { - await page.evaluate(() => window.localStorage.clear()); - await page.evaluate(() => window.sessionStorage.clear()); - }); - test('should change component when changing controls', async ({ page }) => { await page.goto(storybookUrl); const sbPage = new SbPage(page); diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index 9255c467275a..0f318f9f657d 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -14,10 +14,6 @@ test.describe('addon-docs', () => { await page.goto(storybookUrl); await new SbPage(page).waitUntilLoaded(); }); - test.afterEach(async ({ page }) => { - await page.evaluate(() => window.localStorage.clear()); - await page.evaluate(() => window.sessionStorage.clear()); - }); test('should show descriptions for stories', async ({ page }) => { const skipped = [ diff --git a/code/e2e-tests/addon-interactions.spec.ts b/code/e2e-tests/addon-interactions.spec.ts index b8fc55affb9c..8e85d3cf21a8 100644 --- a/code/e2e-tests/addon-interactions.spec.ts +++ b/code/e2e-tests/addon-interactions.spec.ts @@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'; import process from 'process'; import { SbPage } from './util'; -const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006'; const templateName = process.env.STORYBOOK_TEMPLATE_NAME || ''; test.describe('addon-interactions', () => { @@ -11,10 +11,6 @@ test.describe('addon-interactions', () => { await page.goto(storybookUrl); await new SbPage(page).waitUntilLoaded(); }); - test.afterEach(async ({ page }) => { - await page.evaluate(() => window.localStorage.clear()); - await page.evaluate(() => window.sessionStorage.clear()); - }); // FIXME: skip xxx test('should have interactions', async ({ page }) => { @@ -56,7 +52,7 @@ test.describe('addon-interactions', () => { const sbPage = new SbPage(page); - await sbPage.navigateToStory('addons/interactions/basics', 'type-and-clear'); + await sbPage.deepLinkToStory('addons/interactions/basics', 'type-and-clear'); await sbPage.viewAddonPanel('Interactions'); // Test initial state - Interactions have run, count is correct and values are as expected diff --git a/code/e2e-tests/addon-viewport.spec.ts b/code/e2e-tests/addon-viewport.spec.ts index 38968fb794ba..ec96a3bd93ea 100644 --- a/code/e2e-tests/addon-viewport.spec.ts +++ b/code/e2e-tests/addon-viewport.spec.ts @@ -9,10 +9,6 @@ test.describe('addon-viewport', () => { await page.goto(storybookUrl); await new SbPage(page).waitUntilLoaded(); }); - test.afterEach(async ({ page }) => { - await page.evaluate(() => window.localStorage.clear()); - await page.evaluate(() => window.sessionStorage.clear()); - }); test('should have viewport button in the toolbar', async ({ page }) => { const sbPage = new SbPage(page); diff --git a/code/e2e-tests/framework-nextjs.spec.ts b/code/e2e-tests/framework-nextjs.spec.ts index a0ef84a0d257..440c079d1704 100644 --- a/code/e2e-tests/framework-nextjs.spec.ts +++ b/code/e2e-tests/framework-nextjs.spec.ts @@ -20,10 +20,6 @@ test.describe('Next.js', () => { await page.goto(storybookUrl); await new SbPage(page).waitUntilLoaded(); }); - test.afterEach(async ({ page }) => { - await page.evaluate(() => window.localStorage.clear()); - await page.evaluate(() => window.sessionStorage.clear()); - }); test.describe('next/image', () => { let sbPage: SbPage; diff --git a/code/e2e-tests/json-files.spec.ts b/code/e2e-tests/json-files.spec.ts index 12d0781beba3..e0e29fab7c9c 100644 --- a/code/e2e-tests/json-files.spec.ts +++ b/code/e2e-tests/json-files.spec.ts @@ -9,10 +9,6 @@ test.describe('JSON files', () => { test.beforeEach(async ({ page }) => { await page.goto(storybookUrl); }); - test.afterEach(async ({ page }) => { - await page.evaluate(() => window.localStorage.clear()); - await page.evaluate(() => window.sessionStorage.clear()); - }); test('should have index.json', async ({ page }) => { test.skip( diff --git a/code/e2e-tests/manager.spec.ts b/code/e2e-tests/manager.spec.ts index 4930ab78d70e..a4a49ccc2330 100644 --- a/code/e2e-tests/manager.spec.ts +++ b/code/e2e-tests/manager.spec.ts @@ -10,10 +10,6 @@ test.describe('manager', () => { await new SbPage(page).waitUntilLoaded(); }); - test.afterEach(async ({ page }) => { - await page.evaluate(() => window.localStorage.clear()); - await page.evaluate(() => window.sessionStorage.clear()); - }); test('shortcuts sidebar', async ({ page }) => { const sbPage = new SbPage(page); @@ -31,8 +27,8 @@ test.describe('manager', () => { await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); - await sbPage.page.locator('html').press('s'); - await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); + // await sbPage.page.locator('html').press('s'); + // await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); }); test('shortcuts toolbar', async ({ page }) => { diff --git a/code/e2e-tests/preview-web.spec.ts b/code/e2e-tests/preview-web.spec.ts index 781f04b04dda..4ec28020b9aa 100644 --- a/code/e2e-tests/preview-web.spec.ts +++ b/code/e2e-tests/preview-web.spec.ts @@ -10,36 +10,24 @@ test.describe('preview-web', () => { await new SbPage(page).waitUntilLoaded(); }); - test.afterEach(async ({ page }) => { - await page.evaluate(() => window.localStorage.clear()); - await page.evaluate(() => window.sessionStorage.clear()); - }); test('should pass over shortcuts, but not from play functions, story', async ({ page }) => { const sbPage = new SbPage(page); - await sbPage.navigateToStory('lib/preview-api/shortcuts', 'keydown-during-play'); + await sbPage.deepLinkToStory('lib/preview-api/shortcuts', 'keydown-during-play'); await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); await sbPage.previewRoot().locator('button').press('s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); - - // restore the sidebar back to visible, because it is persisted in localStorage - await page.locator('html').press('s'); - await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); }); test('should pass over shortcuts, but not from play functions, docs', async ({ page }) => { const sbPage = new SbPage(page); - await sbPage.navigateToStory('lib/preview-api/shortcuts', 'docs'); + await sbPage.deepLinkToStory('lib/preview-api/shortcuts', 'docs'); await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); await sbPage.previewRoot().getByRole('button').getByText('Submit').first().press('s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); - - // restore the sidebar back to visible, because it is persisted in localStorage - await page.locator('html').press('s'); - await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); }); }); diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts index 00a15312b2cf..da2781d492b8 100644 --- a/code/e2e-tests/util.ts +++ b/code/e2e-tests/util.ts @@ -24,6 +24,14 @@ export class SbPage { } } + async deepLinkToStory(title: string, name: 'docs' | string) { + const titleId = toId(title); + const storyId = toId(name); + const storyLinkId = `${titleId}--${storyId}`; + const viewMode = name === 'docs' ? 'docs' : 'story'; + await this.page.goto(`/?path=/${viewMode}/${storyLinkId}`); + } + async navigateToStory(title: string, name: string) { await this.openComponent(title); diff --git a/code/playwright.config.ts b/code/playwright.config.ts index 71ca6340d87d..129c1aac537d 100644 --- a/code/playwright.config.ts +++ b/code/playwright.config.ts @@ -1,5 +1,4 @@ -import type { PlaywrightTestConfig } from '@playwright/test'; -import { devices } from '@playwright/test'; +import { defineConfig, devices } from '@playwright/test'; /** * Read environment variables from file. @@ -10,7 +9,7 @@ import { devices } from '@playwright/test'; /** * See https://playwright.dev/docs/test-configuration. */ -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: './e2e-tests', /* Maximum time one test can run for. */ timeout: 30 * 1000, @@ -112,6 +111,4 @@ const config: PlaywrightTestConfig = { // command: 'npm run start', // port: 3000, // }, -}; - -export default config; +});