[Chrome 100.0.4896.60 / Linux 0.0] Running testcafe headless on a default linux image (see gitlab pipelines f.e.) does not recognize any webelement

Mihai-Bota commented 2 years ago

What is your Scenario?

Given I estabilish a new testcafe project When I create an automation E2E on a webpage (e.g. www.google.com) And I want to execute the flow on linux server And I use the chromium or firefox which come by default on Chrome 100.0.4896.60 / Linux 0.0 (gitlab pipelines) Then I will receive the error "The specified selector does not match any element in the DOM tree." for any element which i'm trying to perform an action.

Note: locally on macos or windows, the execution works fine headless, this happens only on gitlab pipelines or jenkins

What is the Current behavior?

I will receive the error "The specified selector does not match any element in the DOM tree." for any element which i'm trying to perform an action.

What is the Expected behavior?

The scenario is executed remote on Jenkins or Gitlab Pipelines on Firefox or Chrome

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

www.google.com

What is your TestCafe test code?

import {environment} from '../environments/environment'; import { testfilePage } from '../pageObjects/testfilePage';

const googlePage: testfilePage = new testfilePage();

fixture Getting Started

test('Reach google page proof of concept test', async t => { await t .navigateTo(environment.url) .setTestSpeed(environment.testspeed) .resizeWindow(1920, 1080); //here the action occurs await t.click(googlePage.agreeButton), {timeout: 3000}; await t.expect(googlePage.title.innerText).eql('Google'); });

Your complete configuration file

No response

Your complete test report

No response

Screenshots

Steps to Reproduce

1. 2. 3.

TestCafe version

1.18.5

Node.js version

No response

Command-line arguments

testcafe chromium:headless fixtures/*

Browser name(s) and version(s)

Chrome 100.0.4896.60 / Linux 0.0 or Firefox

Platform(s) and version(s)

Linux 0.0

Other

No response

thelazurite-cell commented 2 years ago

I've run into something like this before with the google homepage.

This could be a workaround for you; would you mind trying this with the privacy modal, please? :-)

In your test add this:

const privacyModal = '#xe7COe';
await removeElement(t, privacyModal);

add the function below to your test script:

async function removeElement(t, elementSelector) {
  await ClientFunction(elementSelector => {
    const element = document.querySelector(elementSelector);
    element.parentNode.removeChild(element);
  }).with(t)(elementSelector);
}

What the function above does, is remove the privacy modal entirely. Not ideal, but from there you should be able to continue with your test as normal

miherlosev commented 2 years ago

Hi folks,

It's not a TestCafe issue. The google.com website is rendered differently depending on the environment. You can record a video to determine which web element is not found and why it happens. After that, you can add conditional logic to remove or hide the required elements.

Mihai-Bota commented 2 years ago

i'm using a private website, not google, maybe i've logged the wrong example. will add a new issue asap.

DevExpress / testcafe