<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.32.1</li>
<li>Operating System: Ubuntu (Github action runner no docker)</li>
<li>Browser: WebKit</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I provided exact source code that allows reproducing the issue locally.</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="            &lt;iframe
                title=&quot;Walls.io&quot;
                allowFullScreen
                id=&quot;wallsio-iframe&quot;
                src={`//my.walls.io/j4z3r?nobackground=1&amp;amp;show_header=0`}
                style={{
                    border: 0,
                    height: '800px',
                    width: '600px',
                }}
                loading=&quot;lazy&quot;
            &gt;&lt;/iframe&gt;"><pre class="notranslate">            <span class="pl-c1">&lt;</span><span class="pl-ent">iframe</span>
                <span class="pl-c1">title</span><span class="pl-c1">=</span><span class="pl-s">"Walls.io"</span>
                <span class="pl-c1">allowFullScreen</span>
                <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"wallsio-iframe"</span>
                <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s">`//my.walls.io/j4z3r?nobackground=1&amp;amp;show_header=0`</span><span class="pl-kos">}</span>
                <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span>
                    <span class="pl-c1">border</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
                    <span class="pl-c1">height</span>: <span class="pl-s">'800px'</span><span class="pl-kos">,</span>
                    <span class="pl-c1">width</span>: <span class="pl-s">'600px'</span><span class="pl-kos">,</span>
                <span class="pl-kos">}</span><span class="pl-kos">}</span>
                <span class="pl-c1">loading</span><span class="pl-c1">=</span><span class="pl-s">"lazy"</span>
            <span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">iframe</span><span class="pl-c1">&gt;</span></pre></div>




<p dir="auto"><strong>Link to the GitHub repository with the repro</strong></p>
<p dir="auto"><a href="https://github.com/diginikkari/webkit-issue">https://github.com/diginikkari/webkit-issue</a></p>
<p dir="auto"><strong>Test file (self-contained)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="test('has title', async ({ page }) =&gt; {
    await page.goto('http://127.0.0.1:5173/');

    // Expect a title &quot;to contain&quot; a substring.
    await page.frameLocator('#wallsio-iframe').getByText('j4z3r').click();
});
"><pre class="notranslate"><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'has title'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> page <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">'http://127.0.0.1:5173/'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-c">// Expect a title "to contain" a substring.</span>
    <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">frameLocator</span><span class="pl-kos">(</span><span class="pl-s">'#wallsio-iframe'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">getByText</span><span class="pl-kos">(</span><span class="pl-s">'j4z3r'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>[Run the test]</li>
<li>[...]</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">Test should pass.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">Test is failing in webkit when runned in github actions with <strong>ubuntu-latest</strong> -runner. In trace it is showing: <code class="notranslate">Failed to load resource: Unacceptable TLS certificate</code> error.</p>
<p dir="auto">Tests are working fine in MacOs. Tests are also working when using Docker image: <code class="notranslate">mcr.microsoft.com/playwright:v1.32.0-focal</code>. This could be related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1295516713" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/15410" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/15410/hovercard" href="https://github.com/microsoft/playwright/issues/15410">#15410</a>.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.32.3</li>
<li>Operating System: Mac</li>
<li>Browser: Chromium</li>
<li>Other info:</li>
</ul>
<p dir="auto">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 <code class="notranslate">FIXED</code> variable to <code class="notranslate">true</code> which will disable screencasting on the remote page and the script will run successfully.</p>
<h3 dir="auto">Source code</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I provided exact source code that allows reproducing the issue locally.</li>
</ul>
<p dir="auto"><strong>index.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const playwright = require('playwright');

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

(async () =&gt; {
  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(() =&gt; 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');
})();
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">playwright</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'playwright'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-c1">FIXED</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">PORT</span> <span class="pl-c1">=</span> <span class="pl-c1">9299</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">REMOTE</span> <span class="pl-c1">=</span> <span class="pl-s">`http://localhost:<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">PORT</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span>

<span class="pl-kos">(</span><span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">browser</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">playwright</span><span class="pl-kos">.</span><span class="pl-c1">chromium</span><span class="pl-kos">.</span><span class="pl-en">launch</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c">// headless: false,</span>
    <span class="pl-c1">args</span>: <span class="pl-kos">[</span>
      <span class="pl-s">`--remote-debugging-port=<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">PORT</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span>
      <span class="pl-s">`--remote-allow-origins=<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">REMOTE</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">page</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">newPage</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">REMOTE</span><span class="pl-kos">}</span></span>/json`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">list</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">evaluate</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">JSON</span><span class="pl-kos">.</span><span class="pl-en">parse</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-c1">innerText</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-s1">debugPage</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">newPage</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-s1">debugPage</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">REMOTE</span><span class="pl-kos">}</span></span><span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">list</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">devtoolsFrontendUrl</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-s1">debugPage</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'canvas'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">waitFor</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">FIXED</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">await</span> <span class="pl-s1">debugPage</span><span class="pl-kos">.</span><span class="pl-en">getByTitle</span><span class="pl-kos">(</span><span class="pl-s">'Toggle screencast'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'body'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">timeout</span>: <span class="pl-c1">3000</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">close</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'done'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>Run <code class="notranslate">node index.js</code></li>
</ul>
<p dir="auto"><strong>Expected</strong><br>
The script should run to completion</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">The script errors with</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="locator.click: Timeout 3000ms exceeded.
=========================== logs ===========================
waiting for locator('body')
  locator resolved to &lt;body&gt;…&lt;/body&gt;
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"><pre class="notranslate"><code class="notranslate">locator.click: Timeout 3000ms exceeded.
=========================== logs ===========================
waiting for locator('body')
  locator resolved to &lt;body&gt;…&lt;/body&gt;
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
</code></pre></div>
<p dir="auto">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 <code class="notranslate">${REMOTE}${list[0].devtoolsFrontendUrl}</code> url can be opened in multiple tabs/windows and the casting and debugging still works as expected. It's only Playwright actions (such as <code class="notranslate">.click()</code> in the snippet above) that appear to break</p>