Selenide is failing to remove elements with the displayed property set to false

On my automation tests, I am struggling to click a radio button. Even though the radio buttons are visible on the page, the unselected ones have the property displayed:false. Selenide seems unable to click if an html object has the displayed:false property. The error message received is: 

Element should be visible {By.id: radio_btn_id}

Here is the radio button in question:

<input class="radio_class" id="radio_btn_id" name="radio_btn_name" type="radio" value="12" displayed:false></input>

I've attempted to remove this property using various methods, but none of them seem to work:

SelenideElement element = $(By.id(id));
Selenide.executeJavaScript("document.getElementById('radio_btn_id').removeAttribute('displayed:false')", element);

Selenide.executeJavaScript("document.getElementById('radio_btn_id').removeAttribute(\"displayed:false\")", element);

Selenide.executeJavaScript("jQuery('select:not(:visible)').css('display','block')", element);

Oddly enough, removing the selected:true property did work. I'm not sure why it's unsuccessful for displayed:false. Any ideas?

[EDIT] The accepted answer involves using Selenium version. However, with Selenide it can be achieved more cleanly and simply:

SelenideElement element = $(By.id(id));
Selenide.executeJavaScript("document.getElementById('"+ id+ "').click();", element);

[SOLUTION]

Check out this resource on how Selenide behaves with checkboxes and radio buttons.

javascriptjavaseleniumselenide

Answer №1

JavaScript Executor for Element Click:

public void jsClickElement(By locating) {
    String jsCode = "arguments[0].scrollIntoView(true); arguments[0].click();";
    try {
        WebElement clickElement = driver.findElement(locating);
        ((JavascriptExecutor) driver).executeScript(jsCode, clickElement);
    } catch(Exception ex) {
        System.out.println("Could not click element: "  + ex.getMessage());
    }
}

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

Steps to Export Several Fusion Charts into Individual Image Files

My webpage contains multiple charts created using the Fusion Chart library. There are three different charts on the page, and I want to export each chart as a separate PNG file. However, when I click the export button, it generates separate images of the ...

javascriptjqueryangularfusioncharts

The method to permit a single special character to appear multiple times in a regular expression

I am currently working on developing a REGEX pattern that specifically allows alphanumeric characters along with one special character that can be repeated multiple times. The permitted special characters include ()-_,.$. For instance: abc_def is conside ...

javascriptregexangular

Building on Angular service hierarchy with Object.create()

Exploring the concept of inheritance in Angular services is my current objective. I came across this helpful resource: . I am particularly interested in implementing the "Inject the parent" technique. However, despite following the guidelines, I'm fa ...

javascriptangularjsoopinheritancefactory

Guide on excluding certain words within a paragraph using PHP

In my database, there is a paragraph that looks like this: $str ="this is a paragraph i show shortly and when i click on the view more it will show completely for that i am using the ajax and retrieve it " I display it as follows: this is a paragrap ...

phpjavascriptmysqlhtmlcss

Angular - Dividing Values within Input Arrays

In the input field available to users, they can enter multiple inputs separated by commas. <div class="container"> Enter your values:<input type="text" multiple #inputCheck> <input type="submit"(cli ...

javascripthtmlarraysangulartypescript

How to format numbers with commas in AngularJS to make them easier to read

One of my variables looks like this: $scope.numbers = 1234567. When I apply the filter {{numbers| number : 0}}, the result is 1,234,567. Is it possible to get a result like 12,34,567 instead? Thank you in advance. ...

javascriptangularjs

I am working with an array of objects in React JavaScript, and I need to find a way to convert it into

Currently, I am in the process of creating this JavaScript function: export function convertArrayObjToFileDownload(data, filename, filetype = 'application/octet-stream') { const blob = new Blob(data, { type: filetype }); downloadBlob(blob ...

javascriptarraysnpmblob

combine multiple select options values in a single function using jQuery

My HTML code includes two select options for users to choose the origin and destination cities. I need to calculate the cost of travel between these cities. How can I compare the selected options using jQuery? </head> <body> <div> ...

javascriptjqueryhtml

Mobile devices experiencing issues in loading Javascript scripts

Let me start by sharing my JS code: function getTimeRemaining(endTimeInput) { var endTime = new Date(endTimeInput); var currentTime = new Date(); var t = endTime - currentTime; var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 100 ...

javascriptjquerymobile

The padding of dynamically generated bootstrap buttons diminishes

I am facing an issue with a bootstrap button bar that is using the well class. The problem occurs when I create it twice in my code: once using HTML and another using dynamic javascript. The bootstrap functions properly when created with HTML. However, t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to choose a specific child element from dynamically added siblings using XPath?

I am trying to target the input element within a sibling 'ng-form' that is dynamically created when the child input of the previous sibling is touched. My goal is to select and interact with the input element of the sibling based on a specific a ...

c#seleniumselenium-webdriverxpath

The function passed to the modal is not functioning correctly when stored within the state

Is it possible to create a unique modal that can be utilized for multiple actions on the same page? To achieve this, I have implemented a state to store the title, description, and submit function for modal click and modal open state. In addition, I want t ...

javascriptreactjsfunctionmaterial-ui

Dependencies for Grunt tasks

I am facing some issues with a grunt task named taskA that was installed via npm. The task has a dependency on grunt-contrib-stylus, which is specified in the package.json file of taskA and installed successfully. However, when I run grunt default from the ...

javascriptnpmgruntjs

What could be causing the presence of additional characters in the responseText received from the Servlet to JavaScript via Ajax?

I am currently involved in a project where I am attempting to retrieve the username from a session that was created using the code below: GetCurrentUserInfo.java package servlet; import java.io.IOException; import java.io.ObjectOutputStream; import java ...

javascriptajaxservlets

How come I keep running into the "is not a function" issue when trying to use the generateRequest function with Polymer's iron-ajax

Oops, it seems like there was an error: Uncaught TypeError: this.$.ajax.generateRequest is not a function. The issue seems to be in assets-ajax.html at line 23. <dom-module id="assets-pull"> <style> </style> <template> <but ...

javascriptajaxpolymer

Express.js | Utilizing express.Router and handling route parameter inputs

I'm currently facing an issue with a small program I'm developing to practice Express.js. The problem lies in a separate router that is supposed to send a specific response based on the route. For example, when navigating to "/santiago", it shou ...

javascriptexpress

Retrieving xml data using ajax

Hey there, I'm working with an HTML file that looks like this: <!DOCTYPE html> <html> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } </style> & ...

javascripthtmlajaxxml

What is the best way to retrieve a value from an `<input type="number">` element and incorporate it into the script section?

Check out this code snippet <html> <head> head <title>title</title> </head> <script> var val1 = parseInt(document.getElementById('input1')); function bytton() { window.alert(val1); ...

javascripthtmlvariablesinput-field

Using JavaScript to fetch HTML and apply CSS dynamically

Is there a way to retrieve all HTML within a div along with the corresponding CSS? A majority of the CSS is defined in classes within an external stylesheet. document.getElementById("mydiv") Currently, using the above code only fetches the HTML with inli ...

javascriptcss

Issue with Nextjs environmental variables not functioning in JavaScript pages

Currently, I am in the process of developing a Next.js website. Within my JavaScript file, I am fetching data from an API and assigning a token using the .env.local file. However, when attempting to access the .env variable that I've set up, it seems ...

javascriptreactjsnext.jsenvironment-variables