From 5eb71b3fb8c17bacd028c577d65f6682a5ddc368 Mon Sep 17 00:00:00 2001 From: splincode Date: Thu, 12 Dec 2024 17:58:49 +0300 Subject: [PATCH] chore: slow operations on deep tests --- .../mobile-calendar/input-date.pw.spec.ts | 3 ++ .../tests/core/dropdown/dropdown.pw.spec.ts | 8 ++++ .../tests/core/hint/hint.pw.spec.ts | 4 +- .../tests/deep/deep-select.pw.spec.ts | 29 ++++++++++---- .../tests/deep/deep-toggle.pw.spec.ts | 17 +++++--- .../tests/demo/demo.pw.spec.ts | 4 +- .../dropdown-selection.pw.spec.ts | 4 ++ .../utils/is-flaky-examples.ts | 39 +++++++++++++------ 8 files changed, 80 insertions(+), 28 deletions(-) diff --git a/projects/demo-playwright/tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts b/projects/demo-playwright/tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts index 69a4e68e202f..d543ee5dacb8 100644 --- a/projects/demo-playwright/tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts +++ b/projects/demo-playwright/tests/addon-mobile/mobile-calendar/input-date.pw.spec.ts @@ -21,6 +21,7 @@ test.describe('InputDate and mobile user agent', () => { .click(); await page.waitForSelector('tui-mobile-calendar-dropdown', {state: 'visible'}); + await page.waitForTimeout(300); // safari flaky await expect(page).toHaveScreenshot('01-input-date-range-mobile-1.png'); @@ -49,6 +50,7 @@ test.describe('InputDate and mobile user agent', () => { .click(); await page.waitForSelector('tui-mobile-calendar-dropdown', {state: 'visible'}); + await page.waitForTimeout(300); // safari flaky await expect(page).toHaveScreenshot('02-input-date-range-mobile-1.png'); @@ -84,6 +86,7 @@ test.describe('InputDate and mobile user agent', () => { .click(); await page.waitForSelector('tui-mobile-calendar-dropdown', {state: 'visible'}); + await page.waitForTimeout(300); // safari flaky await expect(page).toHaveScreenshot('03-input-date-range-mobile-1.png'); diff --git a/projects/demo-playwright/tests/core/dropdown/dropdown.pw.spec.ts b/projects/demo-playwright/tests/core/dropdown/dropdown.pw.spec.ts index 30efc670b097..6c8a70db35ce 100644 --- a/projects/demo-playwright/tests/core/dropdown/dropdown.pw.spec.ts +++ b/projects/demo-playwright/tests/core/dropdown/dropdown.pw.spec.ts @@ -11,6 +11,7 @@ test.describe('Dropdown', () => { await example.scrollIntoViewIfNeeded(); await example.locator('button').click(); + await page.waitForTimeout(300); await expect(page).toHaveScreenshot('01-dropdown.png'); }); @@ -21,6 +22,7 @@ test.describe('Dropdown', () => { await example.scrollIntoViewIfNeeded(); await example.locator('input').click(); + await page.waitForTimeout(300); await expect(page).toHaveScreenshot('02-dropdown.png'); }); @@ -31,6 +33,7 @@ test.describe('Dropdown', () => { await example.scrollIntoViewIfNeeded(); await example.locator('input').click(); + await page.waitForTimeout(300); await expect(page).toHaveScreenshot('03-dropdown.png'); }); @@ -41,6 +44,7 @@ test.describe('Dropdown', () => { await example.scrollIntoViewIfNeeded(); await example.locator('button').click(); + await page.waitForTimeout(300); await expect(page).toHaveScreenshot('04-dropdown.png'); }); @@ -51,6 +55,7 @@ test.describe('Dropdown', () => { await example.scrollIntoViewIfNeeded(); await example.locator('button').click(); + await page.waitForTimeout(300); await expect(page).toHaveScreenshot('05-dropdown.png'); }); @@ -60,7 +65,9 @@ test.describe('Dropdown', () => { const example = new TuiDocumentationPagePO(page).getExample('#portal'); await example.scrollIntoViewIfNeeded(); + // eslint-disable-next-line playwright/no-force-option await example.locator('.t2').click({force: true}); + await page.waitForTimeout(300); await expect(page).toHaveScreenshot('13-dropdown.png'); }); @@ -123,6 +130,7 @@ test.describe('Dropdown', () => { await example.scrollIntoViewIfNeeded(); await example.locator('button').click(); + await page.waitForTimeout(300); expect(page.locator('tui-dropdown')).toBeDefined(); diff --git a/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts b/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts index 2c6906886803..734be6fc08bf 100644 --- a/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts +++ b/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts @@ -91,10 +91,10 @@ test.describe('TuiHint', () => { `03-hint-mode-${mode}-tuiHintShowDelay-1000-wait-500.png`, ); - await page.waitForTimeout(500); + await page.waitForTimeout(1500); await expect(page).toHaveScreenshot( - `03-hint-mode-${mode}-tuiHintShowDelay-1000-wait-1000.png`, + `03-hint-mode-${mode}-tuiHintShowDelay-1000-wait-more-1000.png`, ); }); }); 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 4b235d1e8fa9..dbe774a68547 100644 --- a/projects/demo-playwright/tests/deep/deep-select.pw.spec.ts +++ b/projects/demo-playwright/tests/deep/deep-select.pw.spec.ts @@ -1,3 +1,4 @@ +/* eslint-disable playwright/no-conditional-in-test */ import {DemoRoute} from '@demo/routes'; import {TuiDocumentationApiPagePO, tuiGoto, tuiMockImages} from '@demo-playwright/utils'; import {expect, test} from '@playwright/test'; @@ -10,7 +11,7 @@ test.describe('Deep / Select', () => { ); deepPaths.forEach((path) => - test(`${path}`, async ({page}) => { + test(`${path}`, async ({page, browserName}) => { await tuiMockImages(page); await tuiGoto(page, `${path}/API`); @@ -25,7 +26,6 @@ test.describe('Deep / Select', () => { const select = await api.getSelect(row); const name = await api.getNameProperty(row); - // eslint-disable-next-line playwright/no-conditional-in-test if (!select) { continue; } @@ -37,7 +37,11 @@ test.describe('Deep / Select', () => { await expect(select).toBeVisible(); await select.click(); - await api.waitTuiIcons(); + + // note: hello Safari + if (browserName === 'webkit') { + await page.waitForTimeout(200); + } const options = await api.getOptions(); @@ -47,19 +51,26 @@ test.describe('Deep / Select', () => { await api.focusOnBody(); await api.hideNotifications(); await api.waitStableState(); - await api.waitTuiIcons(); + + // note: hello Safari + if (browserName === 'webkit') { + await page.waitForTimeout(200); + } await expect(api.apiPageExample).toHaveScreenshot( `deep-${path}-${name}-row—${rowIndex}-select-option-${index}.png`, ); await select.click(); - await api.waitTuiIcons(); + + // note: hello Safari + if (browserName === 'webkit') { + await page.waitForTimeout(200); + } } const cleaner = await api.getCleaner(select); - // eslint-disable-next-line playwright/no-conditional-in-test if (cleaner) { await cleaner.click(); } else { @@ -69,7 +80,11 @@ test.describe('Deep / Select', () => { await api.waitStableState(); await api.focusOnBody(); - await api.waitTuiIcons(); + + // note: hello Safari + if (browserName === 'webkit') { + await page.waitForTimeout(200); + } } }), ); diff --git a/projects/demo-playwright/tests/deep/deep-toggle.pw.spec.ts b/projects/demo-playwright/tests/deep/deep-toggle.pw.spec.ts index a9b6dad02b17..3310a8aad5d8 100644 --- a/projects/demo-playwright/tests/deep/deep-toggle.pw.spec.ts +++ b/projects/demo-playwright/tests/deep/deep-toggle.pw.spec.ts @@ -1,3 +1,4 @@ +/* eslint-disable playwright/no-conditional-in-test */ import {TuiDocumentationApiPagePO, tuiGoto, tuiMockImages} from '@demo-playwright/utils'; import {expect, test} from '@playwright/test'; @@ -5,7 +6,7 @@ test.describe('Deep / Toggle', () => { const deepPaths: string[] = JSON.parse(process.env['DEMO_PATHS']!); deepPaths.forEach((path) => - test(`${path}`, async ({page}) => { + test(`${path}`, async ({page, browserName}) => { await tuiMockImages(page); await tuiGoto(page, `${path}/API`); @@ -20,7 +21,6 @@ test.describe('Deep / Toggle', () => { const toggle = await api.getToggle(row); const name = await api.getNameProperty(row); - // eslint-disable-next-line playwright/no-conditional-in-test if (!toggle) { continue; } @@ -31,17 +31,24 @@ test.describe('Deep / Toggle', () => { await expect(toggle).toBeVisible(); await toggle.click(); - await api.waitTuiIcons(); await api.hideNotifications(); await api.waitStableState(); - await page.waitForTimeout(100); + + // note: hello Safari + if (browserName === 'webkit') { + await page.waitForTimeout(300); + } await expect(api.apiPageExample).toHaveScreenshot( `deep-${path}-${name}-row-${rowIndex}-toggled.png`, ); await toggle.click(); - await api.waitTuiIcons(); + + // note: hello Safari + if (browserName === 'webkit') { + await page.waitForTimeout(200); + } } }), ); diff --git a/projects/demo-playwright/tests/demo/demo.pw.spec.ts b/projects/demo-playwright/tests/demo/demo.pw.spec.ts index 9663f13b4f83..90232ec79e3d 100644 --- a/projects/demo-playwright/tests/demo/demo.pw.spec.ts +++ b/projects/demo-playwright/tests/demo/demo.pw.spec.ts @@ -7,7 +7,7 @@ test.describe('Demo', () => { const demoPaths: string[] = JSON.parse(process.env['DEMO_PATHS']!); demoPaths.forEach((path) => { - test(`${path}`, async ({page}) => { + test(`${path}`, async ({page, browserName}) => { const documentation = new TuiDocumentationPagePO(page); await tuiMockImages(page); @@ -29,7 +29,7 @@ test.describe('Demo', () => { for (const [i, example] of examples.entries()) { // eslint-disable-next-line playwright/no-conditional-in-test - if (tuiIsFlakyExample(path, i)) { + if (tuiIsFlakyExample(path, i, browserName)) { continue; } 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 766d10f2ae7b..4c4a497795d0 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 @@ -15,6 +15,7 @@ test.describe('DropdownSelection', () => { 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'); @@ -24,17 +25,20 @@ 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'); await page.locator('button[tuiOption]').first().click(); await api.waitStableState(); + await page.waitForTimeout(300); // flaky in Safari await expect(page).toHaveScreenshot('04-dropdown-selection.png'); }); diff --git a/projects/demo-playwright/utils/is-flaky-examples.ts b/projects/demo-playwright/utils/is-flaky-examples.ts index b6c16669d588..4c3be2589784 100644 --- a/projects/demo-playwright/utils/is-flaky-examples.ts +++ b/projects/demo-playwright/utils/is-flaky-examples.ts @@ -1,26 +1,41 @@ import {DemoRoute} from '@demo/routes'; -const FLAKY_EXAMPLES = new Map([ +const FLAKY_EXAMPLES = new Map< + string, + Array<{exampleIndex: number; browserName?: string}> +>([ + [DemoRoute.AppBar, [{exampleIndex: 0, browserName: 'webkit'}]], // Flaky in safari, need to investigate a problem + [DemoRoute.Carousel, [{exampleIndex: 2, browserName: 'webkit'}]], // Flaky in safari, need to investigate a problem [ DemoRoute.Carousel, [ - 0, // [duration]="4000" - 3, // just button (to open dialog) + {exampleIndex: 0}, // [duration]="4000" + {exampleIndex: 3}, // just button (to open dialog) ], ], - [DemoRoute.IconsCustomization, [0]], // TODO: investigate flaky test - [DemoRoute.MultiSelect, [3]], // Imitating server response (timer(5000)) - [DemoRoute.Select, [4]], // Imitating server response (delay(3000)) - [DemoRoute.Stepper, [2]], // TODO: flaky test for proprietary demo (autoscroll problems) - [DemoRoute.TabBar, [3]], // Imitating server response (timer(3000)) - [DemoRoute.Table, [3, 4]], // Imitating server response (delay(3000)) and virtual scroll - [DemoRoute.Tiles, [0]], // YouTube iframe player + [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.RingChart, [{exampleIndex: 0, browserName: 'webkit'}]], // Flaky in safari, need to investigate a problem + [DemoRoute.Select, [{exampleIndex: 4}]], // Imitating server response (delay(3000)) + [DemoRoute.Stepper, [{exampleIndex: 2}]], // TODO: flaky test for proprietary demo (autoscroll problems) + [DemoRoute.TabBar, [{exampleIndex: 3}]], // Imitating server response (timer(3000)) + [DemoRoute.Table, [{exampleIndex: 3}, {exampleIndex: 4}]], // Imitating server response (delay(3000)) and virtual scroll + [DemoRoute.Tiles, [{exampleIndex: 0}]], // YouTube iframe player ]); -export function tuiIsFlakyExample(path: string, exampleIndex: number): boolean { +export function tuiIsFlakyExample( + path: string, + exampleIndex: number, + browserName: string, +): boolean { const exclusions = FLAKY_EXAMPLES.get(path) ?? []; - const excluded = !!exclusions?.includes(exampleIndex); + const excluded = !!exclusions.find( + (exclusion) => + exclusion.exampleIndex === exampleIndex && + (exclusion.browserName ? exclusion.browserName === browserName : true), + ); if (excluded) { console.info(`skip test for: ${path}[${exampleIndex}]`);