chore: upgrade playwright to 1.48.2

.github/workflows/unit-tests.yml

@@ -43,7 +43,7 @@ jobs:
         run: yarn --frozen-lockfile --no-progress --non-interactive
 
       - name: Install Playwright
-        run: npx playwright install-deps firefox
+        run: npx playwright install firefox --with-deps
 
       - name: Test
         run: yarn test:firefox
@@ -65,7 +65,7 @@ jobs:
         run: yarn --frozen-lockfile --no-progress --non-interactive
 
       - name: Install Playwright
-        run: npx playwright install-deps webkit
+        run: npx playwright install webkit --with-deps
 
       - name: Test
         run: yarn test:webkit

package.json

@@ -69,6 +69,9 @@
     "stylelint-config-vaadin": "^1.0.0-alpha.2",
     "typescript": "^5.5.2"
   },
+  "resolutions": {
+     "playwright": "^1.48.2"
+  },
   "lint-staged": {
     "*.{js,ts}": [
       "eslint --fix",

packages/checkbox-group/test/checkbox-group.common.js

@@ -258,12 +258,18 @@ describe('vaadin-checkbox-group', () => {
   });
 
   describe('focused attribute', () => {
+    let firstGlobalFocusable;
+
     beforeEach(async () => {
-      group = fixtureSync(`
-        <vaadin-checkbox-group>
-          <vaadin-checkbox value="1" label="Checkbox 1"></vaadin-checkbox>
-        </vaadin-checkbox-group>
-      `);
+      [firstGlobalFocusable, group] = fixtureSync(
+        `<div>
+          <input id="first-global-focusable" />
+          <vaadin-checkbox-group>
+            <vaadin-checkbox value="1" label="Checkbox 1"></vaadin-checkbox>
+          </vaadin-checkbox-group>
+        </div>`,
+      ).children;
+      firstGlobalFocusable.focus();
       await nextFrame();
       checkboxes = [...group.querySelectorAll('vaadin-checkbox')];
     });

packages/checkbox-group/test/validation.common.js

@@ -39,14 +39,20 @@ describe('validation', () => {
   });
 
   describe('basic', () => {
+    let firstGlobalFocusable;
+
     beforeEach(async () => {
-      group = fixtureSync(`
-        <vaadin-checkbox-group>
-          <vaadin-checkbox name="language" value="en" label="English"></vaadin-checkbox>
-          <vaadin-checkbox name="language" value="fr" label="Français"></vaadin-checkbox>
-          <vaadin-checkbox name="language" value="de" label="Deutsch"></vaadin-checkbox>
-        </vaadin-checkbox-group>
-      `);
+      [firstGlobalFocusable, group] = fixtureSync(
+        `<div>
+          <input id="first-global-focusable" />
+          <vaadin-checkbox-group>
+            <vaadin-checkbox name="language" value="en" label="English"></vaadin-checkbox>
+            <vaadin-checkbox name="language" value="fr" label="Français"></vaadin-checkbox>
+            <vaadin-checkbox name="language" value="de" label="Deutsch"></vaadin-checkbox>
+          </vaadin-checkbox-group>
+        </div>`,
+      ).children;
+      firstGlobalFocusable.focus();
       await nextRender();
       validateSpy = sinon.spy(group, 'validate');
     });

packages/checkbox/test/validation.common.js

@@ -40,7 +40,12 @@ describe('validation', () => {
 
   describe('basic', () => {
     beforeEach(async () => {
-      checkbox = fixtureSync('<vaadin-checkbox label="Checkbox"></vaadin-checkbox>');
+      checkbox = fixtureSync(
+        `<div>
+          <vaadin-checkbox label="Checkbox"></vaadin-checkbox>
+          <input id="last-global-focusable" />
+        </div>`,
+      ).firstElementChild;
       await nextRender();
       validateSpy = sinon.spy(checkbox, 'validate');
     });
@@ -63,9 +68,7 @@ describe('validation', () => {
       expect(validateSpy.called).to.be.false;
 
       // Blur the checkbox.
-      await sendKeys({ down: 'Shift' });
       await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
 
       expect(validateSpy.calledOnce).to.be.true;
     });

packages/combo-box/test/interactions.common.js

@@ -22,7 +22,13 @@ describe('interactions', () => {
   let comboBox, overlay, input;
 
   beforeEach(async () => {
-    comboBox = fixtureSync('<vaadin-combo-box label="Label"></vaadin-combo-box>');
+    comboBox = fixtureSync(
+      `<div>
+        <vaadin-combo-box label="Label"></vaadin-combo-box>
+        <input id="last-global-focusable" />
+      </div>`,
+    ).firstElementChild;
+
     await nextRender();
     comboBox.items = ['foo', 'bar', 'baz'];
     input = comboBox.inputElement;

packages/combo-box/test/keyboard.common.js

@@ -15,14 +15,20 @@ import sinon from 'sinon';
 import { getViewportItems, getVisibleItemsCount, scrollToIndex, setInputValue } from './helpers.js';
 
 describe('keyboard', () => {
-  let comboBox, input;
+  let comboBox, input, lastGlobalFocusable;
 
   function getFocusedIndex() {
     return comboBox._focusedIndex;
   }
 
   beforeEach(async () => {
-    comboBox = fixtureSync('<vaadin-combo-box></vaadin-combo-box>');
+    [comboBox, lastGlobalFocusable] = fixtureSync(
+      `<div>
+        <vaadin-combo-box></vaadin-combo-box>
+        <input id="last-global-focusable" />
+      </div>`,
+    ).children;
+
     await nextRender();
     comboBox.items = ['foo', 'bar', 'baz'];
     input = comboBox.inputElement;
@@ -128,36 +134,22 @@ describe('keyboard', () => {
 
     it('should tab to the next focusable', async () => {
       await sendKeys({ press: 'Tab' });
-
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.activeElement).to.equal(lastGlobalFocusable);
     });
 
     describe('focusable items content', () => {
-      let focusable;
-
-      beforeEach(() => {
-        focusable = document.createElement('input');
-      });
-
-      afterEach(() => {
-        focusable.remove();
-      });
-
       it('should tab to the next focusable when items have focusable content', async () => {
         comboBox.renderer = (root) => {
           root.innerHTML = '<input>';
         };
-        document.body.appendChild(focusable);
 
-        // Workaround Playwright sendKeys bug
-        focusable.focus();
         input.focus();
         arrowDownKeyDown(input);
 
         await aTimeout(0);
 
         await sendKeys({ press: 'Tab' });
-        expect(document.activeElement).to.equal(focusable);
+        expect(document.activeElement).to.equal(lastGlobalFocusable);
       });
     });
   });

packages/component-base/test/virtualizer-reorder-elements.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, mousedown, mouseup, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import { fixtureSync, mousedown, mouseup, nextFrame } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { Virtualizer } from '../src/virtualizer.js';
@@ -144,21 +144,17 @@ describe('reorder elements', () => {
       // Tab downwards
       for (let i = 1; i <= tabToIndex; i++) {
         await nextFrame();
-        queueMicrotask(async () => await sendKeys({ press: 'Tab' }));
-        await oneEvent(elementsContainer, 'focusin');
+        await sendKeys({ press: 'Tab' });
         await nextFrame();
         expect(document.activeElement.id).to.equal(`item-${i}`);
       }
 
       // Tab upwards
       for (let i = tabToIndex - 1; i >= 0; i--) {
         await nextFrame();
-        queueMicrotask(async () => {
-          await sendKeys({ down: 'Shift' });
-          await sendKeys({ press: 'Tab' });
-          await sendKeys({ up: 'Shift' });
-        });
-        await oneEvent(elementsContainer, 'focusin');
+        await sendKeys({ down: 'Shift' });
+        await sendKeys({ press: 'Tab' });
+        await sendKeys({ up: 'Shift' });
         await nextFrame();
         expect(document.activeElement.id).to.equal(`item-${i}`);
       }

packages/context-menu/test/a11y.common.js

@@ -6,19 +6,19 @@ import { getMenuItems } from './helpers.js';
 
 describe('a11y', () => {
   describe('focus restoration', () => {
-    let contextMenu, contextMenuButton, beforeButton, afterButton;
+    let contextMenu, contextMenuButton, firstGlobalFocusable, lastGlobalFocusable;
 
     beforeEach(async () => {
       const wrapper = fixtureSync(`
         <div>
-          <button>Before</button>
+          <input id="first-global-focusable" />
           <vaadin-context-menu open-on="click">
             <button>Open context menu</button>
           </vaadin-context-menu>
-          <button>After</button>
+          <input id="last-global-focusable" />
         </div>
       `);
-      [beforeButton, contextMenu, afterButton] = wrapper.children;
+      [firstGlobalFocusable, contextMenu, lastGlobalFocusable] = wrapper.children;
       contextMenu.items = [{ text: 'Item 0' }, { text: 'Item 1', children: [{ text: 'Item 1/0' }] }];
       await nextRender();
       contextMenuButton = contextMenu.querySelector('button');
@@ -82,14 +82,14 @@ describe('a11y', () => {
       await sendKeys({ down: 'Shift' });
       await sendKeys({ press: 'Tab' });
       await sendKeys({ up: 'Shift' });
-      expect(getDeepActiveElement()).to.equal(beforeButton);
+      expect(getDeepActiveElement()).to.equal(firstGlobalFocusable);
     });
 
     it('should move focus to the next element outside the menu on Tab pressed inside', async () => {
       contextMenuButton.click();
       await nextRender();
       await sendKeys({ press: 'Tab' });
-      expect(getDeepActiveElement()).to.equal(afterButton);
+      expect(getDeepActiveElement()).to.equal(lastGlobalFocusable);
     });
   });
 });

packages/dashboard/test/dashboard-keyboard.test.ts

@@ -30,10 +30,17 @@ type TestDashboardItem = DashboardItem & { id: number };
 describe('dashboard - keyboard interaction', () => {
   let dashboard: Dashboard<TestDashboardItem>;
   let keydownSpy;
+  let firstGlobalFocusable: HTMLElement;
   const columnWidth = 200;
 
   beforeEach(async () => {
-    dashboard = fixtureSync('<vaadin-dashboard></vaadin-dashboard>');
+    [firstGlobalFocusable, dashboard] = fixtureSync(
+      `<div>
+        <input id="first-global-focusable" />
+        <vaadin-dashboard></vaadin-dashboard>
+      </div>`,
+    ).children as unknown as [HTMLElement, Dashboard<TestDashboardItem>];
+    firstGlobalFocusable.focus();
     await nextFrame();
     dashboard.editable = true;
     keydownSpy = sinon.spy();
@@ -56,15 +63,6 @@ describe('dashboard - keyboard interaction', () => {
 
     dashboard.style.width = `${columnWidth * 2}px`;
     await nextResize(dashboard);
-
-    // Make sure the following tab goes back to the first widget (needed for Firefox)
-    const widget = getElementFromCell(dashboard, 0, 0)!;
-    widget.focus();
-    await nextFrame();
-    await sendKeys({ down: 'Shift' });
-    await sendKeys({ press: 'Tab' });
-    await sendKeys({ up: 'Shift' });
-    await nextFrame();
   });
 
   it('should focus the widget', async () => {

packages/date-picker/test/dropdown.common.js

@@ -8,7 +8,12 @@ describe('dropdown', () => {
   let datePicker, input, overlay;
 
   beforeEach(async () => {
-    datePicker = fixtureSync(`<vaadin-date-picker></vaadin-date-picker>`);
+    datePicker = fixtureSync(
+      `<div>
+        <vaadin-date-picker></vaadin-date-picker>
+        <input id="last-global-focusable" />
+      </div>`,
+    ).firstElementChild;
     await nextRender();
     input = datePicker.inputElement;
     overlay = datePicker.$.overlay;

packages/field-base/test/virtual-keyboard-controller.test.js

@@ -37,7 +37,12 @@ describe('virtual-keyboard-controller', () => {
   let element, input;
 
   beforeEach(() => {
-    element = fixtureSync('<virtual-keyboard-controller-element></virtual-keyboard-controller-element>');
+    element = fixtureSync(
+      `<div>
+        <virtual-keyboard-controller-element></virtual-keyboard-controller-element>
+        <input id="last-global-focusable" />
+      </div>`,
+    ).firstElementChild;
     input = element.inputElement;
   });
 

packages/field-highlighter/test/user-tags.test.js

@@ -242,8 +242,8 @@ describe('user-tags', () => {
 
     describe('adding users when the field is partially visible and focused', () => {
       beforeEach(async () => {
-        container.scrollTop = 220;
         field.inputElement.focus();
+        container.scrollTop = 220;
         await waitForIntersectionObserver();
         addUser(user1);
         addUser(user2);

packages/grid/test/drag-and-drop.common.js

@@ -1118,6 +1118,7 @@ describe('drag and drop', () => {
 
     async function assertDragSucceeds(draggedElement) {
       await dragElement(draggedElement);
+      await nextFrame();
       expect(grid.$.scroller.style.display).to.equal('');
     }
 

packages/grid/test/keyboard-interaction-mode.common.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, keyDownOn, nextFrame, nextRender, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, keyDownOn, nextFrame, nextRender } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
@@ -540,8 +540,7 @@ describe('keyboard interaction mode', () => {
     // Tab downwards
     for (let i = 1; i <= tabToIndex; i++) {
       await rendered();
-      queueMicrotask(async () => await sendKeys({ press: 'Tab' }));
-      await oneEvent(grid, 'focusin');
+      await sendKeys({ press: 'Tab' });
       await rendered();
 
       const focusedRow = document.activeElement.parentElement.assignedSlot.parentElement.parentElement;
@@ -551,12 +550,9 @@ describe('keyboard interaction mode', () => {
     // Tab upwards
     for (let i = tabToIndex - 1; i >= 0; i--) {
       await rendered();
-      queueMicrotask(async () => {
-        await sendKeys({ down: 'Shift' });
-        await sendKeys({ press: 'Tab' });
-        await sendKeys({ up: 'Shift' });
-      });
-      await oneEvent(grid, 'focusin');
+      await sendKeys({ down: 'Shift' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ up: 'Shift' });
       await rendered();
       const focusedRow = document.activeElement.parentElement.assignedSlot.parentElement.parentElement;
       expect(focusedRow.index).to.equal(i);

packages/grid/test/keyboard-navigation.common.js

@@ -2221,7 +2221,7 @@ describe('empty state', () => {
   }
 
   function getEmptyStateFocusables() {
-    return [...getEmptyState().querySelectorAll('button')];
+    return [...getEmptyState().querySelectorAll('input')];
   }
 
   function getEmptyStateBody() {
@@ -2233,7 +2233,7 @@ describe('empty state', () => {
       <vaadin-grid>
         <vaadin-grid-column path="name"></vaadin-grid-column>
         <div slot="empty-state">
-          No items <button>button 1</button> <button>button 2</button>
+          No items <input /> <input />
         </div>
       </vaadin-grid>
     `);