chore(deps): update Playwright to 1.56.1 (#433)

ghiscoding · caulfield · commit db56493d8e76 · 2025-10-21T19:44:36.000+02:00
* chore(deps): update Playwright to 1.56.1
diff --git a/package.json b/package.json
@@ -1,7 +1,6 @@
 {
   "name": "multiple-select-vanilla-root",
   "private": true,
-  "version": "0.0.0",
   "author": {
     "name": "zhixin wen",
     "email": "wenzhixin2010@gmail.com",
@@ -54,7 +53,7 @@
     "test:e2e:debug": "playwright test --config playwright/playwright.config.ts --ui --debug",
     "test:e2e:ui": "playwright test --config playwright/playwright.config.ts --ui",
     "test:report": "playwright show-report",
-    "playwright:install": "pnpm exec playwright install"
+    "playwright:install": "pnpm exec playwright install chromium"
   },
   "engines": {
     "node": "^20.17.0 || >=22.9.0",
@@ -65,7 +64,7 @@
     "@lerna-lite/cli": "^4.9.0",
     "@lerna-lite/publish": "^4.9.0",
     "@lerna-lite/watch": "^4.9.0",
-    "@playwright/test": "~1.52.0",
+    "@playwright/test": "^1.56.1",
     "@types/node": "^24.7.1",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "cross-env": "catalog:",
diff --git a/playwright/e2e/events.spec.ts b/playwright/e2e/events.spec.ts
@@ -114,8 +114,9 @@ test.describe('Events Demo', () => {
       ].join('\n'),
     );
 
-    await page.locator('.ms-parent').click();
-    await page.keyboard.press('Tab');
+    const parentLoc = await page.locator('.ms-parent')
+    await parentLoc.click();
+    await parentLoc.press('Tab');
     await expect(textareaLoc).toHaveText(
       [
         'onAfterCreate event fire!',
diff --git a/playwright/e2e/example02.spec.ts b/playwright/e2e/example02.spec.ts
@@ -10,21 +10,23 @@ test.describe('Example 02 - Multiple Select', () => {
     const parent1Span = await page.locator('div[data-test=select1] .ms-choice span');
 
     await expect(parent1Span).toHaveText('February, April, May');
-    await page.keyboard.press('ArrowDown');
+    await parent1Span.press('ArrowDown');
     const juneLoc = await page.locator('div[data-test=select1] .ms-drop li:nth-of-type(6)');
     await expect(juneLoc).toHaveClass('highlighted');
-    await expect(await juneLoc.locator('label')).toHaveText('June');
-    await page.keyboard.press('Enter');
+    const juneLabelLoc = await juneLoc.locator('label');
+    await expect(juneLabelLoc).toHaveText('June');
+    await juneLabelLoc.press('Enter');
     await expect(parent1Span).toHaveText('4 of 12 selected');
 
     // go up until we reach "Select All" and use Space to press the option
-    page.keyboard.press('ArrowUp');
-    page.keyboard.press('ArrowUp');
-    page.keyboard.press('ArrowUp');
-    page.keyboard.press('ArrowUp');
-    page.keyboard.press('ArrowUp');
-    page.keyboard.press('ArrowUp');
-    page.keyboard.press('Space');
+    const listLoc1 = await page.locator('div[data-test=select1].ms-parent .ms-list');
+    await listLoc1.press('ArrowUp');
+    await listLoc1.press('ArrowUp');
+    await listLoc1.press('ArrowUp');
+    await listLoc1.press('ArrowUp');
+    await listLoc1.press('ArrowUp');
+    await listLoc1.press('ArrowUp');
+    await listLoc1.press('Space');
     await expect(parent1Span).toHaveText('All selected');
     await page.getByRole('button', { name: 'All selected' }).click();
   });
diff --git a/playwright/e2e/example03.spec.ts b/playwright/e2e/example03.spec.ts
@@ -14,11 +14,11 @@ test.describe('Example 03 - Multiple Width', () => {
     elm16 = await page.locator('div[data-test=select1] .ms-drop li:nth-of-type(16)');
     await elm16.focus();
     await expect(elm16).toHaveClass('multiple highlighted selected');
-    await page.keyboard.press('ArrowUp');
-    await page.keyboard.press('Space'); // unselect 15
+    await elm16.press('ArrowUp');
+    await elm16.press('Space'); // unselect 15
     let parent1Span = await page.locator('div[data-test=select1] .ms-choice span');
     await expect(parent1Span).toHaveText('16, 30');
-    await page.keyboard.press('Enter'); // reselect 15
+    await elm16.press('Enter'); // reselect 15
     parent1Span = await page.locator('div[data-test=select1] .ms-choice span');
     await page.getByRole('button', { name: '15, 16, 30' }).click();
   });
@@ -49,12 +49,12 @@ test.describe('Example 03 - Multiple Width', () => {
     await page.getByRole('button', { name: 'All selected' });
     const selectAllLoc = await page.locator('div[data-test=select2] .ms-drop .ms-select-all');
     await selectAllLoc.hover();
-    await page.keyboard.press('ArrowDown'); // unselect Group 1
-    await page.keyboard.press('Space');
+    await selectAllLoc.press('ArrowDown'); // unselect Group 1
+    await selectAllLoc.press('Space');
     let parent2Span = await page.locator('div[data-test=select2] .ms-choice span');
     await expect(parent2Span).toHaveText('10 of 15 selected');
-    await page.keyboard.press('ArrowDown'); // unselect Group 1 -> 1st item
-    await page.keyboard.press('Enter');
+    await parent2Span.press('ArrowDown'); // unselect Group 1 -> 1st item
+    await parent2Span.press('Enter');
     parent2Span = await page.locator('div[data-test=select2] .ms-choice span');
     await expect(parent2Span).toHaveText('11 of 15 selected');
     const group1item1Loc = await page.locator('[data-test=select2] .ms-drop li:nth-of-type(2) input');
diff --git a/playwright/e2e/example16.spec.ts b/playwright/e2e/example16.spec.ts
@@ -5,21 +5,23 @@ test.describe('Example 16 - Avatar Images as Text Template', () => {
     await page.goto('#/example16');
 
     // 1st select
-    await page.locator('.ms-parent[data-test=select1]').click();
-    await page.keyboard.press('ArrowDown');
-    await page.keyboard.press('ArrowDown');
-    await page.keyboard.press('Enter');
+    const parentSelect1 = await page.locator('.ms-parent[data-test=select1]');
+    await parentSelect1.click();
+    await parentSelect1.press('ArrowDown');
+    await parentSelect1.press('ArrowDown');
+    await parentSelect1.press('Enter');
     const parentSpan1 = await page.locator('.ms-parent[data-test=select1] .ms-choice span');
     expect(parentSpan1).toHaveText('Erika');
     await expect(parentSpan1.locator('img').getByAltText('image3')).toBeDefined();
     await expect(parentSpan1.locator('img')).toHaveAttribute('src', /examples\/images\/avatar3.png/gi);
     await expect(page.locator('div[data-test=select1] .ms-drop')).toBeHidden();
 
     // 2nd select
-    await page.locator('.ms-parent[data-test=select2]').click();
-    await page.keyboard.press('ArrowDown');
-    await page.keyboard.press('ArrowDown');
-    await page.keyboard.press('Enter');
+    const parentSelect2 = await page.locator('.ms-parent[data-test=select2]');
+    await parentSelect2.click();
+    await parentSelect2.press('ArrowDown');
+    await parentSelect2.press('ArrowDown');
+    await parentSelect2.press('Enter');
     const parentSpan2 = await page.locator('.ms-parent[data-test=select2] .ms-choice span');
     expect(await parentSpan2.locator('.name-section')).toHaveText('Erika');
     expect(await parentSpan2.locator('.job-section')).toHaveText('Designer');
diff --git a/playwright/e2e/options07.spec.ts b/playwright/e2e/options07.spec.ts
@@ -14,7 +14,7 @@ test.describe('Options 07 - Max Height Unit', () => {
     expect(dropHeight1).toBeLessThan(180);
 
     await page.locator('#number').fill('6');
-    page.keyboard.press('Enter');
+    await page.locator('#number').press('Enter');
     await page.waitForTimeout(2);
 
     dropElm1 = await page.locator('div[data-test="select1"] .ms-drop ul');
@@ -36,7 +36,7 @@ test.describe('Options 07 - Max Height Unit', () => {
     expect(dropHeight2).toBeLessThan(200);
 
     await page.locator('#number').fill('5');
-    page.keyboard.press('Enter');
+    await page.locator('#number').press('Enter');
     await page.waitForTimeout(2);
 
     dropElm2 = await page.locator('div[data-test="select2"] .ms-drop ul');
diff --git a/playwright/e2e/options20.spec.ts b/playwright/e2e/options20.spec.ts
@@ -6,8 +6,8 @@ test.describe('Options 20 - Filter Placeholder', () => {
     await page.getByRole('button').click();
     const placeholderLocator = await page.getByPlaceholder('The filter placeholder');
     expect(placeholderLocator).toHaveCount(1);
-    placeholderLocator.focus();
-    await page.keyboard.type('de');
+    await placeholderLocator.focus();
+    await placeholderLocator.pressSequentially('de');
     await page.getByRole('option', { name: 'def' }).click();
     await page.getByRole('option', { name: 'cde' }).click();
     const selectAllLoc = await page.locator('.ms-select-all .icon-checkbox-container div');
diff --git a/playwright/e2e/options21.spec.ts b/playwright/e2e/options21.spec.ts
@@ -4,17 +4,15 @@ test.describe('Options 21 - Filter Accept On Enter', () => {
   test('select drop filter has a placeholder text', async ({ page }) => {
     await page.goto('#/options21');
     await page.locator('[data-test=select1].ms-parent').click();
-    await page.getByRole('textbox', { name: '🔎︎' });
-    await page.keyboard.type('ef');
-    await expect(page.locator('.ms-drop li.hide-radio')).toHaveCount(2);
-    await page.keyboard.press('Enter');
-    await expect(page.locator('[data-test=select1] .ms-choice span')).toHaveText('def');
+    await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('ef');
+    await expect(await page.locator('.ms-drop li.hide-radio')).toHaveCount(2);
+    await page.getByRole('textbox').press('Enter');
+    await expect(await page.locator('[data-test=select1] .ms-choice span')).toHaveText('def');
 
     await page.locator('[data-test=select2].ms-parent').click();
-    await page.getByRole('textbox', { name: '🔎︎' });
-    await page.keyboard.type('g');
-    await expect(page.locator('.ms-drop li.hide-radio')).toHaveCount(2);
-    await page.keyboard.press('Enter');
-    await expect(page.locator('[data-test=select2] .ms-choice span')).toHaveText('efg, fgh, ghi');
+    await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('g');
+    await expect(await page.locator('.ms-drop li.hide-radio')).toHaveCount(2);
+    await page.getByRole('textbox').press('Enter');
+    await expect(await page.locator('[data-test=select2] .ms-choice span')).toHaveText('efg, fgh, ghi');
   });
 });
diff --git a/playwright/e2e/options22.spec.ts b/playwright/e2e/options22.spec.ts
@@ -8,8 +8,7 @@ test.describe('Options 22 - Filter By Data Length', () => {
     await page.getByRole('option').filter({ hasText: 'abc' }).locator('label').click();
 
     await page.locator('[data-test="select2"].ms-parent').click();
-    await page.getByRole('textbox', { name: '🔎︎' });
-    await page.keyboard.type('g');
+    await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('g');
     await page.getByText('[Select all]').first().click();
     await page.getByRole('button', { name: 'efg, fgh, ghi' }).click();
 
diff --git a/playwright/e2e/options23.spec.ts b/playwright/e2e/options23.spec.ts
@@ -4,8 +4,7 @@ test.describe('Options 23 - Custom Filter', () => {
   test('filter starts with text', async ({ page }) => {
     await page.goto('#/options23');
     await page.locator('.ms-parent').click();
-    await page.getByRole('textbox', { name: '🔎︎' });
-    await page.keyboard.type('g');
+    await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('g');
     await page.getByRole('option', { name: 'ghi' }).click();
     await page.getByRole('button', { name: 'ghi' }).click();
     let selectAllLoc = await page.locator('.ms-select-all .icon-checkbox-container div');
@@ -14,17 +13,15 @@ test.describe('Options 23 - Custom Filter', () => {
 
     await page.getByLabel('Case Sensitive').check();
     await page.locator('.ms-parent').click();
-    await page.getByRole('textbox', { name: '🔎︎' });
-    await page.keyboard.type('g');
+    await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('g');
     selectAllLoc = await page.locator('.ms-select-all .icon-checkbox-container div');
     await expect(selectAllLoc).toHaveClass('ms-icon ms-icon-check');
     await expect(page.locator('.ms-choice span')).toHaveText('ghi');
     await page.locator('.ms-parent').click();
 
     // typing "G" shouldn't return anything but "No matches..."
     await page.locator('.ms-parent').click();
-    await page.getByRole('textbox', { name: '🔎︎' });
-    await page.keyboard.type('G');
+    await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('G');
     await page.getByText('No matches found').click();
   });
 });
diff --git a/playwright/e2e/options25.spec.ts b/playwright/e2e/options25.spec.ts
@@ -34,31 +34,34 @@ test.describe('Options 25 - Show OK Button', () => {
     await page.getByRole('option', { name: 'April' }).click();
     await page.getByRole('option').filter({ hasText: 'March' }).locator('span').click();
     await page.getByRole('option').filter({ hasText: 'February' }).locator('span').click();
+    const selectDropLoc1 = await page.locator('div[data-test=select1] .ms-drop');
     await expect(page.locator('div[data-test=select1] .ms-drop')).not.toBeHidden();
-    await page.keyboard.press('Tab');
+    await selectDropLoc1.press('Tab');
     await expect(page.locator('div[data-test=select1] .ms-ok-button')).toBeFocused();
-    await page.keyboard.press('Shift+Tab');
+    await selectDropLoc1.press('Shift+Tab');
     await expect(page.locator('div[data-test=select1] .ms-select-all input')).toBeFocused();
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Enter');
+    await selectDropLoc1.press('Tab');
+    await selectDropLoc1.press('Enter');
     await expect(page.locator('div[data-test=select1] .ms-drop')).toBeHidden();
 
     // 3rd Select
+    const selectDropLoc2 = await page.locator('div[data-test=select2] .ms-drop');
     await page.locator('[data-test=select3].ms-parent').click();
     await page.locator('div:nth-child(2) > label > .icon-checkbox-container').click();
-    await page.keyboard.press('Tab');
+    await selectDropLoc2.press('Tab');
     await expect(page.locator('div[data-test=select3] .ms-ok-button')).toBeFocused();
-    await page.keyboard.press('Shift+Tab');
+    await selectDropLoc2.press('Shift+Tab');
     await expect(page.locator('div[data-test=select3] .ms-search input')).toBeFocused();
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Enter');
+    await selectDropLoc2.press('Tab');
+    await selectDropLoc2.press('Enter');
     await expect(page.locator('div[data-test=select3] .ms-drop')).toBeHidden();
 
     // 4th Select Enter key will close drop
+    const selectDropLoc3 = await page.locator('div[data-test=select3] .ms-drop');
     await page.locator('[data-test=select4].ms-parent').click();
-    await page.keyboard.press('ArrowDown');
-    await page.keyboard.press('ArrowDown');
-    await page.keyboard.press('Enter');
+    await selectDropLoc3.press('ArrowDown');
+    await selectDropLoc3.press('ArrowDown');
+    await selectDropLoc3.press('Enter');
     await expect(page.locator('div[data-test=select4] .ms-drop')).toBeHidden();
   });
 });
diff --git a/playwright/e2e/options26.spec.ts b/playwright/e2e/options26.spec.ts
@@ -28,7 +28,7 @@ test.describe('Options 26 - The Styler / CSS Styler', () => {
     optionLoc3.click();
     expect(optionLoc3).toHaveText('Option 3');
     await expect(optionLoc3).toHaveCSS('color', 'rgb(128, 0, 128)');
-    await expect(optionLoc3).toHaveCSS('text-decoration', 'underline solid rgb(128, 0, 128)');
+    await expect(optionLoc3).toHaveCSS('text-decoration', 'underline');
     const dropLoc2 = await page.locator('[data-test=select4] .ms-choice span', { hasText: '[Group 1: Option 3]' });
     await dropLoc2.waitFor();
   });
diff --git a/playwright/e2e/options36.spec.ts b/playwright/e2e/options36.spec.ts
@@ -21,10 +21,11 @@ test.describe('Options 36 - Infinite Scroll', () => {
     // scroll completely to the end of the list & expect scrolling back to top
     await page.locator('[data-test="select1"].ms-parent').click();
     await ulElm1.evaluate(e => (e.scrollTop = e.scrollHeight));
+    const selectDropLoc1 = await page.locator('div[data-test=select1] .ms-drop');
     const firstTitleLoc = await page.locator('div[data-test=select1] .ms-drop li:nth-of-type(1)');
     await expect(firstTitleLoc).toContainText('Title 1');
     await expect(firstTitleLoc).toHaveClass('hide-radio highlighted');
-    await page.keyboard.press('Enter');
+    await selectDropLoc1.press('Enter');
 
     // -- 2nd Select
     await page.locator('[data-test=select2].ms-parent').click();
@@ -37,7 +38,8 @@ test.describe('Options 36 - Infinite Scroll', () => {
     await page.getByRole('button', { name: '5, 6' }).click();
 
     // scroll to the middle and click 1003
-    await page.locator('[data-test="select2"].ms-parent').click();
+    const selectLoc2 = await page.locator('div[data-test=select2].ms-parent');
+    await selectLoc2.click();
     await ulElm2.evaluate(e => (e.scrollTop = e.scrollHeight / 2));
     await page.locator('[data-test="select2"] .ms-drop label').filter({ hasText: '1003' }).click();
     await page.getByRole('button', { name: '5, 6, 1003' });
@@ -55,12 +57,12 @@ test.describe('Options 36 - Infinite Scroll', () => {
     await page.getByRole('button', { name: '5 of 2000 selected' });
 
     // pressing arrow down until we reach the end will scroll back to top of the list
-    page.keyboard.press('ArrowDown');
-    page.keyboard.press('ArrowDown');
-    page.keyboard.press('ArrowDown');
+    selectLoc2.press('ArrowDown');
+    selectLoc2.press('ArrowDown');
+    selectLoc2.press('ArrowDown');
     await expect(await page.locator('[data-test="select2"] .ms-drop li[data-key=option_1999]')).toHaveClass('highlighted');
 
-    page.keyboard.press('ArrowDown'); // Task 1 (scrolled back to top)
+    selectLoc2.press('ArrowDown'); // Task 1 (scrolled back to top)
 
     const firstTaskLoc = await page.locator('div[data-test=select2] .ms-drop li:nth-of-type(1)');
     await expect(firstTaskLoc).toContainText('Task 1');
diff --git a/playwright/e2e/options37.spec.ts b/playwright/e2e/options37.spec.ts
diff --git a/playwright/e2e/options42.spec.ts b/playwright/e2e/options42.spec.ts
diff --git a/playwright/e2e/options43.spec.ts b/playwright/e2e/options43.spec.ts
diff --git a/playwright/playwright.config.ts b/playwright/playwright.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
