diff --git a/projects/demo-playwright/tests/deep/deep-select.pw.spec.ts b/projects/demo-playwright/tests/deep/deep-select.pw.spec.ts index dbe774a68547..e510a7857caa 100644 --- a/projects/demo-playwright/tests/deep/deep-select.pw.spec.ts +++ b/projects/demo-playwright/tests/deep/deep-select.pw.spec.ts @@ -51,22 +51,14 @@ test.describe('Deep / Select', () => { await api.focusOnBody(); await api.hideNotifications(); await api.waitStableState(); - - // note: hello Safari - if (browserName === 'webkit') { - await page.waitForTimeout(200); - } + await page.waitForTimeout(200); await expect(api.apiPageExample).toHaveScreenshot( `deep-${path}-${name}-row—${rowIndex}-select-option-${index}.png`, ); await select.click(); - - // note: hello Safari - if (browserName === 'webkit') { - await page.waitForTimeout(200); - } + await page.waitForTimeout(200); } const cleaner = await api.getCleaner(select); @@ -80,11 +72,7 @@ test.describe('Deep / Select', () => { await api.waitStableState(); await api.focusOnBody(); - - // note: hello Safari - if (browserName === 'webkit') { - await page.waitForTimeout(200); - } + await page.waitForTimeout(200); } }), ); diff --git a/projects/demo-playwright/tests/kit/dropdown-selection/dropdown-selection.pw.spec.ts b/projects/demo-playwright/tests/kit/dropdown-selection/dropdown-selection.pw.spec.ts index 4c4a497795d0..1857e4941093 100644 --- a/projects/demo-playwright/tests/kit/dropdown-selection/dropdown-selection.pw.spec.ts +++ b/projects/demo-playwright/tests/kit/dropdown-selection/dropdown-selection.pw.spec.ts @@ -12,10 +12,11 @@ test.describe('DropdownSelection', () => { const example = api.getExample('#textarea'); await example.scrollIntoViewIfNeeded(); + await api.waitStableState(); + await page.waitForTimeout(500); // flaky in Safari + await example.locator('textarea').focus(); await page.keyboard.press('Control+ArrowLeft'); - await api.waitStableState(); - await page.waitForTimeout(300); // flaky in Safari await expect(page).toHaveScreenshot('01-dropdown-selection.png'); @@ -25,14 +26,12 @@ test.describe('DropdownSelection', () => { await page.keyboard.press('ArrowRight'); await page.keyboard.press('ArrowRight'); await api.waitStableState(); - await page.waitForTimeout(300); // flaky in Safari await expect(page).toHaveScreenshot('02-dropdown-selection.png'); await example.locator('textarea').fill(''); await example.locator('textarea').fill('@'); await api.waitStableState(); - await page.waitForTimeout(300); // flaky in Safari await expect(page).toHaveScreenshot('03-dropdown-selection.png'); diff --git a/projects/demo-playwright/tests/legacy/combo-box/combobox.pw.spec.ts b/projects/demo-playwright/tests/legacy/combo-box/combobox.pw.spec.ts index 700c696028b4..0eae9206cf2a 100644 --- a/projects/demo-playwright/tests/legacy/combo-box/combobox.pw.spec.ts +++ b/projects/demo-playwright/tests/legacy/combo-box/combobox.pw.spec.ts @@ -40,6 +40,8 @@ test.describe('ComboBox', () => { const comboBoxPO = new TuiComboBoxPO(apiPageExample); const textfield = comboBoxPO.textfield.first(); + await page.waitForTimeout(300); // safari flaky + await tuiGoto( page, `components/combo-box/API?strict=${strict}&sandboxExpanded=true`, diff --git a/projects/demo-playwright/tests/legacy/select/select.pw.spec.ts b/projects/demo-playwright/tests/legacy/select/select.pw.spec.ts index 08dde6201387..11bd0fd76f99 100644 --- a/projects/demo-playwright/tests/legacy/select/select.pw.spec.ts +++ b/projects/demo-playwright/tests/legacy/select/select.pw.spec.ts @@ -1,5 +1,5 @@ import {DemoRoute} from '@demo/routes'; -import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils'; +import {TuiDocumentationPagePO, tuiGoto, waitIcons} from '@demo-playwright/utils'; import {expect, test} from '@playwright/test'; import {TuiSelectPO} from '../../../utils/page-objects/select.po'; @@ -14,7 +14,7 @@ test.describe('Select', () => { documentationPage = new TuiDocumentationPagePO(page); }); - test('checkmark size', async () => { + test('checkmark size', async ({page}) => { const example = documentationPage.getExample('#template'); const select = new TuiSelectPO(example.locator('tui-select').first()); @@ -22,10 +22,15 @@ test.describe('Select', () => { await expect(select.dropdown).toBeVisible(); + await waitIcons({ + page, + icons: await example.locator('tui-icon >> visible=true').all(), + }); + await expect(example).toHaveScreenshot('01-checkmark-size.png'); }); - test('opens dropdown by click on icon', async () => { + test('opens dropdown by click on icon', async ({page}) => { const example = documentationPage.getExample('#base'); const select = new TuiSelectPO(example.locator('tui-select').last()); @@ -33,6 +38,11 @@ test.describe('Select', () => { await expect(select.dropdown).toBeVisible(); + await waitIcons({ + page, + icons: await example.locator('tui-icon >> visible=true').all(), + }); + await expect(select.dropdown).toHaveScreenshot('01-click-arrow.png'); }); }); diff --git a/projects/demo-playwright/utils/goto.ts b/projects/demo-playwright/utils/goto.ts index 9dd6a5e548f0..5a460206e614 100644 --- a/projects/demo-playwright/utils/goto.ts +++ b/projects/demo-playwright/utils/goto.ts @@ -4,6 +4,7 @@ import {expect} from '@playwright/test'; import {tuiRemoveElement} from './hide-element'; import {tuiMockDate} from './mock-date'; import {tuiWaitForFonts} from './wait-for-fonts'; +import {waitIcons} from './wait-icons'; import {waitStableState} from './wait-stable-state'; interface TuiGotoOptions extends NonNullable[1]> { @@ -62,6 +63,13 @@ export async function tuiGoto( await page.waitForLoadState('domcontentloaded'); await page.waitForLoadState('load'); await expect(app).toHaveClass(/_loaded/, {timeout: 30_000}); + + await waitIcons({ + page, + timeout: 200, + icons: await page.locator('tui-icon >> visible=true').all(), + }); + await tuiWaitForFonts(page); await waitStableState(app); diff --git a/projects/demo-playwright/utils/is-flaky-examples.ts b/projects/demo-playwright/utils/is-flaky-examples.ts index 2f7f0869f01b..3dbffbed11b8 100644 --- a/projects/demo-playwright/utils/is-flaky-examples.ts +++ b/projects/demo-playwright/utils/is-flaky-examples.ts @@ -17,6 +17,7 @@ const FLAKY_EXAMPLES = new Map< [DemoRoute.IconsCustomization, [{exampleIndex: 0}]], // TODO: investigate flaky test [DemoRoute.LegendItem, [{exampleIndex: 0, browserName: 'webkit'}]], // Flaky in safari, need to investigate a problem [DemoRoute.MultiSelect, [{exampleIndex: 3}]], // Imitating server response (timer(5000)) + [DemoRoute.Navigation, [{exampleIndex: 1, browserName: 'webkit'}]], [ DemoRoute.RingChart, [ diff --git a/projects/demo-playwright/utils/wait-icons.ts b/projects/demo-playwright/utils/wait-icons.ts index e58c5a914700..d19e8cb5ed59 100644 --- a/projects/demo-playwright/utils/wait-icons.ts +++ b/projects/demo-playwright/utils/wait-icons.ts @@ -4,10 +4,11 @@ interface Options { page: Page; icons: Locator[]; cache?: Set; + timeout?: number; } export async function waitIcons(options: Options): Promise { - const {page, icons, cache = new Set()} = options; + const {page, icons, cache = new Set(), timeout = 500} = options; // eslint-disable-next-line @taiga-ui/experience/no-simple-for-of for (const icon of icons) { @@ -28,7 +29,7 @@ export async function waitIcons(options: Options): Promise { if (url.endsWith('.svg') && !cache.has(url)) { try { - const response = await page.waitForResponse(url, {timeout: 500}); + const response = await page.waitForResponse(url, {timeout}); await response.finished(); } catch {