<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.30.0</li>
<li>Operating System: Ubuntu 20</li>
<li>Browser: WebKit</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>




<p dir="auto"><strong>Link to the GitHub repository with the repro</strong></p>
<p dir="auto"><a href="https://github.com/ta834n/playwright-webkit-demo">https://github.com/ta834n/playwright-webkit-demo</a></p>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>check out the repository</li>
<li><code class="notranslate">npm install</code></li>
<li><code class="notranslate">npx playwright install</code></li>
<li><code class="notranslate">npx playwright test</code> // this will create the initial screenshots</li>
<li><code class="notranslate">npx playwright test</code> // this will compare the screenshots</li>
<li>repeat the last step (1 out of 5 times the tests will fail)</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">I expect all tests made with <code class="notranslate">toMatchSnapshot</code> to pass no matter how often I execute them.</p>
<p dir="auto"><strong>Actual</strong></p>
<ul dir="auto">
<li>tests made with <code class="notranslate">toMatchSnapshot</code> fail irregularly</li>
<li>tests made with <code class="notranslate">toHaveScreenshot</code> pass all the time</li>
</ul>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.33.0]</li>
<li>Operating System: [All, Windows 10.]</li>
<li>Browser: [All]</li>
<li>Other info: React 18.2</li>
</ul>
<h3 dir="auto">Source code</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot; xmlns=&quot;http://www.w3.org/1999/html&quot; xmlns=&quot;http://www.w3.org/1999/html&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
    &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
    &lt;meta
      name=&quot;description&quot;
      content=&quot;Web site&quot;
    /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;root1&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;root2&quot;&gt;&lt;/div&gt;
    &lt;script src=&quot;script-bellow.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;!DOCTYPE html&gt;
&lt;html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
    &lt;meta name="theme-color" content="#000000" /&gt;
    &lt;meta
      name="description"
      content="Web site"
    /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root1"&gt;&lt;/div&gt;
    &lt;div id="root2"&gt;&lt;/div&gt;
    &lt;script src="script-bellow.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {createRoot} from &quot;react-dom/client&quot;;

function MyReactComponent() {
    return &lt;div&gt;&lt;/div&gt;;
}

const container1 = document.getElementById(&quot;root1&quot;);
const root1 = createRoot(container1);
root1.render(&lt;MyReactComponent /&gt;);

root1.unmount(); // important

const container2 = document.getElementById(&quot;root2&quot;);
const root2 = createRoot(container2);
root2.render(&lt;MyReactComponent /&gt;);"><pre class="notranslate"><code class="notranslate">import {createRoot} from "react-dom/client";

function MyReactComponent() {
    return &lt;div&gt;&lt;/div&gt;;
}

const container1 = document.getElementById("root1");
const root1 = createRoot(container1);
root1.render(&lt;MyReactComponent /&gt;);

root1.unmount(); // important

const container2 = document.getElementById("root2");
const root2 = createRoot(container2);
root2.render(&lt;MyReactComponent /&gt;);
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="test(&quot;mycase&quot;, async ({page}) =&gt; {
  await page.goto(&quot;http://localhost:3000/&quot;);
  await page.locator(&quot;_react=MyReactComponent&quot;).click();
})"><pre class="notranslate"><code class="notranslate">test("mycase", async ({page}) =&gt; {
  await page.goto("http://localhost:3000/");
  await page.locator("_react=MyReactComponent").click();
})
</code></pre></div>
<p dir="auto"><strong>Config file</strong><br>
default</p>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>[Run the test]</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto"><code class="notranslate">MyReactComponent</code> of the <code class="notranslate">root2</code> receives a click.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">Test fails with error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    Error: locator.click: TypeError: null is not an object (evaluating 'node[rootKey].stateNode')
    =========================== logs ===========================
    waiting for locator('_react=MyReactComponent')"><pre class="notranslate"><code class="notranslate">    Error: locator.click: TypeError: null is not an object (evaluating 'node[rootKey].stateNode')
    =========================== logs ===========================
    waiting for locator('_react=MyReactComponent')
</code></pre></div>
<p dir="auto">After React unmounts at a DOM element that DOM element still contains property with <code class="notranslate">__reactContainer</code> prefix but it's value <a href="https://github.com/facebook/react/blob/0b931f90e8964183f08ac328e7350d847abb08f9/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js#L77">becomes</a> <code class="notranslate">null</code>. So <code class="notranslate">findReactRoots</code> fails <a href="https://github.com/microsoft/playwright/blob/cffb6ac269ab97ac63ac98d88244603e3349b793/packages/playwright-core/src/server/injected/reactSelectorEngine.ts#L155">here</a>.</p>
<p dir="auto">As a result usage of any React locator throws an error.</p>