Retrieve the CSS property value and apply it in Selenium testing

Attempting to retrieve a website attribute (such as the color of a cell) and compare it in Selenium has been challenging for me.

When I enter this code snippet into the Chrome Omnibox:

javascript:window.getComputedStyle(document.getElementById("simple_cname"),null).getPropertyValue("background-color");

I receive the correct answer, but when I try to get this value using storeEval or assertEval in Selenium, it does not work properly.
edit: I implemented the Selenium command like this. I used storeEval and when I echoed the value, it simply returned the same command. I am using Firefox. I checked in Chrome just to verify if the command is accurate (it should be "rgb(220, 22, 92)"). edit2: Yes, the command is valid, but I seem to have an issue with utilizing it in the Selenium-IDE tool. It fails to return the value when I use it with the storeEval command. log: [info] script is: var test javascript:window.getComputedStyle(document.getElementById("simple_cname"),null).getPropertyValue("background-color"); echo test; [info] Executing: |echo | ${test} | | [info] echo: var test javascript:window.getComputedStyle(document.getElementById("simple_cname"),null).getPropertyValue("background-color"); echo test;


I set up the Selenium command like so, using storeEval, and even upon echoing the value, it still iterates the same command. I prefer Firefox. The usage of Chrome was solely for validation purposes to ensure the accuracy of the command ("rgb(220, 22, 92)").

Answer №1

To properly execute the command, you must exclude the javascript: portion and refer to document as window.document. The revised command should appear like this:

window.getComputedStyle(window.document.getElementById('simple_cname'),null).getPropertyValue('background-color');

The utilization of javascript: is essential only when running the code from your URL bar; it is redundant elsewhere. For executing JS commands in Chrome, utilize the Console, not your Omnibox.

The transition from document to window.document is highlighted in the documentation within the storeEval section.

Additionally, be aware that your script is compatible with modern browsers, but will encounter issues in IE versions older than 9. If this limitation is acceptable to you, then great. If not, a potential solution can be found through Google's resources.

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

When trying to access a URL in a next.js application using the fetch() function, the router encountered an

I recently started working on a frontend project using Next.js v13.4 app router, with an additional backend. I have organized my routes and related functionalities in the api folder within the app directory. However, when I attempt to use the fetch() funct ...

Semantic UI dropdown field not displaying selected option text

I've encountered an issue while working with React Semantic UI. I'm trying to render a dropdown and have configured it so that the selected option's text should display in the field. However, when I choose an option from the dropdown, instea ...

Javascript recursive function calling itself

I've been struggling with the logic in my code and it seems like I've been staring at it for too long to spot the issue. A strange recursion occurs when this piece of code runs after a 30-second timeout, resulting in multiple GET requests to rese ...

Why does my icon container persistently remain visible, rather than appearing only upon hovering?

Below is the code snippet I'm currently working with: .page-section { border: 4px solid rgba(0,0,0, 0); padding: 10px; box-sizing: border-box; transition: border 1s ease-out; } .page-section:hover { border: 4px solid #000000; ...

Trouble with Bootstrap popover displaying content

I've been working on implementing the bootstrap popover feature on a website and have had some success. I managed to get the popover to appear when the link is clicked, but unfortunately, I'm not seeing any content in the box other than the title ...

Utilizing a try/catch block for validating a JSON file is ineffective

I'm attempting to verify if a received string is JSON and I experimented with the code below: try { JSON.parse(-10); // Also tried with "-10" }catch(e) { console.log('inside catch'); } Surprisingly, the code never enters the catch ...

Place objects at the bottom of the container

Is there a way to align each "Read more" button at the bottom of its respective div without setting a specific height for the divs or changing any markup or style elements? While pseudo class selectors could be used, is there a simpler approach that would ...

How can I resolve the issue of Angular displaying "NaN" instead of a date when converting a date into a

There was an issue with the date format coming from the server, displaying "Thu Jan 07 2016 11:00:40 GMT+0530 (IST)". I managed to convert this date into a more readable format as "1/7/2016 11:00 am". However, my goal is to have the date displayed in mm/dd ...

Utilizing getJSON to parse data from a hierarchical JSON file for visualization in Google Chart

Need help with adding JSON data to a Google Charts table. Check out the jsfiddle for a quick overview. Having trouble getting the json data added to the table - any suggestions are welcome! Struggling to add multi-level JSON data to a Google Charts Table. ...

What could be causing the lack of responsiveness on this page?

I have created a webpage with over 1100 lines of code using JSF 2.0. The page is filled with PrimeFaces components and I have implemented JQuery to control the appearance and disappearance of these components. The webpage functions smoothly on Firefox 4.0 ...

Is it possible to use Prettier in ESLint for formatting Markdown and CSS files?

At the moment, I have Prettier set up with ESLint using the configuration provided in my .eslintrc.json file: { "extends": ["react-app", "plugin:prettier/recommended"] } Everything works smoothly for linting and formatting JavaScript files. However, I ...

getting information from a URL

When accessing a specific link in my Node application http://localhost:5000/payment?issue=123456 A callback function is triggered within the app to handle this event app.get('/payment', function(req, res){ res.render('payment', { u ...

How come the behavior of Array.prototype.push() results in creating an endlessly nested array when used on itself?

While testing out the following code: const animals = ['pigs', 'goats', 'sheep']; animals.push(animals) console.log(animals); An error occurred in my testing environment: Issue: Maximum call stack size exceeded. What is c ...

How can I execute JavaScript code within Aptana Studio 3 IDE?

After creating a Test.js file, I added two lines of JavaScript code: var x = 5; console.log("The answer is: " + x); The desired output would be: "The answer is: 5" I am curious if there's a way to view this outcome in the Aptana Scripting console, ...

Is it possible for the js serialize() function to work with array field names?

One of my form fields is structured like this: <input name="cm[3]" value="0.0000"> When I send this data to a secure ajax function using the serializeData method: var formData = $(form).serialize(); console.log(formData); secureajax.securecall({ ...

At what point is the args variable required by Dojo?

There comes a point when passing the args variable to an anonymous function in Dojo becomes necessary, even though the function itself may not visibly need it. This can lead to confusion as there is no clear indication on the Dojo help page regarding whe ...

Identifying when the mouse hovers over a hidden element

Is there a way to make events trigger for <mark> elements under a <textarea>? I've tried adding mouseover listeners, but they don't seem to work because of the <textarea>. I need the <text-area> to function normally, so u ...

Selenium IDE: Mastering Variable Passing

Every day, I need to log in to three different accounts on a website and print a report. Although I have created a Selenium IDE recording that allows me to do this, I find myself manually changing the variables for the usernames and passwords each time. I ...

Inserting variables into Angular queries

I am encountering a dilemma on how to insert a variable from an array into a query string. The filter function is functioning properly, but the search function seems to be ineffective. The variable 'id' successfully retrieves the id from the sele ...

Error: The selectBox function is not defined for $(...)

Currently, I am encountering an issue with the code snippet below when attempting to select options from a dropdown: Uncaught TypeError: $(...).selectBox is not a function. This error message appears in the console. In order to resolve this problem, I ha ...