<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: <code class="notranslate">1.35.1</code></li>
<li>Operating System: GitHub Actions runner <a href="https://github.com/actions/runner-images/releases/tag/ubuntu22%2F20230625.1">Ubuntu 22.04</a></li>
<li>Browser: Chromium <code class="notranslate">115.0.5790.24</code> (playwright build <code class="notranslate">v1067</code>)</li>
<li>Other info:
<ul dir="auto">
<li>Mantine: <code class="notranslate">6.0.14</code></li>
</ul>
</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"><strong>Config file</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Config, defineConfig} from &quot;@playwright/test&quot;;
import {dirname, join} from &quot;node:path&quot;;
import {fileURLToPath} from &quot;node:URL&quot;;

const __dirname = dirname(fileURLToPath(import.meta.url));
const CI = process.env.CI !== undefined;

const reportsPath = join(__dirname, &quot;tests/playwright/reports&quot;);
const reporters: Config[&quot;reporter&quot;] = [
  [
    &quot;html&quot;,
    {
      open: &quot;never&quot;,
      outputFolder: join(reportsPath, &quot;html&quot;)
    }
  ],
  [&quot;list&quot;]

];

if (CI) {
  reporters.push([&quot;github&quot;]);
}

export default defineConfig({
  projects: [
    {
      name: &quot;tests&quot;,
      testDir: join(__dirname, &quot;tests/playwright/tests&quot;),
      testMatch: &quot;**/*.spec.ts&quot;
    }
  ],
  outputDir: join(__dirname, &quot;tests/playwright/output&quot;),
  use: {
    video: &quot;on&quot;,
    trace: &quot;on&quot;
  },
  timeout: 1000 * 60 * 5,
  //CI will be true
  maxFailures: CI ? 1 : 0,
  reporter: reporters,
  retries: CI ? 2 : 0,
  workers: CI ? 8 : 1
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Config</span><span class="pl-kos">,</span> <span class="pl-s1">defineConfig</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">import</span> <span class="pl-kos">{</span><span class="pl-s1">dirname</span><span class="pl-kos">,</span> <span class="pl-s1">join</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"node:path"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">fileURLToPath</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"node:URL"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">__dirname</span> <span class="pl-c1">=</span> <span class="pl-en">dirname</span><span class="pl-kos">(</span><span class="pl-en">fileURLToPath</span><span class="pl-kos">(</span><span class="pl-k">import</span><span class="pl-kos">.</span><span class="pl-c1">meta</span><span class="pl-kos">.</span><span class="pl-c1">url</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-smi">CI</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">CI</span> <span class="pl-c1">!==</span> <span class="pl-c1">undefined</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">reportsPath</span> <span class="pl-c1">=</span> <span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">"tests/playwright/reports"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">reporters</span>: <span class="pl-smi">Config</span><span class="pl-kos">[</span><span class="pl-s">"reporter"</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
  <span class="pl-kos">[</span>
    <span class="pl-s">"html"</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span>
      <span class="pl-c1">open</span>: <span class="pl-s">"never"</span><span class="pl-kos">,</span>
      <span class="pl-c1">outputFolder</span>: <span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">reportsPath</span><span class="pl-kos">,</span> <span class="pl-s">"html"</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-s">"list"</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-smi">CI</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">reporters</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">"github"</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">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">"tests"</span><span class="pl-kos">,</span>
      <span class="pl-c1">testDir</span>: <span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">"tests/playwright/tests"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c1">testMatch</span>: <span class="pl-s">"**/*.spec.ts"</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">outputDir</span>: <span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">"tests/playwright/output"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">video</span>: <span class="pl-s">"on"</span><span class="pl-kos">,</span>
    <span class="pl-c1">trace</span>: <span class="pl-s">"on"</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">timeout</span>: <span class="pl-c1">1000</span> <span class="pl-c1">*</span> <span class="pl-c1">60</span> <span class="pl-c1">*</span> <span class="pl-c1">5</span><span class="pl-kos">,</span>
  <span class="pl-c">//CI will be true</span>
  <span class="pl-c1">maxFailures</span>: <span class="pl-smi">CI</span> ? <span class="pl-c1">1</span> : <span class="pl-c1">0</span><span class="pl-kos">,</span>
  <span class="pl-c1">reporter</span>: <span class="pl-s1">reporters</span><span class="pl-kos">,</span>
  <span class="pl-c1">retries</span>: <span class="pl-smi">CI</span> ? <span class="pl-c1">2</span> : <span class="pl-c1">0</span><span class="pl-kos">,</span>
  <span class="pl-c1">workers</span>: <span class="pl-smi">CI</span> ? <span class="pl-c1">8</span> : <span class="pl-c1">1</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; {
  //...

  /* Note that running with force: true seems to slightly decrease the frequency of the issue,
  but it still occurs &gt;50% of the time. The issue also occurs with the `.type` method (at about
  the same frequency as the stock `.fill` method, like below). */
  await page.getByLabel(&quot;Email&quot;).fill(&quot;beta@example.com&quot;);
  await page.getByLabel(&quot;Password&quot;).first().fill(&quot;[REDACTED]&quot;);
  await page.getByRole(&quot;button&quot;, {
    name: /Log in|Sign up/
  }).click();

  //...
});"><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-c">//...</span>

  <span class="pl-c">/* Note that running with force: true seems to slightly decrease the frequency of the issue,</span>
<span class="pl-c">  but it still occurs &gt;50% of the time. The issue also occurs with the `.type` method (at about</span>
<span class="pl-c">  the same frequency as the stock `.fill` method, like below). */</span>
  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByLabel</span><span class="pl-kos">(</span><span class="pl-s">"Email"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">fill</span><span class="pl-kos">(</span><span class="pl-s">"beta@example.com"</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">getByLabel</span><span class="pl-kos">(</span><span class="pl-s">"Password"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">first</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">fill</span><span class="pl-kos">(</span><span class="pl-s">"[REDACTED]"</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">"button"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">name</span>: <span class="pl-pds"><span class="pl-c1">/</span>Log in<span class="pl-c1">|</span>Sign up<span class="pl-c1">/</span></span>
  <span class="pl-kos">}</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-c">//...</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>React Component</strong></p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="//Based on https://mantine.dev/form/use-form/#getinputprops
const form = useForm({
  initialValues: {
    email: &quot;&quot;,
    password: &quot;&quot;,
    confirmPassword: &quot;&quot;,
    terms: false
  },
  clearInputErrorOnChange: false,
  validate: //Validation logic is ran immediately after any input
});

//...

&lt;TextInput
  {...form.getInputProps(&quot;email&quot;)}
  icon={&lt;IconMail /&gt;}
  label=&quot;Email&quot;
  placeholder=&quot;example@example.com&quot;
  radius=&quot;md&quot;
  type=&quot;email&quot;
  withAsterisk
/&gt;
&lt;PasswordInput
  icon={&lt;IconKey /&gt;}
  label=&quot;Password&quot;
  radius=&quot;md&quot;
  {...form.getInputProps(&quot;password&quot;)}
  visibilityToggleIcon={visibilityToggle}
  withAsterisk
/&gt;

//..."><pre class="notranslate"><span class="pl-c">//Based on https://mantine.dev/form/use-form/#getinputprops</span>
<span class="pl-k">const</span> <span class="pl-s1">form</span> <span class="pl-c1">=</span> <span class="pl-en">useForm</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">initialValues</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">email</span>: <span class="pl-s">""</span><span class="pl-kos">,</span>
    <span class="pl-c1">password</span>: <span class="pl-s">""</span><span class="pl-kos">,</span>
    <span class="pl-c1">confirmPassword</span>: <span class="pl-s">""</span><span class="pl-kos">,</span>
    <span class="pl-c1">terms</span>: <span class="pl-c1">false</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">clearInputErrorOnChange</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
  <span class="pl-c1">validate</span>: <span class="pl-c">//Validation logic is ran immediately after any input</span><span class="pl-s1"></span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">//...</span>

<span class="pl-c1">&lt;</span><span class="pl-smi">TextInput</span>
  <span class="pl-kos">{</span>...<span class="pl-s1">form</span><span class="pl-kos">.</span><span class="pl-en">getInputProps</span><span class="pl-kos">(</span><span class="pl-s">"email"</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
  <span class="pl-c1">icon</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-smi">IconMail</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span>
  <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Email"</span>
  <span class="pl-c1">placeholder</span><span class="pl-c1">=</span><span class="pl-s">"example@example.com"</span>
  <span class="pl-c1">radius</span><span class="pl-c1">=</span><span class="pl-s">"md"</span>
  <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"email"</span>
  <span class="pl-c1">withAsterisk</span>
<span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-smi">PasswordInput</span>
  <span class="pl-s1">icon</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-smi">IconKey</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span>
  <span class="pl-s1">label</span><span class="pl-c1">=</span><span class="pl-s">"Password"</span>
  <span class="pl-s1">radius</span><span class="pl-c1">=</span><span class="pl-s">"md"</span>
  <span class="pl-kos">{</span>...<span class="pl-s1">form</span><span class="pl-kos">.</span><span class="pl-en">getInputProps</span><span class="pl-kos">(</span><span class="pl-s">"password"</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
  <span class="pl-s1">visibilityToggleIcon</span><span class="pl-c1">=</span><span class="pl-kos">{</span>visibilityToggle<span class="pl-kos">}</span>
  <span class="pl-s1">withAsterisk</span>
<span class="pl-c1">/</span><span class="pl-c1">&gt;</span>

<span class="pl-c">//...</span></pre></div>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>Run the tests in GitHub Actions</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<ul dir="auto">
<li>Playwright reliably types into the input fields (See the screen recordings)</li>
</ul>
<p dir="auto"><strong>Actual</strong></p>
<ul dir="auto">
<li>Playwright non-deterministically fails to type into the input fields and the test times out
<ul dir="auto">
<li>Occurs &lt;5% of the time on my computer (Also Ubuntu 22.04), even when I manually set <code class="notranslate">CI</code> to <code class="notranslate">true</code> or when I run in <a href="https://github.com/nektos/act">Act</a></li>
<li>Occurs &gt;80% of the time in GitHub Actions</li>
<li>Does not consistently freeze up at the same place in the email/password input</li>
</ul>
</li>
</ul>
<p dir="auto"><strong>Logs</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="locator.type: Target closed
=========================== logs ===========================
waiting for getByLabel('Email')
  locator resolved to &lt;input value=&quot;&quot; type=&quot;email&quot; aria-invalid=&quot;false&quot; data-…/&gt;
elementHandle.type(&quot;beta@example.com&quot;)
============================================================"><pre class="notranslate"><code class="notranslate">locator.type: Target closed
=========================== logs ===========================
waiting for getByLabel('Email')
  locator resolved to &lt;input value="" type="email" aria-invalid="false" data-…/&gt;
elementHandle.type("beta@example.com")
============================================================
</code></pre></div>
<p dir="auto"><em>Note: this is for <code class="notranslate">fail-1</code>, with <code class="notranslate">type</code>.</em></p>
<hr>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="locator.fill: Target page, context or browser has been closed"><pre class="notranslate"><code class="notranslate">locator.fill: Target page, context or browser has been closed
</code></pre></div>
<p dir="auto"><em>Note: this is for <code class="notranslate">fail-2</code> with <code class="notranslate">fill</code>.</em></p>
<hr>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="locator.fill: Target closed
=========================== logs ===========================
waiting for getByLabel('Email')
  locator resolved to &lt;input value=&quot;&quot; type=&quot;email&quot; aria-invalid=&quot;false&quot; data-…/&gt;
elementHandle.fill(&quot;beta@example.com&quot;)
  waiting for element to be visible, enabled and editable
    forcing action
  element is visible, enabled and editable
============================================================"><pre class="notranslate"><code class="notranslate">locator.fill: Target closed
=========================== logs ===========================
waiting for getByLabel('Email')
  locator resolved to &lt;input value="" type="email" aria-invalid="false" data-…/&gt;
elementHandle.fill("beta@example.com")
  waiting for element to be visible, enabled and editable
    forcing action
  element is visible, enabled and editable
============================================================
</code></pre></div>
<p dir="auto"><em>Note: this is for <code class="notranslate">fail-3</code>, with <code class="notranslate">force: true</code>.</em></p>
<p dir="auto"><strong>Screen Recordings</strong><br>
<a href="https://github.com/microsoft/playwright/assets/38930607/039da15f-4fb6-429b-91b0-426a41706f00">https://github.com/microsoft/playwright/assets/38930607/039da15f-4fb6-429b-91b0-426a41706f00</a> (Fail 1)<br>
<a href="https://github.com/microsoft/playwright/assets/38930607/a6a76fa1-3a47-4d76-b9a6-b46e8e474158">https://github.com/microsoft/playwright/assets/38930607/a6a76fa1-3a47-4d76-b9a6-b46e8e474158</a> (Fail 2)<br>
<a href="https://github.com/microsoft/playwright/assets/38930607/f6b4a7a8-12d0-4764-bb40-86554a5b43cb">https://github.com/microsoft/playwright/assets/38930607/f6b4a7a8-12d0-4764-bb40-86554a5b43cb</a> (Fail 3)<br>
<a href="https://github.com/microsoft/playwright/assets/38930607/5560b607-9708-455e-80a8-84ad9be2689f">https://github.com/microsoft/playwright/assets/38930607/5560b607-9708-455e-80a8-84ad9be2689f</a> (Pass)</p>
<p dir="auto">Hi, in <em>browser_patches/firefox/juggler/protocol/Protocol.js</em>  there is  a duplicate of the property "value".</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/22259701/84069718-a59dd780-a9d3-11ea-8b32-a832ddfd87c1.png"><img src="https://user-images.githubusercontent.com/22259701/84069718-a59dd780-a9d3-11ea-8b32-a832ddfd87c1.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">I believe that is redundant, is it correct? Thanks!</p>