Skip to content

Commit 6ccec2c

Browse files
aleksei-semikozovaleksei-semikozov
committed
Playwright - fix navigation test failures (list, stepper, tabs, scrollable, menu keyboard)
1 parent efd505a commit 6ccec2c

8 files changed

Lines changed: 93 additions & 22 deletions

File tree

‎e2e/testcafe-devextreme/playwright-helpers/createWidget.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Page } from '@playwright/test';
22

33
function serializeValue(value: unknown, depth = 0): string {
4-
if (depth > 10) return 'undefined';
4+
if (depth > 20) return 'undefined';
55
if (value === undefined) return 'undefined';
66
if (value === null) return 'null';
77
if (typeof value === 'function') {

‎e2e/testcafe-devextreme/playwright-helpers/themeUtils.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -98,15 +98,18 @@ async function takeScreenshotForTarget(
9898
element: Locator | string | null | undefined,
9999
name: string,
100100
screenshotOptions?: { maxDiffPixelRatio?: number },
101+
keepFocus = false,
101102
): Promise<void> {
102-
await page.evaluate(() => {
103-
(document.activeElement as HTMLElement)?.blur();
103+
await page.evaluate((shouldKeepFocus) => {
104+
if (!shouldKeepFocus) {
105+
(document.activeElement as HTMLElement)?.blur();
106+
}
104107
const licenseEls = document.querySelectorAll('dx-license');
105108
licenseEls.forEach((el) => {
106109
const btn = el.querySelector('div[style*="cursor: pointer"]') as HTMLElement | null;
107110
if (btn) btn.click();
108111
});
109-
});
112+
}, keepFocus);
110113

111114
const addedPadding = await simulateTestCafeScrollbar(page);
112115
if (addedPadding) {
@@ -137,13 +140,15 @@ export async function testScreenshot(
137140
theme?: string;
138141
shouldTestInCompact?: boolean;
139142
maxDiffPixelRatio?: number;
143+
keepFocus?: boolean;
140144
},
141145
): Promise<void> {
142146
const {
143147
element,
144148
theme,
145149
shouldTestInCompact = false,
146150
maxDiffPixelRatio,
151+
keepFocus = false,
147152
} = options ?? {};
148153

149154
const screenshotOptions = maxDiffPixelRatio !== undefined ? { maxDiffPixelRatio } : undefined;
@@ -152,12 +157,12 @@ export async function testScreenshot(
152157
await changeTheme(page, theme);
153158
}
154159

155-
await takeScreenshotForTarget(page, element, getScreenshotName(screenshotName, theme), screenshotOptions);
160+
await takeScreenshotForTarget(page, element, getScreenshotName(screenshotName, theme), screenshotOptions, keepFocus);
156161

157162
if (shouldTestInCompact) {
158163
const themeName = (theme ?? process.env.theme) ?? defaultThemeName;
159164
await changeTheme(page, `${themeName}.compact`);
160-
await takeScreenshotForTarget(page, element, getScreenshotName(screenshotName, `${themeName}.compact`), screenshotOptions);
165+
await takeScreenshotForTarget(page, element, getScreenshotName(screenshotName, `${themeName}.compact`), screenshotOptions, keepFocus);
161166
}
162167

163168
if (theme || shouldTestInCompact) {

‎e2e/testcafe-devextreme/playwright-tests/navigation/list/common.spec.ts‎

Lines changed: 66 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,48 @@ test.describe('List', () => {
5858
});
5959

6060
const list = new List(page);
61+
const firstItemCheckBox = list.getItem(0).checkBox;
62+
const secondItemCheckBox = list.getItem(1).checkBox;
63+
const thirdItemCheckBox = list.getItem(2).checkBox;
64+
const selectAllCheckBox = list.selectAll.checkBox;
65+
6166
await list.focus();
6267

63-
await page.keyboard.press('Tab');
68+
expect(await selectAllCheckBox.isFocused).toBe(true);
69+
70+
await page.keyboard.press('ArrowDown');
71+
expect(await selectAllCheckBox.isFocused).toBe(false);
72+
expect(await firstItemCheckBox.isFocused).toBe(true);
73+
74+
await page.keyboard.press('ArrowDown');
75+
expect(await firstItemCheckBox.isFocused).toBe(false);
76+
expect(await secondItemCheckBox.isFocused).toBe(true);
77+
6478
await page.keyboard.press('ArrowDown');
65-
await page.keyboard.press('Space');
79+
expect(await secondItemCheckBox.isFocused).toBe(false);
80+
expect(await thirdItemCheckBox.isFocused).toBe(true);
81+
82+
await page.keyboard.press('ArrowDown');
83+
expect(await thirdItemCheckBox.isFocused).toBe(false);
84+
expect(await selectAllCheckBox.isFocused).toBe(true);
85+
86+
await page.keyboard.press('ArrowDown');
87+
expect(await selectAllCheckBox.isFocused).toBe(false);
88+
expect(await firstItemCheckBox.isFocused).toBe(true);
89+
90+
await page.keyboard.press('ArrowUp');
91+
expect(await firstItemCheckBox.isFocused).toBe(false);
92+
93+
await page.keyboard.press('ArrowUp');
94+
expect(await thirdItemCheckBox.isFocused).toBe(true);
6695

67-
const items = list.getItems();
68-
expect(await items.nth(0).evaluate((el) => el.classList.contains('dx-list-item-selected'))).toBe(true);
96+
await page.keyboard.press('ArrowUp');
97+
expect(await thirdItemCheckBox.isFocused).toBe(false);
98+
expect(await secondItemCheckBox.isFocused).toBe(true);
99+
100+
await page.keyboard.press('Tab');
101+
expect(await selectAllCheckBox.isFocused).toBe(false);
102+
expect(await secondItemCheckBox.isFocused).toBe(false);
69103
});
70104

71105
test('Should save focused checkbox', async ({ page }) => {
@@ -76,14 +110,38 @@ test.describe('List', () => {
76110
});
77111

78112
const list = new List(page);
113+
const secondItemCheckBox = list.getItem(1).checkBox;
114+
const selectAllCheckBox = list.selectAll.checkBox;
115+
79116
await list.focus();
80117

81-
await page.keyboard.press('Tab');
118+
expect(await selectAllCheckBox.isFocused).toBe(true);
119+
120+
await page.keyboard.press('ArrowDown');
82121
await page.keyboard.press('ArrowDown');
83-
await page.keyboard.press('Space');
122+
expect(await secondItemCheckBox.isFocused).toBe(true);
123+
expect(await selectAllCheckBox.isFocused).toBe(false);
84124

85-
const firstItem = list.getItem(0);
86-
expect(await firstItem.checkBox.isChecked).toBe(true);
125+
await page.keyboard.press('Shift+Tab');
126+
expect(await secondItemCheckBox.isFocused).toBe(false);
127+
expect(await selectAllCheckBox.isFocused).toBe(false);
128+
129+
await page.keyboard.press('Tab');
130+
expect(await secondItemCheckBox.isFocused).toBe(true);
131+
expect(await selectAllCheckBox.isFocused).toBe(false);
132+
133+
await page.keyboard.press('ArrowUp');
134+
await page.keyboard.press('ArrowUp');
135+
expect(await selectAllCheckBox.isFocused).toBe(true);
136+
expect(await secondItemCheckBox.isFocused).toBe(false);
137+
138+
await page.keyboard.press('Shift+Tab');
139+
expect(await secondItemCheckBox.isFocused).toBe(false);
140+
expect(await selectAllCheckBox.isFocused).toBe(false);
141+
142+
await page.keyboard.press('Tab');
143+
expect(await selectAllCheckBox.isFocused).toBe(true);
144+
expect(await secondItemCheckBox.isFocused).toBe(false);
87145
});
88146

89147
test('Disabled item should be focused on tab press to match accessibility criteria', async ({ page }) => {

‎e2e/testcafe-devextreme/playwright-tests/navigation/menu/keyboard.spec.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,10 @@ test.describe('Menu_keyboard', () => {
3232
const menu = new Menu(page);
3333

3434
await menu.getItem(0).click();
35+
await page.locator('.dx-overlay-content.dx-context-menu').first().waitFor({ state: 'visible' });
3536
await page.keyboard.press('ArrowDown');
3637
await page.keyboard.press('ArrowRight');
38+
await page.waitForTimeout(300);
3739
await page.keyboard.press('ArrowDown');
3840

3941
const focusedElement = menu.getItem(2);
@@ -60,8 +62,10 @@ test.describe('Menu_keyboard', () => {
6062

6163
await page.locator('body').click();
6264
await menu.getItem(0).hover();
65+
await page.locator('.dx-overlay-content.dx-context-menu').first().waitFor({ state: 'visible' });
6366
await page.keyboard.press('ArrowDown');
6467
await page.keyboard.press('ArrowRight');
68+
await page.waitForTimeout(300);
6569
await page.keyboard.press('ArrowDown');
6670

6771
const focusedElement = menu.getItem(2);

‎e2e/testcafe-devextreme/playwright-tests/navigation/scrollable/scrollable.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ test.describe('Scrollable_ScrollToElement', () => {
9595
});
9696

9797
test(`ScrollToElement, element more container,direction=${direction}`, async ({ page }) => {
98+
test.setTimeout(120000);
9899

99100
const positions = [
100101
{ initialScrollOffset: { top: 0, left: 0 }, position: 'fromTLCorner' },

‎e2e/testcafe-devextreme/playwright-tests/navigation/scrollable/visibility.spec.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ test.describe('Scrollable_visibility_integration', () => {
4141

4242
const scrollable = new Scrollable(page, '#scrollable', { direction, useNative, useSimulatedScrollbar });
4343
await scrollable.scrollTo({ left: 10, top: 20 });
44+
await page.waitForTimeout(100);
4445

4546
const expectedScrollOffsetValue = { left: 10, top: 20 };
4647
await expect(await scrollable.scrollOffset()).eql(expectedScrollOffsetValue);
@@ -52,6 +53,7 @@ test.describe('Scrollable_visibility_integration', () => {
5253
await scrollable.scrollTo({ left: 0, top: 0 });
5354
await scrollable.show();
5455
await scrollable.triggerShownEvent();
56+
await page.waitForTimeout(100);
5557

5658
await expect(await scrollable.scrollOffset()).eql(expectedScrollOffsetValue);
5759
await testScreenshot(page, `Scroll position after show, useNative=${useNative},rtl=${rtlEnabled},useSimScrollbar=${useSimulatedScrollbar}.png`, { element: page.locator('#scrollable') });

‎e2e/testcafe-devextreme/playwright-tests/navigation/stepper/common.spec.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ test.describe('Stepper_common', () => {
146146
});
147147

148148
test('Stepper completed item states', async ({ page }) => {
149+
test.setTimeout(90000);
149150
await appendElementTo(page, '#container', 'div', 'stepper');
150151
await setAttribute(page, '#container', 'style', 'width: 800px; height: 150px;');
151152

@@ -162,17 +163,17 @@ test.describe('Stepper_common', () => {
162163
selectedIndex: 3,
163164
}, '#stepper');
164165

165-
const items = page.locator('#stepper .dx-stepper-item');
166+
const items = page.locator('#stepper .dx-step');
166167
await items.nth(3).click();
167168

168169
await page.keyboard.press('ArrowLeft');
169-
await testScreenshot(page, 'Completed invalid step focused.png', { element: '#stepper' });
170+
await testScreenshot(page, 'Completed invalid step focused.png', { element: '#stepper', keepFocus: true });
170171

171172
await page.keyboard.press('ArrowLeft');
172-
await testScreenshot(page, 'Completed valid step focused.png', { element: '#stepper' });
173+
await testScreenshot(page, 'Completed valid step focused.png', { element: '#stepper', keepFocus: true });
173174

174175
await page.keyboard.press('ArrowLeft');
175-
await testScreenshot(page, 'Completed step focused.png', { element: '#stepper' });
176+
await testScreenshot(page, 'Completed step focused.png', { element: '#stepper', keepFocus: true });
176177

177178
await page.locator('body').click({ position: { x: 0, y: 0 } });
178179
});

‎e2e/testcafe-devextreme/playwright-tests/navigation/tabs/common.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -171,24 +171,24 @@ test.describe('Tabs_common', () => {
171171
await testScreenshot(page, 'Tabs without focus.png', { element: '#tabs' });
172172

173173
await page.keyboard.press('Tab');
174-
await testScreenshot(page, 'Tabs item focused.png', { element: '#tabs' });
174+
await testScreenshot(page, 'Tabs item focused.png', { element: '#tabs', keepFocus: true });
175175

176176
await page.keyboard.press('ArrowRight');
177-
await testScreenshot(page, 'Tabs disabled item focused.png', { element: '#tabs' });
177+
await testScreenshot(page, 'Tabs disabled item focused.png', { element: '#tabs', keepFocus: true });
178178

179179
const thirdItem = page.locator(`.${TAB_CLASS}:nth-child(3)`);
180180
const fourthItem = page.locator(`.${TAB_CLASS}:nth-child(4)`);
181181

182182
await page.keyboard.press('ArrowRight');
183183
await thirdItem.dispatchEvent('mousedown');
184-
await testScreenshot(page, 'Tabs item active.png', { element: '#tabs' });
184+
await testScreenshot(page, 'Tabs item active.png', { element: '#tabs', keepFocus: true });
185185
await thirdItem.dispatchEvent('mouseup');
186186

187187
await thirdItem.click();
188188
await fourthItem.hover();
189189
await testScreenshot(page, 'Tabs item hovered.png', { element: '#tabs' });
190190

191-
await page.locator('body').click();
191+
await page.locator('body').click({ position: { x: 0, y: 0 } });
192192

193193
await thirdItem.hover();
194194
await testScreenshot(page, 'Tabs selected item hovered.png', { element: '#tabs' });

0 commit comments

Comments
 (0)