selecting a style with "display: block;" using Selenium WebDriver

I'm having trouble clicking on an element with the style "display: block;" and can't seem to make it work.

Here is the sample html snippet

<div class="fl f18 dtoggler pointer underline some-padding new_data_entry" data-div-id="eBWJcg" data-div-ref="new_Passport_form.eBWJcg">+ Add Passport</div>
<div class="clear new_Passport_form qEgULQ some-margin togglable" style="display: none;">

Selenium script:

driver.get("idfystaging.com/users/sign_in"); 
driver.findElement(By.name("user[login]")).sendKeys("rustam1‌​@yopmail.com"); 
driver.findElement(By.name("user[password]")).sendKeys("Pass‌​word123"); 
driver.findElement(By.name("commit")).click();     
driver.switchTo().frame("upload_iframe_1");
driver.findElement(By.cssSelector("body")).sendKeys(Keys.ESC‌​APE); 
JavascriptExecutor executor= (JavascriptExecutor)driver;
executor.executeScript("document.getElementById('qEgULQ').st‌​yle.display='block';‌​").click();

Error message:

Cannot read property 'style' of null.
javascripthtmlcssselenium-webdriverhidden-field

Answer №1

Attempting to apply Javascript to an element with the id="qEgULq", when in fact you need an element with class="qEgULq":

Simply replace 

executor.executeScript("document.getElementById('qEgULQ').st‌​yle.display='block';‌​");

with

executor.executeScript("document.querySelector('div.clear.new_Passport_form.qEgULQ.some-margin.togglable').st‌​yle.display='block';‌​");

Also, take note that your click(); from the provided code snippet is not bound to any element

Update

If some class names are dynamically generated or assigned only on certain events, consider avoiding the use of class names as locators:

WebElement targetDiv = driver.findElement(By.xpath("//div[text()='+ Add Passport']/following-sibling::div"));
executor.executeScript("arguments[0].st‌​yle.display='block';‌​", targetDiv);

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

Having trouble getting async and await to function properly

