From 2e43626c1d7b9662f0ae039ffa53d4f166e823af Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 12 Jun 2026 10:43:30 +0200 Subject: [PATCH 1/2] [chore] try to run tests in exists dev stand instead of building each story in test --- playwright.browser.config.ts | 12 +++++++- .../__tests__/accordion.browser-test.tsx | 28 ++++++++++--------- .../accordion/docs/Accordion.stories.tsx | 2 +- tools/testing-utils/shared/helpers.ts | 10 +++++-- 4 files changed, 34 insertions(+), 18 deletions(-) diff --git a/playwright.browser.config.ts b/playwright.browser.config.ts index 970d4301c4..4a40b1fe51 100644 --- a/playwright.browser.config.ts +++ b/playwright.browser.config.ts @@ -20,7 +20,7 @@ const config: PlaywrightTestConfig = { /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Base URL to use in actions like `await page.goto('/')`. */ - // baseURL: 'http://127.0.0.1:3000', + baseURL: 'http://127.0.0.1:6006', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', @@ -54,6 +54,16 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], + + /* Run your local dev server before starting the tests */ + webServer: { + command: 'pnpm run storybook', + url: 'http://127.0.0.1:6006', + timeout: 180 * 1000, + reuseExistingServer: process.env.CI !== 'true', + stdout: 'pipe', + stderr: 'pipe', + }, }; export default config; diff --git a/semcore/accordion/__tests__/accordion.browser-test.tsx b/semcore/accordion/__tests__/accordion.browser-test.tsx index 0671ebafdb..ffacb71055 100644 --- a/semcore/accordion/__tests__/accordion.browser-test.tsx +++ b/semcore/accordion/__tests__/accordion.browser-test.tsx @@ -38,7 +38,7 @@ test.describe(`${TAG.VISUAL}`, () => { '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en', item); + await loadPage(page, 'components-accordion-documentation--basic', 'en', item); await test.step('Verify active and normal states', async () => { await expect(page).toHaveScreenshot(); @@ -120,7 +120,9 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.KEYBOARD, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en'); + await loadPage(page, 'components-accordion-documentation--basic', 'en'); + + await expect(locators.toggle(page, 0)).toHaveAttribute('tabindex', '0'); await test.step('Verify toggles tabindex', async () => { const count = await locators.toggle(page).count(); @@ -199,7 +201,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en'); + await loadPage(page, 'components-accordion-documentation--basic', 'en'); await test.step('Verify item collapses by click on text', async () => { await locators.button(page, 0).click(); @@ -226,7 +228,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.KEYBOARD, '@accordion'], }, async ({ page, browserName }) => { - await loadPage(page, 'stories/components/accordion/docs/examples/seo.tsx', 'en'); + await loadPage(page, 'components-accordion-documentation--seo', 'en'); await expect(locators.collapse(page)).toHaveCount(3); await page.keyboard.press('Tab'); @@ -249,7 +251,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.KEYBOARD, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/docs/examples/one_section_opening.tsx', 'en'); + await loadPage(page, 'components-accordion-documentation--one-section-opening', 'en'); await expect(locators.collapse(page)).toHaveCount(0); await page.keyboard.press('Tab'); @@ -273,7 +275,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/docs/examples/one_section_opening.tsx', 'en'); + await loadPage(page, 'components-accordion-documentation--one-section-opening', 'en'); await expect(locators.collapse(page)).toHaveCount(0); await locators.toggle(page, 0).click(); @@ -292,7 +294,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/tests/examples/button-on-toggle.tsx', 'en'); + await loadPage(page, 'components-accordion-tests--button-on-toggle', 'en'); await expect(locators.collapse(page)).toHaveCount(0); await locators.button(page, 0).click(); @@ -314,7 +316,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { tag: [TAG.PRIORITY_HIGH, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/tests/examples/values.tsx', 'en'); + await loadPage(page, 'components-accordion-tests--values', 'en'); await expect(page.locator('[data-test-id="number"]')).toBeVisible(); await expect(page.locator('[data-test-id="string"]')).toBeVisible(); @@ -330,7 +332,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/tests/examples/default-values.tsx', 'en'); + await loadPage(page, 'components-accordion-tests--default-values', 'en'); await expect(page.locator('[data-test-id="default-value"]')).toBeVisible(); }); @@ -340,7 +342,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.KEYBOARD, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/docs/examples/heading_tag.tsx', 'en'); + await loadPage(page, 'components-accordion-documentation--heading-tag', 'en'); await page.keyboard.press('Tab'); await page.keyboard.press('Space'); @@ -359,7 +361,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en', { overflowHidden: false, defaultHeight: 'auto' }); + await loadPage(page, 'components-accordion-documentation--basic', 'en', { overflowHidden: false, defaultHeight: 'auto' }); await expect(locators.collapse(page, 0)).toBeVisible(); @@ -378,7 +380,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en', { overflowHidden: true, defaultHeight: '100%' }); + await loadPage(page, 'components-accordion-documentation--basic', 'en', { overflowHidden: true, defaultHeight: '100%' }); await expect(locators.collapse(page, 0)).toBeVisible(); @@ -398,7 +400,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { '@base-components', '@animation'], }, async ({ page }) => { - await loadPage(page, 'stories/components/accordion/tests/examples/accordion-collapse-duration.tsx', 'en'); + await loadPage(page, 'components-accordion-tests--accordion-animation', 'en'); const count = await locators.toggle(page).count(); for (let i = 0; i < count; i++) { diff --git a/stories/components/accordion/docs/Accordion.stories.tsx b/stories/components/accordion/docs/Accordion.stories.tsx index 6066e692ca..ab334692df 100644 --- a/stories/components/accordion/docs/Accordion.stories.tsx +++ b/stories/components/accordion/docs/Accordion.stories.tsx @@ -43,7 +43,7 @@ export const Basic: StoryObj = { }, }, args: BasicExampleProps, - play: playWrapper(BasicUsageTest), + // play: playWrapper(BasicUsageTest), }; export const CustomStyles: Story = { diff --git a/tools/testing-utils/shared/helpers.ts b/tools/testing-utils/shared/helpers.ts index 89dabb03e7..170849376e 100644 --- a/tools/testing-utils/shared/helpers.ts +++ b/tools/testing-utils/shared/helpers.ts @@ -1,6 +1,10 @@ +import type { Page } from 'playwright'; + import { e2eStandToHtml } from '../e2e-stand'; -export async function loadPage(page: any, examplePath: string, lang: string, props = {}) { - const htmlContent = await e2eStandToHtml(examplePath, lang, props); - await page.setContent(htmlContent); +export async function loadPage(page: Page, id: string, lang: string, props = {}) { + // const htmlContent = await e2eStandToHtml(examplePath, lang, props); + // await page.setContent(htmlContent); + + await page.goto(`/iframe.html?viewMode=story&id=${id}`); } From a438c213cde5c22bc990c610ebaa1809694411f8 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 12 Jun 2026 10:53:33 +0200 Subject: [PATCH 2/2] [chore] small improvement in tests --- .github/workflows/cd.yml | 23 ++++----------- playwright.browser.config.ts | 12 +------- .../__tests__/accordion.browser-test.tsx | 28 +++++++++---------- .../accordion/docs/Accordion.stories.tsx | 2 +- tools/testing-utils/shared/helpers.ts | 14 +++++++--- 5 files changed, 30 insertions(+), 49 deletions(-) diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml index 098ba6fd3e..81fcf838e8 100644 --- a/.github/workflows/cd.yml +++ b/.github/workflows/cd.yml @@ -408,14 +408,13 @@ jobs: run: | pnpm --filter @semcore/theme build pnpm --filter @semcore/core build - pnpm --filter @semcore/base-components build - pnpm build:icons - pnpm build:illustration + pnpm --filter @semcore/icon build + pnpm --filter @semcore/illustration build - name: Browser testing (Functional tests - ${{ matrix.browser }}) id: browser-testing-functional env: CHANGED_COMPONENTS: ${{ needs.defineChangedComponents.outputs.changedComponents }} - run: HOME=/root pnpm playwright test --config playwright.browser.config.ts --grep "@functional" --project=${{ matrix.browser }} $CHANGED_COMPONENTS + run: HOME=/root pnpm playwright test --pass-with-no-tests --config playwright.browser.config.ts --grep "@functional" --project=${{ matrix.browser }} $CHANGED_COMPONENTS continue-on-error: true - name: Save test results as artifacts if: steps.browser-testing-functional.outcome != 'success' @@ -486,7 +485,7 @@ jobs: id: axe-testing env: CHANGED_COMPONENTS: ${{ needs.defineChangedComponents.outputs.changedComponents }} - run: HOME=/root pnpm playwright test --config playwright.axe.config.ts $CHANGED_COMPONENTS + run: HOME=/root pnpm playwright test --pass-with-no-tests --config playwright.axe.config.ts $CHANGED_COMPONENTS continue-on-error: true - name: Save test results as artifacts if: steps.axe-testing.outcome != 'success' @@ -527,18 +526,6 @@ jobs: path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} enableCrossOsArchive: true -# - name: Restore cached build -# uses: actions/cache@v4 -# id: cache-build -# with: -# path: | -# semcore/*/lib -# tools/*/lib -# semcore/illustration/**/*.js -# semcore/illustration/**/*.mjs -# semcore/illustration/**/*.d.ts -# key: build-${{ hashFiles('**/pnpm-lock.yaml', '**/CHANGELOG.md') }}-6 -# enableCrossOsArchive: true - name: Install dependencies run: | pnpm install --frozen-lockfile --ignore-scripts @@ -563,7 +550,7 @@ jobs: pnpm --filter @semcore/core build pnpm --filter @semcore/icon build - pnpm exec playwright test --config playwright.nvda.config.ts -- $components + pnpm exec playwright test --pass-with-no-tests --config playwright.nvda.config.ts -- $components continue-on-error: true - name: Save test results as artifacts if: steps.nvda-testing.outcome != 'success' diff --git a/playwright.browser.config.ts b/playwright.browser.config.ts index 4a40b1fe51..970d4301c4 100644 --- a/playwright.browser.config.ts +++ b/playwright.browser.config.ts @@ -20,7 +20,7 @@ const config: PlaywrightTestConfig = { /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: 'http://127.0.0.1:6006', + // baseURL: 'http://127.0.0.1:3000', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', @@ -54,16 +54,6 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], - - /* Run your local dev server before starting the tests */ - webServer: { - command: 'pnpm run storybook', - url: 'http://127.0.0.1:6006', - timeout: 180 * 1000, - reuseExistingServer: process.env.CI !== 'true', - stdout: 'pipe', - stderr: 'pipe', - }, }; export default config; diff --git a/semcore/accordion/__tests__/accordion.browser-test.tsx b/semcore/accordion/__tests__/accordion.browser-test.tsx index ffacb71055..0671ebafdb 100644 --- a/semcore/accordion/__tests__/accordion.browser-test.tsx +++ b/semcore/accordion/__tests__/accordion.browser-test.tsx @@ -38,7 +38,7 @@ test.describe(`${TAG.VISUAL}`, () => { '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-documentation--basic', 'en', item); + await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en', item); await test.step('Verify active and normal states', async () => { await expect(page).toHaveScreenshot(); @@ -120,9 +120,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.KEYBOARD, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-documentation--basic', 'en'); - - await expect(locators.toggle(page, 0)).toHaveAttribute('tabindex', '0'); + await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en'); await test.step('Verify toggles tabindex', async () => { const count = await locators.toggle(page).count(); @@ -201,7 +199,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-documentation--basic', 'en'); + await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en'); await test.step('Verify item collapses by click on text', async () => { await locators.button(page, 0).click(); @@ -228,7 +226,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.KEYBOARD, '@accordion'], }, async ({ page, browserName }) => { - await loadPage(page, 'components-accordion-documentation--seo', 'en'); + await loadPage(page, 'stories/components/accordion/docs/examples/seo.tsx', 'en'); await expect(locators.collapse(page)).toHaveCount(3); await page.keyboard.press('Tab'); @@ -251,7 +249,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.KEYBOARD, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-documentation--one-section-opening', 'en'); + await loadPage(page, 'stories/components/accordion/docs/examples/one_section_opening.tsx', 'en'); await expect(locators.collapse(page)).toHaveCount(0); await page.keyboard.press('Tab'); @@ -275,7 +273,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-documentation--one-section-opening', 'en'); + await loadPage(page, 'stories/components/accordion/docs/examples/one_section_opening.tsx', 'en'); await expect(locators.collapse(page)).toHaveCount(0); await locators.toggle(page, 0).click(); @@ -294,7 +292,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-tests--button-on-toggle', 'en'); + await loadPage(page, 'stories/components/accordion/tests/examples/button-on-toggle.tsx', 'en'); await expect(locators.collapse(page)).toHaveCount(0); await locators.button(page, 0).click(); @@ -316,7 +314,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { tag: [TAG.PRIORITY_HIGH, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-tests--values', 'en'); + await loadPage(page, 'stories/components/accordion/tests/examples/values.tsx', 'en'); await expect(page.locator('[data-test-id="number"]')).toBeVisible(); await expect(page.locator('[data-test-id="string"]')).toBeVisible(); @@ -332,7 +330,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-tests--default-values', 'en'); + await loadPage(page, 'stories/components/accordion/tests/examples/default-values.tsx', 'en'); await expect(page.locator('[data-test-id="default-value"]')).toBeVisible(); }); @@ -342,7 +340,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.KEYBOARD, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-documentation--heading-tag', 'en'); + await loadPage(page, 'stories/components/accordion/docs/examples/heading_tag.tsx', 'en'); await page.keyboard.press('Tab'); await page.keyboard.press('Space'); @@ -361,7 +359,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-documentation--basic', 'en', { overflowHidden: false, defaultHeight: 'auto' }); + await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en', { overflowHidden: false, defaultHeight: 'auto' }); await expect(locators.collapse(page, 0)).toBeVisible(); @@ -380,7 +378,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { TAG.MOUSE, '@accordion'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-documentation--basic', 'en', { overflowHidden: true, defaultHeight: '100%' }); + await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en', { overflowHidden: true, defaultHeight: '100%' }); await expect(locators.collapse(page, 0)).toBeVisible(); @@ -400,7 +398,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { '@base-components', '@animation'], }, async ({ page }) => { - await loadPage(page, 'components-accordion-tests--accordion-animation', 'en'); + await loadPage(page, 'stories/components/accordion/tests/examples/accordion-collapse-duration.tsx', 'en'); const count = await locators.toggle(page).count(); for (let i = 0; i < count; i++) { diff --git a/stories/components/accordion/docs/Accordion.stories.tsx b/stories/components/accordion/docs/Accordion.stories.tsx index ab334692df..6066e692ca 100644 --- a/stories/components/accordion/docs/Accordion.stories.tsx +++ b/stories/components/accordion/docs/Accordion.stories.tsx @@ -43,7 +43,7 @@ export const Basic: StoryObj = { }, }, args: BasicExampleProps, - // play: playWrapper(BasicUsageTest), + play: playWrapper(BasicUsageTest), }; export const CustomStyles: Story = { diff --git a/tools/testing-utils/shared/helpers.ts b/tools/testing-utils/shared/helpers.ts index 170849376e..f939ea3af8 100644 --- a/tools/testing-utils/shared/helpers.ts +++ b/tools/testing-utils/shared/helpers.ts @@ -2,9 +2,15 @@ import type { Page } from 'playwright'; import { e2eStandToHtml } from '../e2e-stand'; -export async function loadPage(page: Page, id: string, lang: string, props = {}) { - // const htmlContent = await e2eStandToHtml(examplePath, lang, props); - // await page.setContent(htmlContent); +const stands = new Map(); - await page.goto(`/iframe.html?viewMode=story&id=${id}`); +export async function loadPage(page: Page, examplePath: string, lang: string, props?: Record) { + const key = `${examplePath}_${lang}_${props ? JSON.stringify(props) : ''}`; + const htmlContent = stands.get(key) ?? await e2eStandToHtml(examplePath, lang, props ?? {}); + + if (!stands.has(key)) { + stands.set(key, htmlContent); + } + + await page.setContent(htmlContent); }