Issue 1:
System info

Playwright Version: v1.32.1

Operating System: Ubuntu (Github action runner no docker)

Browser: WebKit

Other info:

Source code

I provided exact source code that allows reproducing the issue locally.

<iframe
title="Walls.io"
allowFullScreen
id="wallsio-iframe"
src={`//my.walls.io/j4z3r?nobackground=1&amp;show_header=0`}
style={{
border: 0,
height: '800px',
width: '600px',
}}
loading="lazy"
></iframe>

Link to the GitHub repository with the repro

https://github.com/diginikkari/webkit-issue

Test file (self-contained)

test('has title', async ({ page }) => {
await page.goto('http://127.0.0.1:5173/');

// Expect a title "to contain" a substring.
await page.frameLocator('#wallsio-iframe').getByText('j4z3r').click();
});

Steps

[Run the test]

[...]

Expected

Test should pass.

Actual

Test is failing in webkit when runned in github actions with ubuntu-latest -runner. In trace it is showing: Failed to load resource: Unacceptable TLS certificate error.

Tests are working fine in MacOs. Tests are also working when using Docker image: mcr.microsoft.com/playwright:v1.32.0-focal. This could be related to #15410.

Issue 2:
System info

Playwright Version: 1.32.3

Operating System: Mac

Browser: Chromium

Other info:

It seems that having a screencasted chrome instance of a remote debugging process breaks all actions on the page. In the example below you can change the FIXED variable to true which will disable screencasting on the remote page and the script will run successfully.

Source code

I provided exact source code that allows reproducing the issue locally.

index.js

const playwright = require('playwright');

const FIXED = false;
const PORT = 9299;
const REMOTE = `http://localhost:${PORT}`;

(async () => {
const browser = await playwright.chromium.launch({
// headless: false,
args: [
`--remote-debugging-port=${PORT}`,
`--remote-allow-origins=${REMOTE}`,
],
});
const page = await browser.newPage();
await page.goto(`${REMOTE}/json`);
const list = await page.evaluate(() => JSON.parse(document.body.innerText));

const debugPage = await browser.newPage();
await debugPage.goto(`${REMOTE}${list[0].devtoolsFrontendUrl}`);
await debugPage.locator('canvas').waitFor();
if (FIXED) {
await debugPage.getByTitle('Toggle screencast').click();
}

await page.locator('body').click({ timeout: 3000 });
await browser.close();
console.log('done');
})();

Steps

Run node index.js

Expected

The script should run to completion

Actual

The script errors with

locator.click: Timeout 3000ms exceeded.
=========================== logs ===========================
waiting for locator('body')
locator resolved to <body>…</body>
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
performing click action

This happens in headless and headful chrome, I suspect that playwright isn't sharing the debug websocket correctly. Note that you can open multiple debug pages on the same page and there's no issue. For example the same ${REMOTE}${list[0].devtoolsFrontendUrl} url can be opened in multiple tabs/windows and the casting and debugging still works as expected. It's only Playwright actions (such as .click() in the snippet above) that appear to break