<p dir="auto">Test is simple to wait for an element to be visible and then click on it. During the debugging of the test, I found out that after the <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="524783024" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/1" data-hovercard-type="pull_request" data-hovercard-url="/microsoft/playwright/pull/1/hovercard" href="https://github.com/microsoft/playwright/pull/1">#1</a> retry, the click action is successful, but during a normal run, this click is very flaky and only happens like 1-2 times in 5 executions, and the next step fails.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.30]</li>
<li>Operating System: [All, Windows 11, Ubuntu 20, macOS 13.2, etc.]</li>
<li>Browser: [All, Chromium, Firefox, WebKit]</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<ul dir="auto">
<li>[ await this.next.waitFor({ state: 'visible' });<br>
await Promise.all([this.next.click(), this.page.waitForNavigation(), this.page.waitForResponse(testReg)]);] I provided exact source code that allows reproducing the issue locally.</li>
</ul>




<p dir="auto"><strong>Config file</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// playwright.config.ts
const config: PlaywrightTestConfig = {
  fullyParallel: true,
  use: {
    actionTimeout: ACTION_TIMEOUT,
    navigationTimeout: NAVIGATION_TIMEOUT,
    screenshot: 'only-on-failure',
    ignoreHTTPSErrors: true,
  },
};"><pre class="notranslate"><span class="pl-c">// playwright.config.ts</span>
<span class="pl-k">const</span> <span class="pl-s1">config</span>: <span class="pl-v">PlaywrightTestConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">fullyParallel</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">actionTimeout</span>: <span class="pl-c1">ACTION_TIMEOUT</span><span class="pl-kos">,</span>
    <span class="pl-c1">navigationTimeout</span>: <span class="pl-c1">NAVIGATION_TIMEOUT</span><span class="pl-kos">,</span>
    <span class="pl-c1">screenshot</span>: <span class="pl-s">'only-on-failure'</span><span class="pl-kos">,</span>
    <span class="pl-c1">ignoreHTTPSErrors</span>: <span class="pl-c1">true</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>Test file (self-contained)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="await this.next.waitFor({ state: 'visible' });
    await Promise.all([this.next.click(), this.page.waitForNavigation(), this.page.waitForResponse(testReg)]);"><pre class="notranslate"><span class="pl-k">await</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">next</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-c1">state</span>: <span class="pl-s">'visible'</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-v">Promise</span><span class="pl-kos">.</span><span class="pl-en">all</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">next</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-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">page</span><span class="pl-kos">.</span><span class="pl-en">waitForNavigation</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">page</span><span class="pl-kos">.</span><span class="pl-en">waitForResponse</span><span class="pl-kos">(</span><span class="pl-s1">testReg</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>Expected</strong></p>
<p dir="auto">locator.click() action should happen each time without flakiness.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">locator.click() action is not happening each time and showing flaky.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.XX]</li>
<li>Operating System: [All, Windows 11, Ubuntu 20, macOS 13.2, etc.]</li>
<li>Browser: [All, Chromium, Firefox, 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"> I provided exact source code that allows reproducing the issue locally.</li>
</ul>




<p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/133706/250482404-8cc661bf-b20d-4e0a-9161-b08781a51fc3.png"><img src="https://user-images.githubusercontent.com/133706/250482404-8cc661bf-b20d-4e0a-9161-b08781a51fc3.png" alt="image" style="max-width: 100%;"></a></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="        await this.page
          .getByRole('row', {
            name: new RegExp(`\b${escapeRegExp(skill)}\b`, 'u'),
          })
          .locator('span')
          .click()"><pre class="notranslate">        <span class="pl-k">await</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">page</span>
          <span class="pl-kos">.</span><span class="pl-en">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'row'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
            <span class="pl-c1">name</span>: <span class="pl-k">new</span> <span class="pl-smi">RegExp</span><span class="pl-kos">(</span><span class="pl-s">`\b<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-en">escapeRegExp</span><span class="pl-kos">(</span><span class="pl-s1">skill</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>\b`</span><span class="pl-kos">,</span> <span class="pl-s">'u'</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-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'span'</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></pre></div>
<p dir="auto"><strong>Link to the GitHub repository with the repro</strong></p>
<p dir="auto">[https://github.com/your_profile/playwright_issue_title]</p>
<p dir="auto">or</p>
<p dir="auto"><strong>Config file</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], },
    },
});"><pre class="notranslate"><span class="pl-c">// playwright.config.ts</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">defineConfig</span><span class="pl-kos">,</span> <span class="pl-s1">devices</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@playwright/test'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">defineConfig</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">projects</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">'chromium'</span><span class="pl-kos">,</span>
      <span class="pl-c1">use</span>: <span class="pl-kos">{</span> ...<span class="pl-s1">devices</span><span class="pl-kos">[</span><span class="pl-s">'Desktop Chrome'</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>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<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="it('should check the box using setChecked', async ({ page }) =&gt; {
  await page.setContent(`&lt;input id='checkbox' type='checkbox'&gt;&lt;/input&gt;`);
  await page.getByRole('checkbox').check();
  await expect(page.getByRole('checkbox')).toBeChecked();
});"><pre class="notranslate"><span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should check the box using setChecked'</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">setContent</span><span class="pl-kos">(</span><span class="pl-s">`&lt;input id='checkbox' type='checkbox'&gt;&lt;/input&gt;`</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">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'checkbox'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">check</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-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'checkbox'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeChecked</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">Selector <code class="notranslate">getByRole('row', { name: /�cabce�/u }).locator('span')</code> works</p>
<p dir="auto">[Describe expected behavior]</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">Selector <code class="notranslate">getByRole('row', { name: /�cabce�/u }).locator('span')</code> doesn't work, but <code class="notranslate">getByRole('row', { name: /\bcabce\b/u }).locator('span')</code> does work.</p>
<p dir="auto">one of the <code class="notranslate">playwright</code> generated:</p>
<div class="highlight highlight-text-shell-session notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&gt; playwright.generateLocator($0)
&lt; getByRole('row', { name: 'Ca# cabce ' }).locator('label')"><pre class="notranslate">&gt; <span class="pl-s1">playwright.generateLocator(<span class="pl-smi">$0</span>)</span>
<span class="pl-c1">&lt; getByRole('row', { name: 'Ca# cabce ' }).locator('label')</span></pre></div>
<p dir="auto"><em>So my code looks correct</em></p>
<p dir="auto">[Describe actual behavior]</p>