Skip to content

Commit 47698c8

Browse files
ghiscodingghiscoding
committed
chore: change key typing
1 parent f1bd0aa commit 47698c8

File tree

11 files changed

+91
-79
lines changed

11 files changed

+91
-79
lines changed

‎playwright/e2e/events.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,9 @@ test.describe('Events Demo', () => {
114114
].join('\n'),
115115
);
116116

117-
await page.locator('.ms-parent').click();
118-
await page.keyboard.press('Tab');
117+
const parentLoc = await page.locator('.ms-parent')
118+
await parentLoc.click();
119+
await parentLoc.press('Tab');
119120
await expect(textareaLoc).toHaveText(
120121
[
121122
'onAfterCreate event fire!',

‎playwright/e2e/example02.spec.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ test.describe('Example 02 - Multiple Select', () => {
1010
const parent1Span = await page.locator('div[data-test=select1] .ms-choice span');
1111

1212
await expect(parent1Span).toHaveText('February, April, May');
13-
await page.keyboard.press('ArrowDown');
13+
await parent1Span.press('ArrowDown');
1414
const juneLoc = await page.locator('div[data-test=select1] .ms-drop li:nth-of-type(6)');
1515
await expect(juneLoc).toHaveClass('highlighted');
1616
const juneLabelLoc = await juneLoc.locator('label');
@@ -19,13 +19,14 @@ test.describe('Example 02 - Multiple Select', () => {
1919
await expect(parent1Span).toHaveText('4 of 12 selected');
2020

2121
// go up until we reach "Select All" and use Space to press the option
22-
page.keyboard.press('ArrowUp');
23-
page.keyboard.press('ArrowUp');
24-
page.keyboard.press('ArrowUp');
25-
page.keyboard.press('ArrowUp');
26-
page.keyboard.press('ArrowUp');
27-
page.keyboard.press('ArrowUp');
28-
page.keyboard.press('Space');
22+
const listLoc1 = await page.locator('div[data-test=select1].ms-parent .ms-list');
23+
await listLoc1.press('ArrowUp');
24+
await listLoc1.press('ArrowUp');
25+
await listLoc1.press('ArrowUp');
26+
await listLoc1.press('ArrowUp');
27+
await listLoc1.press('ArrowUp');
28+
await listLoc1.press('ArrowUp');
29+
await listLoc1.press('Space');
2930
await expect(parent1Span).toHaveText('All selected');
3031
await page.getByRole('button', { name: 'All selected' }).click();
3132
});

‎playwright/e2e/example03.spec.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ test.describe('Example 03 - Multiple Width', () => {
1414
elm16 = await page.locator('div[data-test=select1] .ms-drop li:nth-of-type(16)');
1515
await elm16.focus();
1616
await expect(elm16).toHaveClass('multiple highlighted selected');
17-
await page.keyboard.press('ArrowUp');
18-
await page.keyboard.press('Space'); // unselect 15
17+
await elm16.press('ArrowUp');
18+
await elm16.press('Space'); // unselect 15
1919
let parent1Span = await page.locator('div[data-test=select1] .ms-choice span');
2020
await expect(parent1Span).toHaveText('16, 30');
21-
await page.keyboard.press('Enter'); // reselect 15
21+
await elm16.press('Enter'); // reselect 15
2222
parent1Span = await page.locator('div[data-test=select1] .ms-choice span');
2323
await page.getByRole('button', { name: '15, 16, 30' }).click();
2424
});
@@ -49,12 +49,12 @@ test.describe('Example 03 - Multiple Width', () => {
4949
await page.getByRole('button', { name: 'All selected' });
5050
const selectAllLoc = await page.locator('div[data-test=select2] .ms-drop .ms-select-all');
5151
await selectAllLoc.hover();
52-
await page.keyboard.press('ArrowDown'); // unselect Group 1
53-
await page.keyboard.press('Space');
52+
await selectAllLoc.press('ArrowDown'); // unselect Group 1
53+
await selectAllLoc.press('Space');
5454
let parent2Span = await page.locator('div[data-test=select2] .ms-choice span');
5555
await expect(parent2Span).toHaveText('10 of 15 selected');
56-
await page.keyboard.press('ArrowDown'); // unselect Group 1 -> 1st item
57-
await page.keyboard.press('Enter');
56+
await parent2Span.press('ArrowDown'); // unselect Group 1 -> 1st item
57+
await parent2Span.press('Enter');
5858
parent2Span = await page.locator('div[data-test=select2] .ms-choice span');
5959
await expect(parent2Span).toHaveText('11 of 15 selected');
6060
const group1item1Loc = await page.locator('[data-test=select2] .ms-drop li:nth-of-type(2) input');

‎playwright/e2e/options07.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ test.describe('Options 07 - Max Height Unit', () => {
1414
expect(dropHeight1).toBeLessThan(180);
1515

1616
await page.locator('#number').fill('6');
17-
page.keyboard.press('Enter');
17+
await page.locator('#number').press('Enter');
1818
await page.waitForTimeout(2);
1919

2020
dropElm1 = await page.locator('div[data-test="select1"] .ms-drop ul');
@@ -36,7 +36,7 @@ test.describe('Options 07 - Max Height Unit', () => {
3636
expect(dropHeight2).toBeLessThan(200);
3737

3838
await page.locator('#number').fill('5');
39-
page.keyboard.press('Enter');
39+
await page.locator('#number').press('Enter');
4040
await page.waitForTimeout(2);
4141

4242
dropElm2 = await page.locator('div[data-test="select2"] .ms-drop ul');

‎playwright/e2e/options22.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ test.describe('Options 22 - Filter By Data Length', () => {
88
await page.getByRole('option').filter({ hasText: 'abc' }).locator('label').click();
99

1010
await page.locator('[data-test="select2"].ms-parent').click();
11-
await page.getByRole('textbox', { name: '🔎︎' });
12-
await page.keyboard.type('g');
11+
await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('g');
1312
await page.getByText('[Select all]').first().click();
1413
await page.getByRole('button', { name: 'efg, fgh, ghi' }).click();
1514

‎playwright/e2e/options23.spec.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ test.describe('Options 23 - Custom Filter', () => {
44
test('filter starts with text', async ({ page }) => {
55
await page.goto('#/options23');
66
await page.locator('.ms-parent').click();
7-
await page.getByRole('textbox', { name: '🔎︎' });
8-
await page.keyboard.type('g');
7+
await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('g');
98
await page.getByRole('option', { name: 'ghi' }).click();
109
await page.getByRole('button', { name: 'ghi' }).click();
1110
let selectAllLoc = await page.locator('.ms-select-all .icon-checkbox-container div');
@@ -14,17 +13,15 @@ test.describe('Options 23 - Custom Filter', () => {
1413

1514
await page.getByLabel('Case Sensitive').check();
1615
await page.locator('.ms-parent').click();
17-
await page.getByRole('textbox', { name: '🔎︎' });
18-
await page.keyboard.type('g');
16+
await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('g');
1917
selectAllLoc = await page.locator('.ms-select-all .icon-checkbox-container div');
2018
await expect(selectAllLoc).toHaveClass('ms-icon ms-icon-check');
2119
await expect(page.locator('.ms-choice span')).toHaveText('ghi');
2220
await page.locator('.ms-parent').click();
2321

2422
// typing "G" shouldn't return anything but "No matches..."
2523
await page.locator('.ms-parent').click();
26-
await page.getByRole('textbox', { name: '🔎︎' });
27-
await page.keyboard.type('G');
24+
await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('G');
2825
await page.getByText('No matches found').click();
2926
});
3027
});

‎playwright/e2e/options25.spec.ts‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,31 +34,34 @@ test.describe('Options 25 - Show OK Button', () => {
3434
await page.getByRole('option', { name: 'April' }).click();
3535
await page.getByRole('option').filter({ hasText: 'March' }).locator('span').click();
3636
await page.getByRole('option').filter({ hasText: 'February' }).locator('span').click();
37+
const selectDropLoc1 = await page.locator('div[data-test=select1] .ms-drop');
3738
await expect(page.locator('div[data-test=select1] .ms-drop')).not.toBeHidden();
38-
await page.keyboard.press('Tab');
39+
await selectDropLoc1.press('Tab');
3940
await expect(page.locator('div[data-test=select1] .ms-ok-button')).toBeFocused();
40-
await page.keyboard.press('Shift+Tab');
41+
await selectDropLoc1.press('Shift+Tab');
4142
await expect(page.locator('div[data-test=select1] .ms-select-all input')).toBeFocused();
42-
await page.keyboard.press('Tab');
43-
await page.keyboard.press('Enter');
43+
await selectDropLoc1.press('Tab');
44+
await selectDropLoc1.press('Enter');
4445
await expect(page.locator('div[data-test=select1] .ms-drop')).toBeHidden();
4546

4647
// 3rd Select
48+
const selectDropLoc2 = await page.locator('div[data-test=select2] .ms-drop');
4749
await page.locator('[data-test=select3].ms-parent').click();
4850
await page.locator('div:nth-child(2) > label > .icon-checkbox-container').click();
49-
await page.keyboard.press('Tab');
51+
await selectDropLoc2.press('Tab');
5052
await expect(page.locator('div[data-test=select3] .ms-ok-button')).toBeFocused();
51-
await page.keyboard.press('Shift+Tab');
53+
await selectDropLoc2.press('Shift+Tab');
5254
await expect(page.locator('div[data-test=select3] .ms-search input')).toBeFocused();
53-
await page.keyboard.press('Tab');
54-
await page.keyboard.press('Enter');
55+
await selectDropLoc2.press('Tab');
56+
await selectDropLoc2.press('Enter');
5557
await expect(page.locator('div[data-test=select3] .ms-drop')).toBeHidden();
5658

5759
// 4th Select Enter key will close drop
60+
const selectDropLoc3 = await page.locator('div[data-test=select3] .ms-drop');
5861
await page.locator('[data-test=select4].ms-parent').click();
59-
await page.keyboard.press('ArrowDown');
60-
await page.keyboard.press('ArrowDown');
61-
await page.keyboard.press('Enter');
62+
await selectDropLoc3.press('ArrowDown');
63+
await selectDropLoc3.press('ArrowDown');
64+
await selectDropLoc3.press('Enter');
6265
await expect(page.locator('div[data-test=select4] .ms-drop')).toBeHidden();
6366
});
6467
});

‎playwright/e2e/options36.spec.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,11 @@ test.describe('Options 36 - Infinite Scroll', () => {
2121
// scroll completely to the end of the list & expect scrolling back to top
2222
await page.locator('[data-test="select1"].ms-parent').click();
2323
await ulElm1.evaluate(e => (e.scrollTop = e.scrollHeight));
24+
const selectDropLoc1 = await page.locator('div[data-test=select1] .ms-drop');
2425
const firstTitleLoc = await page.locator('div[data-test=select1] .ms-drop li:nth-of-type(1)');
2526
await expect(firstTitleLoc).toContainText('Title 1');
2627
await expect(firstTitleLoc).toHaveClass('hide-radio highlighted');
27-
await page.keyboard.press('Enter');
28+
await selectDropLoc1.press('Enter');
2829

2930
// -- 2nd Select
3031
await page.locator('[data-test=select2].ms-parent').click();
@@ -37,7 +38,8 @@ test.describe('Options 36 - Infinite Scroll', () => {
3738
await page.getByRole('button', { name: '5, 6' }).click();
3839

3940
// scroll to the middle and click 1003
40-
await page.locator('[data-test="select2"].ms-parent').click();
41+
const selectLoc2 = await page.locator('div[data-test=select2].ms-parent');
42+
await selectLoc2.click();
4143
await ulElm2.evaluate(e => (e.scrollTop = e.scrollHeight / 2));
4244
await page.locator('[data-test="select2"] .ms-drop label').filter({ hasText: '1003' }).click();
4345
await page.getByRole('button', { name: '5, 6, 1003' });
@@ -55,12 +57,12 @@ test.describe('Options 36 - Infinite Scroll', () => {
5557
await page.getByRole('button', { name: '5 of 2000 selected' });
5658

5759
// pressing arrow down until we reach the end will scroll back to top of the list
58-
page.keyboard.press('ArrowDown');
59-
page.keyboard.press('ArrowDown');
60-
page.keyboard.press('ArrowDown');
60+
selectLoc2.press('ArrowDown');
61+
selectLoc2.press('ArrowDown');
62+
selectLoc2.press('ArrowDown');
6163
await expect(await page.locator('[data-test="select2"] .ms-drop li[data-key=option_1999]')).toHaveClass('highlighted');
6264

63-
page.keyboard.press('ArrowDown'); // Task 1 (scrolled back to top)
65+
selectLoc2.press('ArrowDown'); // Task 1 (scrolled back to top)
6466

6567
const firstTaskLoc = await page.locator('div[data-test=select2] .ms-drop li:nth-of-type(1)');
6668
await expect(firstTaskLoc).toContainText('Task 1');

‎playwright/e2e/options37.spec.ts‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ test.describe('Option 37 - Navigation Highlight', () => {
55
await page.goto('#/options37');
66

77
// 1st select
8-
await page.locator('[data-test="select1"].ms-parent').click();
8+
const parentSelectLoc1 = await page.locator('[data-test="select1"].ms-parent');
9+
await parentSelectLoc1.click();
910
const optGroups = await page.locator('.group.hide-radio .optgroup.disabled');
1011
const liElms = await page.locator('div[data-test=select1] .option-level-1');
1112
await expect(optGroups).toBeDefined();
@@ -14,42 +15,45 @@ test.describe('Option 37 - Navigation Highlight', () => {
1415
await expect(optGroups.nth(0)).toContainText('Group 1');
1516
await expect(optGroups.nth(1)).toContainText('Group 2');
1617
await expect(optGroups.nth(2)).toContainText('Group 3');
17-
page.keyboard.press('ArrowDown');
18-
page.keyboard.press('ArrowDown');
19-
page.keyboard.press('Space');
18+
await parentSelectLoc1.press('ArrowDown');
19+
await parentSelectLoc1.press('ArrowDown');
20+
await parentSelectLoc1.press('Space');
2021
await expect(page.locator('[data-test=select1].ms-parent .ms-choice span')).toHaveText('Option 3');
2122
await expect(await page.locator('div[data-test=select1].ms-parent')).not.toHaveClass('ms-parent-open');
2223

2324
// 2nd select
24-
await page.locator('[data-test="select2"].ms-parent').click();
25-
page.keyboard.press('ArrowDown');
26-
page.keyboard.press('ArrowDown');
27-
page.keyboard.press('Space');
28-
page.keyboard.press('ArrowDown');
29-
page.keyboard.press('Enter');
25+
const parentSelectLoc2 = await page.locator('[data-test="select2"].ms-parent');
26+
await parentSelectLoc2.click();
27+
await parentSelectLoc2.press('ArrowDown');
28+
await parentSelectLoc2.press('ArrowDown');
29+
await parentSelectLoc2.press('Space');
30+
await parentSelectLoc2.press('ArrowDown');
31+
await parentSelectLoc2.press('Enter');
3032
await expect(page.locator('[data-test=select2].ms-parent .ms-choice span')).toHaveText('February, March');
3133
await page.locator('[data-test="select2"].ms-parent').click();
3234
await expect(await page.locator('div[data-test=select2].ms-parent')).not.toHaveClass('ms-parent-open');
3335

34-
// 3rd select
35-
await page.locator('[data-test="select3"].ms-parent').click();
36-
page.keyboard.press('ArrowDown');
37-
page.keyboard.press('Space');
36+
// // 3rd select
37+
const parentSelectLoc3 = await page.locator('[data-test="select3"].ms-parent');
38+
await parentSelectLoc3.click();
39+
await parentSelectLoc3.press('ArrowDown');
40+
await parentSelectLoc3.press('Space');
3841
await expect(page.locator('[data-test=select3].ms-parent .ms-choice span')).toHaveText('4 of 9 selected');
39-
page.keyboard.press('ArrowDown');
40-
page.keyboard.press('Enter');
42+
await parentSelectLoc3.press('ArrowDown');
43+
await parentSelectLoc3.press('Enter');
4144
await expect(page.locator('[data-test=select3].ms-parent .ms-choice span')).toHaveText('[Group 1: Option 1], [Group 2: Option 5, Option 6]');
42-
page.keyboard.press('ArrowUp');
43-
page.keyboard.press('Space');
45+
await parentSelectLoc3.press('ArrowUp');
46+
await parentSelectLoc3.press('Space');
4447
await expect(page.locator('[data-test=select3].ms-parent .ms-choice span')).toHaveText('4 of 9 selected');
4548
await expect(await page.locator('div[data-test=select3].ms-parent')).not.toHaveClass('ms-parent-open');
4649
await page.locator('[data-test="select3"].ms-parent').click();
4750

4851
// 4th select
49-
await page.locator('[data-test="select4"].ms-parent').click();
50-
page.keyboard.press('ArrowDown');
51-
page.keyboard.press('Enter');
52-
await page.keyboard.type('de');
52+
const parentSelectLoc4 = await page.locator('[data-test="select4"].ms-parent');
53+
await parentSelectLoc4.click();
54+
await parentSelectLoc4.press('ArrowDown');
55+
await parentSelectLoc4.press('Enter');
56+
await parentSelectLoc4.pressSequentially('de');
5357
await page.getByRole('option', { name: 'def' }).click();
5458
await page.getByRole('option', { name: 'cde' }).click();
5559
const selectAllLoc = await page.locator('[data-test=select4] .ms-select-all input[type=checkbox]');

‎playwright/e2e/options42.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ test.describe('Options 42 - Lazy Load Data', () => {
138138

139139
const placeholderLocator = await page.getByPlaceholder('filter placeholder');
140140
expect(placeholderLocator).toHaveCount(1);
141-
placeholderLocator.focus();
142-
await page.keyboard.type('april');
141+
await placeholderLocator.focus();
142+
await placeholderLocator.pressSequentially('april');
143143
select4LiElms = await page.locator('div[data-test=select4] li[role="option"]');
144144
await expect(select4LiElms).toHaveCount(1);
145145
await page.locator('div[data-test=select4].ms-parent').click();

0 commit comments

Comments
 (0)