Selenium - Finding Solutions for the Element Not Visible Issue - A Common Problem

For my current project, I am developing Selenium tests using Java to validate a straightforward PHP web application. A significant part of this testing involves populating various input fields.

However, when attempting to execute the test consecutively (twice or more), I encounter the following error:

org.openqa.selenium.ElementNotVisibleException: 

Session ID: ef10680c-429b-4312-9d69-41496e7dce6a
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.createException(W3CHttpResponseCodec.java:127)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:93)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:42)
    at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:163)
    at org.openqa.selenium.remote.service.DriverCommandExecutor.execute(DriverCommandExecutor.java:82)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:601)
    at org.openqa.selenium.remote.RemoteWebElement.execute(RemoteWebElement.java:274)
    at org.openqa.selenium.remote.RemoteWebElement.click(RemoteWebElement.java:84)
    at com.midamcorp.insurance.TesterNGTest.test(TesterNGTest.java:83)

The issue lies in the fact that the element is hidden, despite me needing it visible for interaction. Initially obscured by Javascript, displaying it requires nothing more than clicking a link element, which is an action I replicate within my test script.

 @BeforeClass
    public static void setUpClass() throws Exception {
       System.setProperty("webdriver.gecko.driver","C://geckodriver/geckodriver.exe");
       driver = new FirefoxDriver(); 
     driver.get(BASE);
        driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
    }


    @Test
  public void test() throws Exception {

      // login 

    driver.findElement(By.id("ssn")).clear();
    driver.findElement(By.id("ssn")).sendKeys("user");
    driver.findElement(By.id("user")).clear();
    driver.findElement(By.id("user")).sendKeys("pass");
    driver.findElement(By.name("login")).click();

    // insurance screen

     driver.findElement(By.name("phone")).clear();
    driver.findElement(By.id("phone")).sendKeys("phone");
    driver.findElement(By.id("email")).clear();
    driver.findElement(By.id("email")).sendKeys("email");
    driver.findElement(By.id("empSSN")).sendKeys("ssn");
    driver.findElement(By.id("address")).clear();
    driver.findElement(By.id("address")).sendKeys("address");
    driver.findElement(By.id("city")).clear();
    driver.findElement(By.id("city")).sendKeys("city");
    new Select(driver.findElement(By.id("state"))).selectByVisibleText("Missouri");
    driver.findElement(By.id("zip")).sendKeys("63780");
    driver.findElement(By.id("genderFemale")).click();

if(!(driver.findElement(By.cssSelector("input[type='checkbox")).isSelected())) { driver.findElement(By.cssSelector("input[type='checkbox")).click(); }
        driver.findElement(By.cssSelector("input[value='1']")).click();
        new Select(driver.findElement(By.name("employmentLocation"))).selectByVisibleText("Central Office");
        driver.findElement(By.cssSelector("input.btn.btn-primary")).click();



    // enrollment 

             // checks if the container for radio buttons is concealed; if so, triggers the display via a clickable link

    if( !(driver.findElement(By.id("healthOnly")).isDisplayed()) ) {
              driver.findElement(By.cssSelector("a[href='#healthOnly']")).click();


    } 


    // the next line triggers the exception; the mentioned link was not clicked, leaving the radio button container invisible

      List<WebElement> insuranceOptions = driver.findElements(By.cssSelector("#healthOnly input[type='radio']"));
         insuranceOptions.get(rand.nextInt(insuranceOptions.size() - 1)).click();

         insuranceOptions = driver.findElements(By.cssSelector("input[name='visionID']"));
         insuranceOptions.get(rand.nextInt(insuranceOptions.size() - 1)).click();

To manage the visibility toggling in JavaScript/jQuery, I have created a simple function that performs as expected when manually activated:

$(".insuranceOptionsToggle").click(function(e){
 e.preventDefault();
 $($(this).attr("href")).toggle();   
 $(this).toggleClass("active");
});

Answer №1

Simply be patient and allow the element to appear on its own.

Remember, avoid using jQuery functions to reveal the element as users typically won't use those. Only automate actions that mimic what a user would naturally do.

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

I'm experiencing a strange issue where the timezone offset is being doubled on my computer, yet it is functioning correctly on the UTC

A situation has arisen where the timezone offset on my local server is being duplicated by the server while creating a new event in my app. For every event created by a user, the client-side scripting computes and adds the time zone offset to the input be ...

Implementing a Spinner in a Popup Dialog on Android Platform

Here's the current progress of my code. playername.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" ...

Display popup when the form is submitted

Check out this Angular 4 component code designed for gathering contact details from website visitors: .html: <form (submit)="onCreateContact()"> <div class="form-group"> <input type="text" [(ngModel)]="contactname" name="contac ...

Show or conceal input fields depending on the selection of radio buttons

Hello everyone, I am new to JavaScript and currently learning. Can someone please assist me in fixing this code? The required inputs are: radio-button-1; radio-button-2; input-fields-set-1; input-fields-set-2; input-field-submit. My objective is: Upon ...

Display the severity of the event using sentence case: Log4j2

I would like to display the event severity in sentence case in the logs instead of the default uppercase. I made changes to the log4j2 xml as shown below: <Console name="STDOUT" target="SYSTEM_OUT" direct=true> <Patt ...

utilizing the value within the useState function, however, when attempting to utilize it within this.state, the tab switching feature fails

I am struggling to implement tab functionality in a class component. Even though I'm using this.state instead of useState, the tab switching is not working correctly. I have read the following articles but still can't figure it out: http ...

What is the best way to generate and assign individual IDs to dynamically generated Views?

As I develop my app, I am dynamically creating various Views, such as EditText elements. Each View that I add requires a unique id for identification. EditText editText = new EditText(context); LayoutParams params = new LayoutParams(LayoutParams.MATCH_PAR ...

Having trouble with Isomorphic fetch not functioning properly for external requests?

EDIT: I am trying to determine why the response does not include the requested data and whether it is due to missing libraries or the format of my fetchUrl variable. Hello, I am attempting to utilize the isomorphic fetch method for making AJAX requests bu ...

HTML Data conflicts

Can anyone assist me in resolving my most recent issue with HTML and DataTables? I'm currently displaying a table with just two columns (name and local). I have included the necessary files (CSS and JS): <link rel="stylesheet" type="text/css" ...

Reasons Why Vue Component Does Not Update When Select Changes

I'm encountering an issue with a form that is supposed to change text within a vue component based on the selection made in a select box. To demonstrate the problem I'm facing, I've created a simplified version of the code on jsfiddle: http ...

I have successfully implemented an onChange function with its corresponding set of parameters. However, I now desire to extend its functionality by incorporating

I have an onchange function that triggers when the "pending" option is selected in a select dropdown menu. This function adds a predefined value to an input field. However, I also want this functionality to apply when the page loads. Currently, the "pendin ...

Tips for selecting the same button from a different section when web scraping with selenium

Currently, I am using Selenium for web scraping and I encountered an issue where the code I wrote is clicking the 'next' button in the 'Summary' section instead of the 'Defensive' section. If you would like to test it yoursel ...

Manipulating rows [using an input field] within a table

As someone new to JavaScript, I tried my hand at coding the following piece after tweaking a tutorial I stumbled upon. The aim was to have rows with input fields added and removed within a table, but unfortunately, nothing happens when running the code. ...

Error: Unable to assign a value to the 'name' property of an undefined object after modifying input field data

I am currently working on developing a React application. The app includes a button labeled "Add" that, when clicked, adds multiple input fields to the screen. Each line of inputs also features a button marked "X" which allows users to remove that specific ...

What are some ways to optimize the efficiency of handling a sizable JSON object in React Native?

I am currently developing an application using React Native and have encountered significant slowdowns during transitions when loading more data. I am exploring alternative app structuring methods to prevent these performance issues, especially as the JSON ...

"Supabase's getUserByCookie function is malfunctioning when accessed on a mobile

Having trouble testing my app on a mobile device because it is not receiving cookies from server-side requests. (works fine in Chrome) In the Next.js getServerSideProps function, I have the following code: export async function getServerSideProps({ re ...

When the window is resized, the scroll position is automatically reset

I came across this code snippet in a jQuery plugin named Blueberry, created by someone else. https://github.com/marktuk/Blueberry One issue I encountered with the code is that whenever the following lines are executed: //bind setsize function to window ...

Make sure the checkbox is selected when the page initially loads, and if the page is reloaded, it should

When the page loads, I need a group of checkboxes to be pre-checked. I have an onload script that automatically checks the boxes, but when I uncheck them and reload the page, they remain checked. How can I make the checkboxes remember their last state? T ...

Algorithm MinMax is not functioning as originally anticipated

In the process of creating a tic tac toe game for a project on Free Code Camp, I have successfully added a minmax algorithm to determine the best square for the computer player's next move. While the algorithm performs as intended in most cases I&apo ...

Conceal or reveal content within two dividers

Two <div> elements are present, referred to as div1 and div2. Before clicking submit, I want div1 to be displayed and div2 to be hidden. However, after submitting, I want div1 to hide and div2 to show. The code within kanjiconverter.php is: < ...