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

[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.