The selector is present, but I am unable to retrieve information about the node since the specified selector does not correspond to any node within the DOM tree

Working on building an E2E test using NodeJS and TestCafe.

We recently integrated BrowserStack for cross-browser testing, focusing on Windows7:firefox & Windows10:firefox. However, encountering failures only when running scripts in this specific configuration. No issues with Samsung Galaxy S9:chrome, Samsung Galaxy S9:firefox, Windows 10:edge, or Windows 7:chrome.

Our site's design is responsive to window size changes. Small windows display a hamburger menu button, while large windows show all options on a header bar.

Struggling with Firefox on Windows 7 and 10, trying to adapt script code without relying on dynamic scenario parameters like screen resolution or browser specifics. Avoiding complex conditions like:

if (OperatingSystem === 'Windows' && Browser === 'firefox')

--This approach feels cumbersome and not ideal.

Despite successful runs on other devices, encountering problems specifically with Firefox on Windows desktops. The issue arises when searching for the hamburger menu button that doesn't appear on these systems.

if (Selector('blablabla', {( visibilityCheck: true )})

differs from

if (Selector('blablabla').visible === true)

The latter is preferred but still leads to errors due to differences in element visibility perception between platforms.

Aiming for a universal solution applicable across all scenarios. Open to suggestions or insights. Thank you!

For similar queries:

TestCafe - How to check if a web element exists or does not exist without failing the test?
node.jsecmascript-6cross-browserbrowserstacktestcafe

Answer №1

We had to develop a custom client function that could retrieve the computed style by using a querySelector and extracting its property value.

The final solution code looked something like this:

const getHamburgerDisplayValue = ClientFunction(() => {
     var hamburgerDisplayValue;

     hamburgerDisplayValue = window.getComputedStyle(document.querySelector('span.navbar-burger')).getPropertyValue('display');

     return hamburgerDisplayValue;
 });

Then, the calling code appeared as follows:

 var hamburgerDisplayValue = await Common.getHamburgerDisplayValue();

 // Perform actions
 if (hamburgerDisplayValue === 'block') {
      await t.click(navbar.hamburgerMenu);
 }
 await t.click(navbar.login);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for choosing one specific element among multiple elements in cheerio nodejs

Currently, I'm attempting to extract links from a webpage. However, the issue I'm encountering is that I need to extract href from anchor tags, but they contain multiple tags with no class within them. The structure appears as follows. <div c ...

javascriptnode.jscheerio

Encountering an undisclosed CORS error on all requests from Angular frontend to NodeJS Express Server during preflight 200

After thorough testing with Postman, my backend server is functioning properly and generating the desired responses for all requests. However, my Angular app is encountering an unknown CORS error on every request despite receiving a 200 Preflight response ...

node.jsangularexpresscorspreflight

Terminate the current node-simplecrawler instance before initializing a new one to ensure exclusive operation (enforce singleton behavior)

Greetings, all! I have been working on a web scraper using node-simplecrawler. Everything is functioning smoothly, but I am facing a challenge in stopping one instance when initializing a new one (I aim to run only one at a time). My setup involves expres ...

node.jsexpress

Using MongoDB and Pug/Jade templates with Google Maps API to display multiple markers in

I've been attempting to integrate map location data from my mongodb collection, but I've run into an issue where I can only access one piece of data at a time. I tried looping through the data both on the server-side and client-side to display it ...

node.jsmongodbgoogle-mapsexpresspug

Node.js VAR DeclarationIn the world of Node.js, we make

I am currently expanding my knowledge on Node.js. I came across a line in my book that has sparked my curiosity, and I wanted to seek some clarification. The specific line in question is: var user = req.user = users[req.params.name]; After doing some re ...

javascriptnode.jsexpress

Handlebars does not support loading data into variables using Express

My NodeJS/Express application utilizes Handlebars for templates, and everything works smoothly except when attempting to display data retrieved from an Express API. The data is successfully fetched and can be viewed in the Chrome debugger. In the problem ...

javascriptnode.jsexpresshandlebars.jsexpress-handlebars

The loading of npm installed Firebase in Angular4 is not successful

I am currently facing an issue while trying to integrate npm installed Firebase with my Angular4 application. I have successfully installed the latest version of Firebase (version 4.1.1) using npm and verified that the installation was successful. Below is ...

node.jsangularfirebasenpmhttp-status-code-404

Tips for speeding up the process of sending emails with nodemailer and firebase

We've successfully implemented code that triggers emails to a user and their contacts whenever a new node is added to a specific path in Firebase's realtime database. Currently, the average time taken to send these emails is approximately 4 minu ...

node.jsfirebaseasync-awaitgoogle-cloud-functionsnodemailer

What could be causing the issue with npm modules installation?

I've been having trouble installing the react-native-cli module, as well as any other module. Here's what I've tried: npm install -g react-native-cli When I run this command in the terminal, I keep getting an error. I've used node on ...

node.jsterminalnpmreact-native

Issues encountered while loading the Tensorflow.js model in a bootstrap webpack demonstration

I've been working on loading a JSON-formatted model in Tensorflow.js using the Bootstrap webpack example from GitHub. Initially, when I used Tensorflow.js without bootstrap in webpack, the code worked perfectly either in webpack or if I included it v ...

node.jsnpmwebpackbootstrap-5tensorflow.js

Utilizing Mongoose for incorporating embedded documents within forms

Within my Mongoose schema named Question, I have a straightforward setup for storing questions and their corresponding answers. Answers are defined in a separate schema and stored as embedded documents within the Questions collection. Below is the outline ...

node.jsexpressmongoosepug

The specific Local Npm module named "GRUNT-PLUGIN-MODULE" could not be located. Have you installed this module? What could be the reason for its absence?

Steps to integrate your new grunt-plugin module with your project. Here is an example of directory structure: |-- xyz-project | |-- ... | |-- app.js | |-- Gruntfile.js --> `grunt.loadNpmTasks('my-custom-grunt-plugin');` | ...

node.jsgruntjsnpmgrunt-plugins

Utilizing the Google Site Verification API through a Firebase cloud function

I am attempting to utilize the Google Site Verification API from a Firebase function using Node.js. The README found in the google-api-nodejs-client repository on Github advises using the default application method over manually creating an OAuth2 client, ...

node.jsfirebasegoogle-cloud-functionsgoogle-site-verification-api

Understanding NodeJS Code

As a newcomer to nodejs, I've been delving into some code and trying to grasp its concepts. Could someone kindly guide me in understanding the following code snippets? My inquiries might be basic, but please note that I'm on a learning curve with ...

node.jsexpress

Mongoose retrieves the entire document, rather than just a portion of it

I'm currently experiencing an issue with my mongoose query callback from MongoDB. Instead of returning just a specific portion of the document, the code I'm using is returning the entire document. I have verified that in the database, the 'p ...

javascriptnode.jsmongodbmongoose

Having difficulty with pagination within a callback function

I have been attempting to paginate in a call to a callback function, but I am encountering an error on the second call. Here is what my function does: let content = '' let size = 100 let from = 1 function result(size, from, callback) { ap ...

javascriptnode.jsexpressecmascript-6

Patterns for RESTful routes

I have set up the routes 'customers/45' and 'customers/recently-created' in my express application, but for some reason the 'customers/recently-created' route is not calling 'CustomerHandler.getRecentlyCreatedCustomers&ap ...

node.jsrestexpress

After the installation of Windows 10 and the latest version of NodeJS, Gatsby seems to be

The gatsby project I set up following the official website instructions seems to be malfunctioning. NodeJS version: v16.15.0, npm version: 8.8.0, gatsby version: 4.13.0, gatsby CLI version: 4.13.0 C:\Users\Dell\Desktop\New folder&bsol ...

javascriptnode.jsreactjsnode-modulesgatsby

During the installation of a package, npm encountered a require stack error with the code MODULE_NOT_FOUND

Whenever I attempt to install something using the npm install command, it throws an error saying "require stack" and "code MODULE_NOT_FOUND" C:\Users\dell>npm audit fix node:internal/modules/cjs/loader:1075 const err = new Error(message); ...

javascriptnode.jsnpmerror-handling

Node API is failing to insert user data into MongoDB

I'm currently developing a Restful API using Node.js and storing data in Mongodb, focusing on the user registration API. app.js apiRoutes.post('/signup', function(req, res) { if (!req.body.name || !req.body.password) { res.json({suc ...

javascriptangularjsnode.jsmongodb