[Bug]: Components Render blue because of injected script

[moshie]

Version

1.53.0

Steps to reproduce

1. Create a fresh app with playwright component testing
2. Create a button styled with a background of red
3. create a test and mount that component
4. you'll see the button has changed color to blue because of the injected script here: https://github.com/microsoft/playwright/commit/741c649d5651b8768eb6f26c2a38731b97c16af0#diff-85a352f17bfa4a6a5f09a9bad0bd59ab9bff9adcba52077acef8f4f286879bfeR224-R225

Expected behavior

I expect the component not to be affected by the injected script

Actual behavior

When using component testing there is an injected script which targets __playwright_target__ and it adds outline and background to components which isn't intended behaviour.

As you can see in the screenshot the outline and background are being added as inline styles on the component.

Additional context

No response

Environment

System:
    OS: macOS 15.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.31 GB / 32.00 GB
  Binaries:
    Node: 22.16.0 - /opt/homebrew/opt/node@22/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /opt/homebrew/opt/node@22/bin/npm
    pnpm: 10.12.1 - ~/Library/pnpm/pnpm
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/experimental-ct-react: ^1.53.0 => 1.53.0
    @playwright/test: ^1.53.0 => 1.53.0

[dgozman]

@moshie This is the intended behavior in the Trace Viewer to highlight the target element of the expect().toContainText() call. I guess we can add a checkbox to toggle this highlight on and off.

[moshie]

I think that's a good idea, not sure what your thoughts are on disabling it on a test by test basis instead of globally?