Testcafe doesn't see SVGs from a shadowDom

[liviuavram]

What is your Scenario?

The application I'm testing with testcafe has a bunch of shadowDoms, within those there are SVGs. Whenever I try to click on any or expect any svg, I get the following: Click -> TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' expect to be visible -> 1) Uncaught object "[object Object]" was thrown. Throw Error instead.

This happens for all SVGs that are in a shadowDom. Regular SVGs work fine.

NOTE: This issue doesn't happen in Testcafe v17, but opening links don't work in that version.

What is the Current behavior?

Explained in the scenario. SVGs are not seen. As if they don't exist.

What is the Expected behavior?

I can use SVGs from a shadowDom.

What is your public website URL? (or attach your complete example)

shadowDom-svg.zip

I got a shadowDom example off of google and just added the SVG to it, same behavior as if I'm using the actual application. If the actual application is required, I can provide limited access to our test environment.

What is your TestCafe test code?

import { Selector, t, test } from 'testcafe'

fixture Shadow dom svg test .page(../test/random svg.html) test('Shadow dom svg test', async(t) => { var demoShadowDom = Selector('show-hello').shadowRoot() var svg = demoShadowDom.child('svg') //await t.click(svg) await t.expect((svg).visible).ok('not visible :(') })

Your complete configuration file

Your complete test report

Screenshots

Steps to Reproduce

1. Download the zip attached.
2. run npm install
3. run npm run Debug
4. Notice the problem.
5. Uncomment await t.click(svg)
6. run npm run Debug
7. Notice the other problem.

This can be reproduced with any svg that is part of shadowDom at least for us.

I also tried this approach to get stuff from shadowDom, doesn't work: private apdSelector = Selector(() => document.querySelector('agent-performance-dashboard-fragment').shadowRoot)

TestCafe version

1.20.1

Node.js version

16.6.0

Command-line arguments

npm run Debug

Browser name(s) and version(s)

Edge latest, Chrome latest

Platform(s) and version(s)

Windows 10

Other

No response

[VasilyStrelyaev]

Thank you for the example. I have reproduced the behavior you described. We will update this thread once we have any news.

[liviuavram]

Hi! Is this fixed in testcafe v2.0.0? We are currently stuck with v1.15 and we have some troubles, would like an update on this. Thank you for your hard work!

[github-actions[bot]]

No updates yet. Once we get any results, we will post them in this thread.

[CiprianBota]

I need this issue to be fixed soon, cannot move forward with testing without this fix. Why is taking so long to fix this issue?

[miherlosev]

Hi @CiprianBota,

We fix issues according to the issue frequency. At present, there are a few issues with a higher priority than this one. You can try to investigate the issue yourself and create a PR with the fix.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any activity for a long period. It will be closed and archived if no further activity occurs. However, we may return to this issue in the future. If it still affects you or you have any additional information regarding it, please leave a comment and we will keep it open.

[github-actions[bot]]

We're closing this issue after a prolonged period of inactivity. If it still affects you, please add a comment to this issue with up-to-date information. Thank you.