Testcafe fails in Azure Devops build pipeline TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

[liviuavram]

What is your Scenario?

I am running a bunch of E2E tests using an Azure Devops build pipeline. All tests pass locally or on the target VM directly (bypassing azure devops agent). However when using the pipeline itself, some tests fail. It could be because of shadowRoot, but it works fine for other places with shadowRoot.

private chatFragmentRoot = Selector(() => document.querySelector('chat-fragment').shadowRoot.firstChild)
private dropChatBtn = this.chatFragmentRoot.find('svg').withAttribute('data-icon', 'times')
private terminateChatPrompt = this.chatFragmentRoot.find('div.max-w-sm.rounded-lg.overflow-hidden.shadow-lg.relative.mx-4.my-4.bg-white')
private confirmDropChatBtn = this.chatFragmentRoot.find('div.rounded-full.py-2.px-5.cursor-pointer.m-1.bg-blue.text-white').withText('Leave')

async dropChat ()
{
    console.log('Terminating the chat interaction..')
    await t
        .click(this.dropChatBtn)
        .expect((this.terminateChatPrompt).visible).ok({timeout: 2000})
        .click(this.confirmDropChatBtn)
}

What is the Current behavior?

1. An error occurred in Selector code: TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. Browser: Chrome 103.0.5060.134 / Windows 10 20 | 21 | async dropChat () 22 | { 23 | console.log('Terminating the chat interaction..') 24 | await t

25 | .click(this.dropChatBtn)

What is the Expected behavior?

No error, test passes. Or at least signals a problem that can be solved on my side.

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

I cannot do that, however with Azure Devops hosted agent, it might be reproducible if you have shadow dom.

What is your TestCafe test code?

export default class ChatFragment { private chatFragmentRoot = Selector(() => document.querySelector('chat-fragment').shadowRoot.firstChild) private dropChatBtn = this.chatFragmentRoot.find('svg').withAttribute('data-icon', 'times') private terminateChatPrompt = this.chatFragmentRoot.find('div.max-w-sm.rounded-lg.overflow-hidden.shadow-lg.relative.mx-4.my-4.bg-white') private confirmDropChatBtn = this.chatFragmentRoot.find('div.rounded-full.py-2.px-5.cursor-pointer.m-1.bg-blue.text-white').withText('Leave')

async dropChat () { console.log('Terminating the chat interaction..') await t .click(this.dropChatBtn) .expect((this.terminateChatPrompt).visible).ok({timeout: 2000}) .click(this.confirmDropChatBtn) } }

Your complete configuration file

node 16.6.0 "dependencies": { "@types/node": "^18.6.1", "axios": "^0.27.2", "colors": "^1.4.0", "dotenv": "^16.0.1", "npm-check-updates": "^16.0.1", "qs": "^6.11.0", "testcafe": "^1.20.0", "testcafe-browser-tools": "^2.0.23", "testcafe-react-selectors": "^5.0.2", "testcafe-reporter-junit": "^3.0.2", "ua-parser-js": "^1.0.2" }

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

1. Run tests containing elements with .shadowRoot using an Azure devops self-hosted agent.
2. At some point it might fail because of the error.

TestCafe version

1.20.0

Node.js version

16.6.0

Command-line arguments

"AgentClient": "node --max-http-header-size=1024000 ./node_modules/testcafe/bin/testcafe.js "chrome" .\Tests\AgentClient\01_chatTests.ts -r junit:report.xml --skip-js-errors",

Browser name(s) and version(s)

Chrome latest

Platform(s) and version(s)

Azure Devops self-hosted agent v2.206.1

Other

No response

[github-actions[bot]]

Thank you for submitting this issue. We would love to assist you and diagnose it. However, we need a simple sample that we can easily run on our side in order to replicate the issue and research its cause. Without a sample, we are not able to figure out what's going on and why this issue occurs. Refer to this article to create the best example: How To: Create a Minimal Working Example When You Submit an Issue. We look forward to your response.

[github-actions[bot]]

This issue was automatically closed because there was no response to our request for more information from the original author. Currently, we don't have enough information to take action. Please reach out to us if you find the necessary information and are able to share it. We are also eager to know if you resolved the issue on your own and can share your findings with everyone.