Issue 1:
Context:

Playwright Version: ^1.29.1

Operating System: Windows11

Node.js Version: v19.0.1

Browser: Chromium

Code Snippet

test("repro", async ({ page, context }) => {
await page.goto('http://localhost:8080');
await page.locator('#theForceIsStrongWithThisOne').click({ timeout: 3000 });
});

HTML:

<body id="divID">
<div id="container" class="container somethingPage" style="height: auto;">
<div class="banner" id="pageBanner">
<div id="bannerImageContainer" class="bannerImageLeftAlign" style="background: rgb(255, 255, 255);">
<img id="headerImage" src="./files/large-company-logo.png">
</div>
</div>
<main class="somethingInfo">
<div class="documentTitle" id="documentTitle">
<div class="filterIconContainer">
<span id="theForceIsStrongWithThisOne" class="filter"></span> <!-- This is the target -->
</div>
<p id="somethingHeader" class=""><b class="heading">Keep On Darthin' In The Free World</b></p>
</div>
<div id="readOnlyWarning">
<p><b>These are the blog articles you are looking for, if not, use the filter button above.</b></p>
</div>
</main>
</div>
</body>

I also note that there is CSS for the "filter" class:

.filter:after {
position: absolute;
border-left: .25em solid;
left: -.125em;
top: -.2em;
height: .4em;
content: ' '
}

Describe the bug

When running this (only) in Chromium, as you will see in the trace below, while playwright correctly highlights the filter control, it is going to perform the click elsewhere and so the error that is returned makes sense "</body> intercepts pointer events"

I have a feeling this is probably not playwright and more likely chromium itself but this is somewhat further than I know to go in the code to really get to the bottom of it.

Click here for the log produced:

waiting for locator('#theForceIsStrongWithThisOne')
locator resolved to visible <span class="filter" id="theForceIsStrongWithThisOne"></span>
attempting click action
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<body id="divID">…</body> intercepts pointer events
retrying click action, attempt #1
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<body id="divID">…</body> intercepts pointer events
retrying click action, attempt #2
waiting 20ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<body id="divID">…</body> intercepts pointer events
retrying click action, attempt #3
waiting 100ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<body id="divID">…</body> intercepts pointer events
retrying click action, attempt #4
waiting 100ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<body id="divID">…</body> intercepts pointer events
retrying click action, attempt #5
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<body id="divID">…</body> intercepts pointer events
retrying click action, attempt #6
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<body id="divID">…</body> intercepts pointer events
retrying click action, attempt #7
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<body id="divID">…</body> intercepts pointer events
retrying click action, attempt #8
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<body id="divID">…</body> intercepts pointer events
retrying click action, attempt #9
waiting 500ms

Here is the output from the console:

3 | test("repro", async ({ page, context }) => {
4 | await page.goto("http://localhost:8080");
> 5 | await page.locator("#theForceIsStrongWithThisOne").click({ timeout: 3000 });
| ^
6 | });

at c:\Users\DannyCrone\repos\click-repro\tests\repro.spec.ts:5:54

click-repro.zip

This project contains a repro website to test against and 1 test

website is in the folder "website"

test is called "repro" in "repro.spec.ts"

In order to run the website so it renders the page correctly, I used http-server using the following command:

http-server website -c-1

Also included it as an npm script:

"scripts": {
"start": "http-server website -c-1"
},

Attached are the traces from chromium (failing) and webkit (passing):

chromiumtrace.zip

webkittrace.zip

Issue 2:
Your question

On a specific website playwright doesn't seem to find the location of elements accurately:

In the above image I'm hovering over the button in the browser opened by codegen. The highlighted area does not match the element position, as seen on the screen or when hovering over the element definition in the Developer Tools:

This behavior is causing some issues, with functions like elementHandle.screenshot() and page.click(). This issue happens on all elements on this page and scrolling on the page seems to affect the location determined by playwright relative to the actual location of the element. I'm looking for some insight into how this issue could be fixed or why is it occurring.

Website I'm talking about: https://factura.vodafone.ro/