I am encountering an issue where I am unable to click on a element within an SVG on my website using Playwright. I am trying to select the element by its ID and perform a click, but Playwright fails to find the element.

await page.goto('http://...');
await page.waitForSelector('svg #side-selector-tc', { state: 'attached' });
await page.click('svg #side-selector-tc');

I tried the same thing

await page.locator('#side-selector-tc').click();

The SVG is nested inside a with the class csl-svg-workspace. Here’s a brief overview of the SVG structure

<name-componenet ng-reflect-p="[object Object]" ng-reflect-side-select-mode="true">
  <div id="workspace">
    <svg xmlns="http://www.w3.org/2000/svg" ...>
      <path class="side-selector" id="side-selector-tc" d="..."></path>
    </svg>
  </div>
</name-componenet>

When I run the script, Playwright fails to locate the #side-selector-tc element, although it definitely exists in the DOM and is visible. There might be issues with selecting elements within SVGs or some nuances with SVG handling that I am missing

I tried using autotest, but also unsuccessfully