[Bug]: Hover state triggers focus-visible style instead of true hover

[michallbanas]

Version

1.41.2

Steps to reproduce

1. Clone my repository: https://github.com/michallbanas/playwright-hover-example
2. npm install
3. npx playwright test --ui
4. Check the hover state step

Expected behavior

Hovering over a element should trigger hover state. In the case from repository, the share button should be displayed on the right side of card. (see screenshots below)

Actual behavior

Hovering over a card (in my case) applies a blue outline as if the card is focused. Compared to states in Chrome dev tool.

Additional context

Screenshots:

This is how it looks in PW test.

Focus-visible state in Chrome dev tool.

Hover state in Chrome dev tool.

Environment

System:
    OS: macOS 14.3
    CPU: (8) arm64 Apple M1 Pro
    Memory: 141.11 MB / 16.00 GB
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    bun: 1.0.26 - ~/.bun/bin/bun
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: ^1.41.2 => 1.41.2

[yury-s]

The element's blue border on the snapshot is Playwright Trace Viewer's highlight of the element on which the action was performed, there is also a red dot showing position of the cursor. The style of the highlight that Playwright uses (style.outline = '2px solid #006ab1';) in this particular cases is very similar to what you page has when the element is clicked. We can probably do something smart to avoid such style clashes or allow to hide highlight of the active element in the trace viewer, so far this is the first case where we see such problem though.

[yury-s]

We could draw the background highlight with a higher z-index.

[michallbanas]

@yury-s thank you for the answer 👍🏼 Different highlight style would be helpful. However, it also gives me a different result in the test (using hover) than in real interaction (or using :hover in dev tool). I don't get this share button circle (see screenshot) in PW. So I'm curious if the performed action in PW is somehow different compared to eg. :hover in chrome dev tool.

[yury-s]

So I'm curious if the performed action in PW is somehow different compared to eg. :hover in chrome dev tool.

Yes. Playwright moves mouse over the element which not only triggers :hover pseudo class but also triggers all DOM mouse events. The share image is added by javascript.