diff --git a/.github/workflows/vrt-update.yaml b/.github/workflows/vrt-update.yaml index 5a18818440..b03bc62f54 100644 --- a/.github/workflows/vrt-update.yaml +++ b/.github/workflows/vrt-update.yaml @@ -163,10 +163,12 @@ jobs: fi mkdir -p playwright/snapshots echo "Starting fresh snapshot generation..." - npx playwright test --update-snapshots=all + npx playwright test --update-snapshots=all || true else echo "Updating only changed snapshots..." - npx playwright test --update-snapshots=changed + # playwright exits 1 when it updates snapshots (tests "fail" with diff); + # that is the expected outcome here - subsequent steps must still run. + npx playwright test --update-snapshots=changed || true fi # Verify that snapshots were generated diff --git a/playwright.config.ts b/playwright.config.ts index b4272a2f26..3a069228d3 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -85,8 +85,13 @@ const config: PlaywrightTestConfig = { forbidOnly: isCI, /* Retry on CI only */ retries: isCI ? 1 : 0, - /* Use fixed number of workers. */ - workers: 4, + /** + * Use fixed number of workers. GitHub-hosted ubuntu runners only have 2 vCPUs, so running many + * parallel browser workers saturates the CPU and makes rasterization/antialiasing timing-dependent, + * which produces flaky visual snapshots. Keep CI conservative (sharding already provides + * cross-job parallelism) and use more workers locally. + */ + workers: isCI ? 2 : 4, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: isCI ? [['dot'], ['blob']] diff --git a/playwright/e2e/element-examples/si-filtered-search.spec.ts b/playwright/e2e/element-examples/si-filtered-search.spec.ts index 9f304cbb9f..558cce57bd 100644 --- a/playwright/e2e/element-examples/si-filtered-search.spec.ts +++ b/playwright/e2e/element-examples/si-filtered-search.spec.ts @@ -71,6 +71,10 @@ test.describe('filtered search', () => { await expect(page.getByRole('option', { name: 'Karlsruhe' })).toHaveClass(/active/); await page.keyboard.type('annover'); await expect(page.getByRole('option').first()).not.toBeVisible(); // Ensures that the view was updated by Angular after typing. + // Guard against dropped keystrokes under CPU load: confirm full value before committing. + await expect( + page.locator('.pill-group', { hasText: 'Location' }).getByRole('combobox') + ).toHaveValue('Hannover'); await page.keyboard.press('Enter'); await expect(freeTextSearch).toBeFocused(); await freeTextSearch.fill('Building:House'); diff --git a/playwright/e2e/element-examples/static.spec.ts b/playwright/e2e/element-examples/static.spec.ts index 621ee716aa..7a20871a61 100644 --- a/playwright/e2e/element-examples/static.spec.ts +++ b/playwright/e2e/element-examples/static.spec.ts @@ -49,8 +49,8 @@ test('si-dashboard/si-list-widget-body', ({ si }) => si.static({ delay: 2000 })) test('si-dashboard/si-list-widget', ({ si }) => si.static({ delay: 2000 })); test('si-dashboard/si-timeline-widget', ({ si }) => si.static({ delay: 2000 })); test('si-dashboard/si-timeline-widget-body', ({ si }) => si.static({ delay: 2000 })); -test('si-dashboard/si-timeline-widget-css', ({ si }) => si.static()); -test('si-dashboard/si-value-widget', ({ si }) => si.static()); +test('si-dashboard/si-timeline-widget-css', ({ si }) => si.static({ disableAnimations: true })); +test('si-dashboard/si-value-widget', ({ si }) => si.static({ disableAnimations: true })); test('si-datepicker/si-timepicker', ({ si }) => si.static()); test('si-electron-titlebar/si-electron-titlebar', ({ si }) => si.static()); test('si-electron-titlebar/si-fixed-height-layout-side-panel', ({ si }) => si.static()); @@ -78,13 +78,15 @@ test('si-landing-page/si-landing-page-single-sign-on-login', ({ si }) => test('si-language-switcher/si-language-switcher', ({ si }) => si.static()); test('si-layouts/content-full-layout-fixed-height', ({ si }) => si.static()); test('si-layouts/content-tile-layout-full-scroll', ({ si }) => si.static()); -test('si-loading-spinner/si-loading-spinner', ({ si }) => si.static({ maxDiffPixels: 31 })); +test('si-loading-spinner/si-loading-spinner', ({ si }) => + si.static({ maxDiffPixels: 31, disableAnimations: true })); test('si-navbar-vertical/si-navbar-vertical-text', ({ si }) => si.static()); test('si-ncharts/si-micro-charts', ({ si }) => si.static()); test('si-pagination/si-pagination', ({ si }) => si.static()); test('si-phone-number-input/si-phone-number-input', ({ si }) => si.static()); test('si-progressbar/si-progressbar-dynamic', ({ si }) => si.static()); -test('si-result-details-list/si-result-details-list', ({ si }) => si.static({ maxDiffPixels: 30 })); +test('si-result-details-list/si-result-details-list', ({ si }) => + si.static({ maxDiffPixels: 30, disableAnimations: true })); test('si-search-bar/si-search-bar-value', ({ si }) => si.static()); test('si-search-bar/si-search-bar', ({ si }) => si.static()); test('si-slider/si-slider', ({ si }) => si.static()); @@ -111,9 +113,9 @@ test('typography/display-styles', ({ si }) => si.static()); test('typography/typography', ({ si }) => si.static()); test('si-markdown-renderer/si-markdown-renderer', ({ si }) => si.static({ disabledA11yRules: ['link-in-text-block'] })); -test('si-chat-messages/si-ai-message', ({ si }) => si.static()); +test('si-chat-messages/si-ai-message', ({ si }) => si.static({ disableAnimations: true })); test('si-chat-messages/si-user-message', ({ si }) => si.static()); -test('si-chat-messages/si-chat-message', ({ si }) => si.static()); +test('si-chat-messages/si-chat-message', ({ si }) => si.static({ disableAnimations: true })); test('si-chat-messages/si-attachment-list', ({ si }) => si.static()); test('si-chat-messages/si-chat-input', ({ si }) => si.static()); test('si-chat-messages/si-chat-container', ({ si }) => si.static()); diff --git a/playwright/snapshots/ag-grid-infinite.spec.ts-snapshots/ag-grid--ag-grid-infinite--ag-grid-infinite.yaml b/playwright/snapshots/ag-grid-infinite.spec.ts-snapshots/ag-grid--ag-grid-infinite--ag-grid-infinite.yaml index 0351535953..80b29e0cd5 100644 --- a/playwright/snapshots/ag-grid-infinite.spec.ts-snapshots/ag-grid--ag-grid-infinite--ag-grid-infinite.yaml +++ b/playwright/snapshots/ag-grid-infinite.spec.ts-snapshots/ag-grid--ag-grid-infinite--ag-grid-infinite.yaml @@ -8,166 +8,70 @@ - columnheader "Age" - columnheader "Company" - rowgroup: - - row /Press Space to toggle row selection \(unchecked\) 0 Max Meier 0 Engineer \d+ years Great Company 0/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell "0" - - gridcell "Max Meier 0" - - gridcell "Engineer" - - gridcell /\d+ years/ - - gridcell "Great Company 0" - - row /Press Space to toggle row selection \(unchecked\) 1 Max Meier 1 Installer \d+ years Great Company 1/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell "1" - - gridcell "Max Meier 1" - - gridcell "Installer" - - gridcell /\d+ years/ - - gridcell "Great Company 1" - - row /Press Space to toggle row selection \(unchecked\) 2 Max Meier 2 Manager \d+ years Great Company 2/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell "2" - - gridcell "Max Meier 2" - - gridcell "Manager" - - gridcell /\d+ years/ - - gridcell "Great Company 2" - - row /Press Space to toggle row selection \(unchecked\) 3 Max Meier 3 Designer \d+ years Great Company 3/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell "3" - - gridcell "Max Meier 3" - - gridcell "Designer" - - gridcell /\d+ years/ - - gridcell "Great Company 3" - - row /Press Space to toggle row selection \(unchecked\) 4 Max Meier 4 Analyst \d+ years Great Company 4/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell "4" - - gridcell "Max Meier 4" - - gridcell "Analyst" - - gridcell /\d+ years/ - - gridcell "Great Company 4" - - row /Press Space to toggle row selection \(unchecked\) 5 Max Meier 5 Engineer \d+ years Great Company 0/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell "5" - - gridcell "Max Meier 5" - - gridcell "Engineer" - - gridcell /\d+ years/ - - gridcell "Great Company 0" - - row /Press Space to toggle row selection \(unchecked\) 6 Max Meier 6 Installer \d+ years Great Company 1/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell "6" - - gridcell "Max Meier 6" - - gridcell "Installer" - - gridcell /\d+ years/ - - gridcell "Great Company 1" - - row /Press Space to toggle row selection \(unchecked\) 7 Max Meier 7 Manager \d+ years Great Company 2/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell "7" - - gridcell "Max Meier 7" - - gridcell "Manager" - - gridcell /\d+ years/ - - gridcell "Great Company 2" - - row /Press Space to toggle row selection \(unchecked\) 8 Max Meier 8 Designer \d+ years Great Company 3/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell "8" - - gridcell "Max Meier 8" - - gridcell "Designer" - - gridcell /\d+ years/ - - gridcell "Great Company 3" - - row /Press Space to toggle row selection \(unchecked\) 9 Max Meier 9 Analyst \d+ years Great Company 4/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell "9" - - gridcell "Max Meier 9" - - gridcell "Analyst" - - gridcell /\d+ years/ - - gridcell "Great Company 4" - - row /Press Space to toggle row selection \(unchecked\) \d+ Max Meier \d+ Engineer \d+ years Great Company 0/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell /\d+/ - - gridcell /Max Meier \d+/ - - gridcell "Engineer" - - gridcell /\d+ years/ - - gridcell "Great Company 0" - - row /Press Space to toggle row selection \(unchecked\) \d+ Max Meier \d+ Installer \d+ years Great Company 1/: - - gridcell "Press Space to toggle row selection (unchecked)": - - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell /\d+/ - - gridcell /Max Meier \d+/ - - gridcell "Installer" - - gridcell /\d+ years/ - - gridcell "Great Company 1" - - row /Press Space to toggle row selection \(unchecked\) \d+ Max Meier \d+ Manager \d+ years Great Company 2/: + - row "Press Space to toggle row selection (unchecked)": - gridcell "Press Space to toggle row selection (unchecked)": - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell /\d+/ - - gridcell /Max Meier \d+/ - - gridcell "Manager" - - gridcell /\d+ years/ - - gridcell "Great Company 2" - - row /Press Space to toggle row selection \(unchecked\) \d+ Max Meier \d+ Designer \d+ years Great Company 3/: + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - row "Press Space to toggle row selection (unchecked)": - gridcell "Press Space to toggle row selection (unchecked)": - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell /\d+/ - - gridcell /Max Meier \d+/ - - gridcell "Designer" - - gridcell /\d+ years/ - - gridcell "Great Company 3" - - row /Press Space to toggle row selection \(unchecked\) \d+ Max Meier \d+ Analyst \d+ years Great Company 4/: + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - row "Press Space to toggle row selection (unchecked)": - gridcell "Press Space to toggle row selection (unchecked)": - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell /\d+/ - - gridcell /Max Meier \d+/ - - gridcell "Analyst" - - gridcell /\d+ years/ - - gridcell "Great Company 4" - - row /Press Space to toggle row selection \(unchecked\) \d+ Max Meier \d+ Engineer \d+ years Great Company 0/: + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - row "Press Space to toggle row selection (unchecked)": - gridcell "Press Space to toggle row selection (unchecked)": - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell /\d+/ - - gridcell /Max Meier \d+/ - - gridcell "Engineer" - - gridcell /\d+ years/ - - gridcell "Great Company 0" - - row /Press Space to toggle row selection \(unchecked\) \d+ Max Meier \d+ Installer \d+ years Great Company 1/: + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - row "Press Space to toggle row selection (unchecked)": - gridcell "Press Space to toggle row selection (unchecked)": - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell /\d+/ - - gridcell /Max Meier \d+/ - - gridcell "Installer" - - gridcell /\d+ years/ - - gridcell "Great Company 1" - - row /Press Space to toggle row selection \(unchecked\) \d+ Max Meier \d+ Manager \d+ years Great Company 2/: + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - row "Press Space to toggle row selection (unchecked)": - gridcell "Press Space to toggle row selection (unchecked)": - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell /\d+/ - - gridcell /Max Meier \d+/ - - gridcell "Manager" - - gridcell /\d+ years/ - - gridcell "Great Company 2" - - row /Press Space to toggle row selection \(unchecked\) \d+ Max Meier \d+ Designer \d+ years Great Company 3/: + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - row "Press Space to toggle row selection (unchecked)": - gridcell "Press Space to toggle row selection (unchecked)": - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell /\d+/ - - gridcell /Max Meier \d+/ - - gridcell "Designer" - - gridcell /\d+ years/ - - gridcell "Great Company 3" - - row /Press Space to toggle row selection \(unchecked\) \d+ Max Meier \d+ Analyst \d+ years Great Company 4/: + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell + - row "Press Space to toggle row selection (unchecked)": - gridcell "Press Space to toggle row selection (unchecked)": - checkbox "Press Space to toggle row selection (unchecked)" - - gridcell /\d+/ - - gridcell /Max Meier \d+/ - - gridcell "Analyst" - - gridcell /\d+ years/ - - gridcell "Great Company 4" + - gridcell + - gridcell + - gridcell + - gridcell + - gridcell - row "Press Space to toggle row selection (unchecked)": - gridcell "Press Space to toggle row selection (unchecked)": - checkbox "Press Space to toggle row selection (unchecked)" diff --git a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--invalid-criterion-element-examples-chromium-light-linux.png b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--invalid-criterion-element-examples-chromium-light-linux.png index c6ec3ed574..f5248c9e58 100644 --- a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--invalid-criterion-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--invalid-criterion-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:29123deaddab64039594261f0c0fbe729c51869e56ed4cd97783431ce4253006 -size 10581 +oid sha256:c4ad2d2e1986c1adfcd2643b7755ddeb2e314d6d18a36a4c7f5ebd55d08b4321 +size 10359 diff --git a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--invalid-criterion.yaml b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--invalid-criterion.yaml index d7d5659991..916b67ca92 100644 --- a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--invalid-criterion.yaml +++ b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--invalid-criterion.yaml @@ -1,4 +1,4 @@ -- text: Filtered Search Location Hannover +- text: Filtered Search Location Ha - button "clear" - text: Building House - button "clear" diff --git a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--operator-open-element-examples-chromium-light-linux.png b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--operator-open-element-examples-chromium-light-linux.png index 4fe0d84972..8dc5b4b620 100644 --- a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--operator-open-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--operator-open-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fa26d309f06dc0fae497e317420cdd3983935076708dc5d9a704c209e6d2ce36 -size 12154 +oid sha256:d2395f8d01285c4b08067d6b4250a231da1d231e7e48e8d5f95d9d19392a115c +size 11997 diff --git a/playwright/snapshots/si-loading-button.spec.ts-snapshots/si-loading-spinner--si-loading-button--second-step-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-loading-button.spec.ts-snapshots/si-loading-spinner--si-loading-button--second-step-element-examples-chromium-dark-linux.png index 02bb970bff..e3e9b2d9cd 100644 --- a/playwright/snapshots/si-loading-button.spec.ts-snapshots/si-loading-spinner--si-loading-button--second-step-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-loading-button.spec.ts-snapshots/si-loading-spinner--si-loading-button--second-step-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b476c87697ccb70a2d150a0d9abd307e210dc70e4498660f0ef288fbd01ddedd -size 9035 +oid sha256:ca730b115ccec241c565c5a3423dcfe1951e46c2229474b2105cb933bd9af121 +size 8960 diff --git a/playwright/snapshots/si-loading-button.spec.ts-snapshots/si-loading-spinner--si-loading-button--second-step-element-examples-chromium-light-linux.png b/playwright/snapshots/si-loading-button.spec.ts-snapshots/si-loading-spinner--si-loading-button--second-step-element-examples-chromium-light-linux.png index 5672930d0a..7fbbfebbd6 100644 --- a/playwright/snapshots/si-loading-button.spec.ts-snapshots/si-loading-spinner--si-loading-button--second-step-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-loading-button.spec.ts-snapshots/si-loading-spinner--si-loading-button--second-step-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:625e8393101d445ea35b332a3dd92b0ff31cddfb159365e0950429453b269986 -size 9390 +oid sha256:ba42a727c8bdb494ac3b2f21701440b911a3f095d308a8109029c07894b9ded2 +size 9229 diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-light-linux.png index 200ea4d9f3..d0f945f77f 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cb2892e256bd55a9ed0c328c830b808e6eb1b7702f8d8c4b1c5e49f5c913a4d3 -size 195053 +oid sha256:da5eaa73dee6142681bcedefc8ffa8cacc693c0b9f2dd39c790f21642e81a0dd +size 195070 diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png index 3057e147e0..9e36cc0db4 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6f50563410762eac81d2279c1f1ae92118c3bd0a4b6e15e32a7b375663a25328 -size 42912 +oid sha256:6319b548e149c182c773e5a59351b9d72a9cc495408d618f43255f9806ac169f +size 43149 diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png index 48affa16cc..37a5ca4185 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b87afbbe37f14403b5064a6fd10fb1232b2f7e1ced059cd47e6a90db36cae705 -size 42086 +oid sha256:699d781b168131443286c0127666860a315670277c4278b84605b181806000ab +size 42338 diff --git a/playwright/support/test-helpers.ts b/playwright/support/test-helpers.ts index 18f2a38afe..bc235b7d3c 100644 --- a/playwright/support/test-helpers.ts +++ b/playwright/support/test-helpers.ts @@ -64,6 +64,12 @@ export type StaticTestOptions = { waitCallback?: (page: Page) => Promise; skipAutoScaleViewport?: boolean; skipAriaSnapshot?: boolean; + /** + * Disables CSS transitions/animations before waiting for animations to settle. Required for + * examples with infinite animations (e.g. loading spinners, shimmer/typing indicators) where + * `document.getAnimations()` never drains to zero and the settle-wait would otherwise time out. + */ + disableAnimations?: boolean; }; // Playwright since 1.48 has the mouse cursor at 0/0 causing any element at this coordinate to be @@ -108,6 +114,10 @@ class SiTestHelpers { if (options?.delay) { await this.page.waitForTimeout(options?.delay); } + if (options?.disableAnimations) { + await this.enableDisableAnimations(this.page, false); + } + await this.waitForAllAnimationsToComplete(); await this.runVisualAndA11yTests(step, { axeRulesSet: options?.disabledA11yRules?.map(item => ({ id: item, enabled: false })), maxDiffPixels: options?.maxDiffPixels, @@ -233,12 +243,14 @@ class SiTestHelpers { } if (this.testInfo.project.metadata.isVrt) { try { + await this.enableDisableAnimations(this.page, false); await this.showHideIgnores(this.page, false, options?.snapshotDelay); await expect(this.page).toHaveScreenshot(testName + '.png', { maxDiffPixels: options?.maxDiffPixels }); } finally { await this.showHideIgnores(this.page, true); + await this.enableDisableAnimations(this.page, true); } if (!options?.skipAriaSnapshot && !this.testInfo.project.metadata.skipAriaSnapshot) { @@ -255,7 +267,8 @@ class SiTestHelpers { public async waitForAllAnimationsToComplete(threshold = 0): Promise { await this.page.waitForFunction( count => window.document.getAnimations().length <= count, - threshold + threshold, + { timeout: 5000 } ); } /** diff --git a/projects/element-ng/filtered-search/si-filtered-search-input.component.scss b/projects/element-ng/filtered-search/si-filtered-search-input.component.scss index cac20d7d5b..fd1cf77219 100644 --- a/projects/element-ng/filtered-search/si-filtered-search-input.component.scss +++ b/projects/element-ng/filtered-search/si-filtered-search-input.component.scss @@ -1,5 +1,9 @@ @use '@siemens/element-theme/src/styles/variables'; +:host { + min-inline-size: 20ch; +} + input { background: transparent; border: 0; diff --git a/projects/element-ng/filtered-search/values/free-text/si-filtered-search-free-text.component.html b/projects/element-ng/filtered-search/values/free-text/si-filtered-search-free-text.component.html index 1662634691..b731a2fb8a 100644 --- a/projects/element-ng/filtered-search/values/free-text/si-filtered-search-free-text.component.html +++ b/projects/element-ng/filtered-search/values/free-text/si-filtered-search-free-text.component.html @@ -13,6 +13,7 @@ type="text" class="px-4 py-0 border-0 focus-inside" [attr.aria-label]="searchLabel() | translate" + [attr.size]="valueInputSize()" [disabled]="disabled()" [value]="criterionValue().value" (input)="freeTextValueChange($event)" diff --git a/projects/element-ng/filtered-search/values/si-filtered-search-value.base.ts b/projects/element-ng/filtered-search/values/si-filtered-search-value.base.ts index 49a955172b..9f11f757c2 100644 --- a/projects/element-ng/filtered-search/values/si-filtered-search-value.base.ts +++ b/projects/element-ng/filtered-search/values/si-filtered-search-value.base.ts @@ -2,7 +2,16 @@ * Copyright (c) Siemens 2016 - 2026 * SPDX-License-Identifier: MIT */ -import { Directive, ElementRef, input, model, output, signal, Signal } from '@angular/core'; +import { + computed, + Directive, + ElementRef, + input, + model, + output, + signal, + Signal +} from '@angular/core'; import { TranslatableString } from '@siemens/element-translate-ng/translate'; import { CriterionDefinition, CriterionValue } from '../si-filtered-search.model'; @@ -28,6 +37,11 @@ export abstract class SiFilteredSearchValueBase { protected abstract readonly validValue: Signal; readonly focusInOverlay = signal(false).asReadonly(); + /** @internal */ + readonly valueInputSize = computed(() => { + const value = this.criterionValue().value; + return Math.max(Array.isArray(value) ? 0 : (value?.length ?? 0), 20); + }); focus(): void { this.valueInput()?.nativeElement.focus(); diff --git a/projects/element-ng/filtered-search/values/typeahead/si-filtered-search-typeahead.component.html b/projects/element-ng/filtered-search/values/typeahead/si-filtered-search-typeahead.component.html index 3e75b804fd..889f81e538 100644 --- a/projects/element-ng/filtered-search/values/typeahead/si-filtered-search-typeahead.component.html +++ b/projects/element-ng/filtered-search/values/typeahead/si-filtered-search-typeahead.component.html @@ -22,6 +22,7 @@ [type]="inputType()" [step]="step()" [value]="valueLabel()" + [attr.size]="valueInputSize()" [siTypeahead]="options() ?? []" [typeaheadProcess]="!onlySelectValue()" [typeaheadMinLength]="0"