Fix flaky e2e tests

storybookjs · Jul 27, 2023 · 13aa8c3 · 13aa8c3
1 parent 39b9548
commit 13aa8c3
Show file tree

Hide file tree

Showing 12 changed files with 17 additions and 63 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -3,18 +3,14 @@ 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', () => {
   test.beforeEach(async ({ page }) => {
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+});