Why is my code not waiting for validation and running the else part immediately? Can you help me find the mistake? async validateBeforeSubmit(event) { await this.$validator.validateAll().then(result => { if (result) { ...

javascriptvue.jsasync-await

Leverage the input value from a text field within the same HTML document

Is it possible to utilize the input text value assigned to name='t0' within the same HTML document? Here's the code snippet you can refer to - <!DOCTYPE html> <head> <link rel="stylesheet" href="https://sta ...

htmldjangoformsbootstrap-4

Spin the context of every element using JavaScript

const pic = new Image(); pic.src = 'assets/img/image.png'; for (let i = 0; i < this.bombs.length; i++) { const bomb = this.bombs[i]; ctx.drawImage(pic, bomb.x - 2, bomb.y - 2, 15, 8); } I have an image falling from the top of my canvas g ...

javascripthtmlhtml5-canvas

Creating dynamic dropdown menus in React JS through conditions

I'm currently working on a Dnd Character Sheet builder and I need to implement 6 dropdowns for the main stats. Each dropdown should have options from an array of values [8,10,12,13,14,15]. However, once a number is selected in one dropdown, it should ...

javascriptreactjsdropdown

Swap the particular term within the href attribute to .data()

Is there a way to dynamically update the CSS file being linked in my website based on radio button selections? Here's an example of what I am trying to achieve: <link id="custom-css" href="mysite/css/color1.css" rel="stylesheet" type="text/css"/&g ...

jqueryhtml

Unable to display keyboard on HTML input form in webview

Can someone assist me with displaying and allowing the keyboard to show and input properly? In my simple app, I have a main screen with buttons. When a button is clicked, it opens a webview. One of the buttons opens a webview to an HTML page with an input ...

androidhtmlkeyboardwebview

Initiate WSO2 BPEL using a web-form

Exploring the capabilities of WSO2 Enterprise Integrator, I have a question: Is it possible to trigger a BPEL process from a customized web form? If so, what is the process for achieving this? Additionally, I am curious about how to assign tasks in BPEL ...

htmlwso2bpelwso2-business-processwso2-enterprise-integrator

Regular expression for extracting the initial line only

I'm dealing with a strange string that needs to be manipulated using regular expressions. I am looking for a way to isolate and return only the first line, "Next Business Day", while discarding everything that comes after it. My current attempt looks ...

javascriptjqueryregex

Comparing XDomainRequest and XMLHTTPRequest - which one to choose

Our team is currently developing an application utilizing PixiJS that integrates a dynamic json loader. The .json files are loaded using the following logic: if(window.XDomainRequest) { this.ajaxRequest = new window.XDomainRequest(); } else if (windo ...

javascriptajaxinternet-explorerwindows-phonepixi.js

I am feeling uncertain about the most effective approach to utilizing ng-options in my current scenario

I've been grappling with a decision on how to proceed. I have an array of objects structured like this: $scope.assessments = [ { "name": "Goldman-Fristoe Test of Articulation - 2nd Edition", "description": "Description of Goldman-Fri ...

javascripthtmlangularjs

Executing a Node.Js program that calls a function from a separate file to display a JSON array

Attempting to display a JSON array of all the managers on my localhost results in a blank screen. Despite filling the arrays correctly, it seems like there might be an issue with the server.js file. I'm not exactly sure what's causing the problem ...

javascriptnode.js

The map function is selectively applied to certain expressions, not all

Currently, I am attempting to display the genre Name and its corresponding gradient by utilizing the map function over an array called genres. While the map function successfully renders the genre Name, it seems to return the same component for the genre g ...

javascriptreactjs

What could be causing the append function to only work during the final iteration of my code?

I find myself in the position of recreating a table based on another existing one. While I am aware that this may not be the ideal approach, it is a task that has been assigned to me rather than being my own choice. My method involves iterating through ea ...

jqueryhtml

Leveraging data stored in a parent component within a child component in Vue.js

Working with Laravel Spark, I have implemented a component within another component. <parent-component :user="user"> <child-component :user="user" :questions="questions"></child-component> <parent-component> Inside the parent ...

javascriptvue.jslaravel-spark

What steps should be taken to activate the close window button on this page?

I need help with my GUI because the closing button of the window is not responding when clicked. Here is the JSP code snippet: The JSP is <table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb"> <tr> &l ...

javascripthtmlcssjsp

Running C# Selenium with Chrome asynchronously from a WPF application without causing the main window to freeze

I am currently implementing an asynchronous approach to utilize Selenium within a WPF application in order to extract data for later use within the same WPF environment. The Selenium execution is set to be headless with the intention of running it during t ...

c#wpfselenium-webdriverasynchronousasync-await

Vue paired with Rainyday.js

I attempted to incorporate Vue with rainyday.js by following different resources, but unfortunately could not find any relevant information. Can anyone provide guidance on how to successfully implement rainyday.js with Vue? <body onload="run();"> ...

javascriptvue.jsvuejs2vue-component

Showing an object within the same page upon clicking a hyperlink

I am currently developing a web page using only HTML5 and minimal Javascript. My goal is to have a menu displayed near the page text, allowing users to click on links that will show the contents of other HTML pages. Something like this: https://i.sstatic ...

javascriptjquerycsshtml

unable to choose an option if more than one radio button is being used

I am having trouble with two radio buttons that are supposed to select the gender of an applicant and the gender of the applicant's child. Both buttons are not functioning properly. Can someone assist me with this issue? Here is the code I am using: ...

htmlcss

Enhancing jqgrid by incorporating cellattr to JSON colmodel

I've been experimenting with adding a custom cellattr function to my colmodel JSON response, but I'm having trouble getting it to work. I've tried applying classes and styles without success, so now I'm attempting to debug by logging so ...

javascriptjsonjqgrid