<p dir="auto">First of all, thanks for provide great tools for e2e testing</p>
<p dir="auto">But do it possible do thing like in cypress components test currently ?</p>
<p dir="auto"><a href="https://docs.cypress.io/guides/component-testing/introduction" rel="nofollow">https://docs.cypress.io/guides/component-testing/introduction</a></p>
<p dir="auto">Just render the react component and assert the results?</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.32.0</li>
<li>Operating System: macOS 13.2</li>
<li>Browser: Chromium</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="test('Associated Content Editable', async ({
  page,
}, testInfo) =&gt; {
  testInfo.snapshotSuffix = '';
  await page.goto('localhost:3000/archimedes.html');
  const elementCoordinates = await page.locator(`#main-editor [data-id=&quot;mc_FL74IM4XB00006_vhX7FK&quot;]`).boundingBox();

  //Putting cursor at the start of 2nd associated content
  const xPos = elementCoordinates.x;
  const yPos = elementCoordinates.y;
  await page.mouse.click(xPos, yPos);

  //Third Backspace should do nothing - prevent pushing associated
  //content tag within another associated content tag.
  await keyPress(page, `Backspace`);
  await waitForTime(page, 200);
  await keyPress(page, `Backspace`);
  await waitForTime(page, 200);
  await keyPress(page, `Backspace`);
  await waitForTime(page, 200);

  const editor = await page.waitForSelector('#main-editor');
  const fieldValue = await editor.evaluate((el) =&gt; el.innerHTML, editor);

  expect(fieldValue).toMatchSnapshot();

  await page.close();
});"><pre class="notranslate"><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'Associated Content Editable'</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-kos">,</span> <span class="pl-s1">testInfo</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-s1">testInfo</span><span class="pl-kos">.</span><span class="pl-c1">snapshotSuffix</span> <span class="pl-c1">=</span> <span class="pl-s">''</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">'localhost:3000/archimedes.html'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">elementCoordinates</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">locator</span><span class="pl-kos">(</span><span class="pl-s">`#main-editor [data-id="mc_FL74IM4XB00006_vhX7FK"]`</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">boundingBox</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-c">//Putting cursor at the start of 2nd associated content</span>
  <span class="pl-k">const</span> <span class="pl-s1">xPos</span> <span class="pl-c1">=</span> <span class="pl-s1">elementCoordinates</span><span class="pl-kos">.</span><span class="pl-c1">x</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">yPos</span> <span class="pl-c1">=</span> <span class="pl-s1">elementCoordinates</span><span class="pl-kos">.</span><span class="pl-c1">y</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-c1">mouse</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-s1">xPos</span><span class="pl-kos">,</span> <span class="pl-s1">yPos</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-c">//Third Backspace should do nothing - prevent pushing associated</span>
  <span class="pl-c">//content tag within another associated content tag.</span>
  <span class="pl-k">await</span> <span class="pl-en">keyPress</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">,</span> <span class="pl-s">`Backspace`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-en">waitForTime</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">,</span> <span class="pl-c1">200</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-en">keyPress</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">,</span> <span class="pl-s">`Backspace`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-en">waitForTime</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">,</span> <span class="pl-c1">200</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-en">keyPress</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">,</span> <span class="pl-s">`Backspace`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-en">waitForTime</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">,</span> <span class="pl-c1">200</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-s1">editor</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">waitForSelector</span><span class="pl-kos">(</span><span class="pl-s">'#main-editor'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">fieldValue</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">editor</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-s1">el</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">el</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span><span class="pl-kos">,</span> <span class="pl-s1">editor</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">fieldValue</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toMatchSnapshot</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">close</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>