Heads up: Playwright 1.62.0+ might break hover states in your test suite

The default flags that Playwright passes to Chromium changed with the 1.62.0 release and can affect how hovering works.

Issue

By default, the mouse pointer is at location (0,0) in a Playwright suite.
For newly added elements that cover (0,0), hovering events (like mouseenter) did not trigger before -- now they do.

This happens only when the mouse pointer was never moved and seems to be caused by the Chromium feature RenderDocument which Playwright disabled before 1.62.

(Note: we've sometimes seen this happen only for elements added after the 1st element. Regardless, the issue still exists.)

Solutions

Here are two different approaches to resolve this.
One is short but contains an edge case, the other requires a bit more effort.

Simple: Keep elements away from (0,0)

You can add some padding to the body to reduce the risk of elements being placed at the top left.

body {
  padding: 20px;
}

Note that elements may still reach (0,0), e.g. through positioning.

Solid: Move mouse pointer out of the viewport

Hovering checks happen only when the mouse pointer is inside the viewport.
Moving the mouse pointer out of it prevents hovering any element.

You can easily do this with Playwright's API:

page.mouse.move(-10, -10)

Integration with Vitest

Here is an example on how to integrate this approach with Vitest.

Define that as a commands function which receives the BrowserCommandContext that contains page:

export default defineConfig({
  test: {
    browser: {
      commands: {
        movePointerOffscreen({ page }) {
          page.mouse.move(-10, -10)
        },
      },
      // ...

That provides a movePointerOffscreen function on Vitest's browser commands object that you can call directly:

import { commands } from 'vitest/browser'
beforeEach(function() {
  commands.movePointerOffscreen()
})