[Bug]: CT - Mounted component is not visible

[KrzGruszcz]

Version

1.53.0

Steps to reproduce

I'm adding some CT using Vite and React. The test fails when the element is mounted but is not visible. The error message screenshot is taken from the console in the UI view:

Expected behavior

The element should be visible.

Actual behavior

The element is not visible.

Additional context

No response

Environment

System:
    OS: macOS 15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1000.55 MB / 32.00 GB
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
  IDEs:
    VSCode: 1.101.0 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/experimental-ct-react: ^1.53.1 => 1.53.1 
    @playwright/test: 1.53.0 => 1.53.0

[Skn0tt]

Hi! I'd like to look into this, but I can't reproduce this based on the screenshot alone. Please follow the issue template and provide me with a reproduction case that I can run on my machine to debug this.

[KrzGruszcz]

@Skn0tt I've added a link to the repo to reproduce the issue.

[Skn0tt]

I don't see a link to a repo, where is it?

[KrzGruszcz]

https://github.com/KrzGruszcz/playwright-issue-36417

[Skn0tt]

If you want to import SVG files and use them as React components, you need to setup a Vite plugin for that. This should work:

diff --git a/playwright-ct.config.ts b/playwright-ct.config.ts
index 4832fcc..5972c82 100644
--- a/playwright-ct.config.ts
+++ b/playwright-ct.config.ts
@@ -2,6 +2,7 @@
 import { defineConfig, devices } from '@playwright/experimental-ct-react';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import svgr from 'vite-plugin-svgr'
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -32,7 +33,7 @@ export default defineConfig({
     ctPort: 3100,
     // Reference the Vite config file path instead of passing plugins directly
     ctViteConfig: {
-      plugins: [tsconfigPaths(), react()],
+      plugins: [tsconfigPaths(), react(), svgr({ include: '**/*.svg' })],
       test: {
         environment: 'jsdom',
         exclude: [

I also had to clear the playwright/.cache directory for the change to be picked up.

[dgozman]

Closing as per above.