How you can fix the issue of the "Element not visible" error occurring specifically for one element within the popup

Error Message: "Element Not Visible" when Script Reaches Last Element

Despite all attributes being in the same form, an error occurs when the script reaches the last element and displays "element not visible." All elements are enclosed in div tags on the same level, with the script able to populate data in all fields except for the Submit Button. The click event triggers an error message stating that the element is not visible. Interestingly, the script works in a popup window. A screenshot image of the popup has been included below.

HTML code snippet:

<form id="sighUpForm" class="form-signin ng-pristine ng-invalid ng-invalid-required ng-valid-pattern" novalidate="" name="sighUpForm">
<div class="row">
<div class="form-group">
<div class="form-group">
<div class="row">
<div class="form-group">
<label class="ng-bind-htmling" ng-bind-html="translation.signup_mobile">Mobile No.</label>
<div class="input-group">
<span class="error-msg ng-hide" style="color:red" ng-show="sighUpForm.PhoneNo.$invalid && submitted">
</div>
<div style="text-align:center;">
<label class="checkbox-inline ng-bind-htmling" style="line-height:1.8; font-size:12px">
<input class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" type="checkbox" value="" ng-model="user.termAndCondition" required="" name="termAndcondition" style="height:15px; width:15px; margin-top:5px; margin-right:3px "/>
I agree to the 
<a data-target="#tandcmodal" data-toggle="modal" href="#">
 and 
<a data-target="#ppmodal" data-toggle="modal" href="#">
</label>
<br/>
</div>
<div class="text-center">
<!-- <small class="tc-text">By signing up, you agree to our <a href="#" data-toggle="modal" data-target="#tandcmodal">Terms &amp; Condions</a> and <a href="#" data-toggle="modal" data-target="#ppmodal">Privacy Policy</a></small><br />-->
<!--<button id="submitSignup" type="submit" ng-click="SignUpUser()" class="button signup-btn">Signup</button>-->
<a id="submitSignup" class="button signup-btn" ng-click="SignUpUser()">
</div>
</form>

Selenium Code Segment:

//Enter PhoneNumber
     driver.findElement(By.xpath(prop.getProperty("SignUpPhoneNo"))).sendKeys(prop.getProperty("PhoneNumber"));
     Thread.sleep(500);

     //Click Agree Tick
     driver.findElement(By.xpath(".//*[@id='sighUpForm']/div[6]/label/input")).click(); 
     Thread.sleep(600);

     //Click Submit button
     driver.findElement(By.xpath(".//*[@id='submitSignup']/span")).click();

Popup Screenshot Link:

https://i.sstatic.net/REnxv.png

javascriptjqueryhtmlcssselenium

Answer №1

One effective method is to utilize WebDriverWait for waiting until the element becomes visible and clickable.

To submit your form, there are two approaches you can follow:-

WebDriverWait wait = new WebDriverWait(driver,10);

  • You have the option to use .submit() for submitting the form in this way:-

    WebElement form = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("sighUpForm")));
form.submit();

  • Alternatively, you can opt for .click() to click on the sign-up button and submit the form as follows:-

    WebElement signUp = wait.until(ExpectedConditions.elementToBeClickable(By.id("submitSignup")));
signUp.click();

Modified:- In case there are multiple instances of the signUp button with the id submitSignup, and if you happen to be interacting with a hidden button, it would be advisable to locate all elements with the id signUp and click on the visible one using the below approach:-

List<WebElement> signUpButtons = wait.until(ExpectedConditions.presenceOfAllElementsLocatedBy(By.id("submitSignup")));
for(WebElement signUp : signUpButtons)
{
  if(signUp.isDisplayed() && signUp.isEnabled())
  {
    signUp.click();
  }
}

Answer №2

To ensure the 'Sign Up' link is both visible and clickable, consider using a WebDriverWait driver in conjunction with the ExpectedCondition of elementToBeClickable(By locator).

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

The select dropdown does not automatically refresh when the array value changes

I am facing an issue with a select dropdown that is populated by an array filled with data from the server response: myApp.controller('mController', function($scope, $routeParams, $http, contextRoot) { var dataObject = {} $scope.arr = [ ...

javascriptjqueryangularjs

utilizing Jquery file uploader for uploading multiple files

I am currently using jQuery file uploader to upload multiple files. My server is Django and I have successfully uploaded the files. Now, I want to display the uploaded files and provide options for users to delete or add more files. If anyone can help me ...

jquerydjangojquery-uiblueimp

Customizing a unique dropdown navigation experience

I have very limited experience with using jQuery and CSS. I recently came across the DropIt jQuery plugin files (accessible at ) and decided to integrate it into my Ruby on Rails project. Unfortunately, I am struggling with implementing the "Hover Me" exa ...

jquerycss

Ways to include additional bars in your Animated jQuery, CSS, and HTML Bar Graph

I found this awesome website that explains how to create an animated bar graph using HTML, CSS, and JQuery. I want to implement it in my web application to display monthly statistics for each of the 7 divisions in my company. However, I'm having troub ...

jqueryhtmlcss

Initiate an AJAX request within an existing AJAX request

On one of my pages, page A, I have a form that passes parameters to a script using AJAX. The results are loaded into div B on the same page. This setup is functioning properly. Now, I want to add another form in div B that will pass parameters to a differe ...

javascriptphpjqueryajax

What is the best method for removing a class with JavaScript?

I have a situation where I need to remove the "inactive" class from a div when it is clicked. I have tried various solutions, but none seem to work. Below is an example of my HTML code with multiple divs: <ul class="job-tile"> <li><div ...

javascriptjqueryhtml

When refreshing, the useEffect async function will not execute

Upon page load, the getImages function is intended to run only once. After refreshing the page, both tempQuestionImages and questionImages are empty. However, everything works perfectly after a hot reload. I am utilizing nextJs along with Firebase Cloud ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Fetching JSON data with Ajax is successful, but the information is not being displayed

I am struggling to showcase Json data from a URL in a table using ajax. The aim is for the code to iterate through the data and present it neatly in a table. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/a ...

jqueryjsonajax

Oops! We encountered an internal server error while trying to resolve the import for "@vue/server-renderer"

Several months ago, I created a Vue 3 project using Vite and everything was running smoothly. However, today when I tried to make a small modification, an error occurred at runtime. All Vue files are showing the same error message: [vite] Internal server ...

javascriptvue.jsvite

CSS "background-position: bottom" Less than ideal performance on Mobile Browsers

body { background-color: #000000; background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Aurigids_-_Jeremie_Vaubaillon.jpg/1280px-Aurigids_-_Jeremie_Vaubaillon.jpg'); background-repeat: no-repeat; background-attac ...

htmlcssweb

Is it possible to have Vue.js code within a v-for loop in such a way that it executes every time the v-for loop runs?

<div class="questions" v-for="(q,index) in questions " :key="index" {{this.idx+=1}} > <h3 > {{q.content}}</h3> <h3> A) {{q.a}} </h3> <h3> B) {q.b}} </h3> ...

javascriptvue.jsvuejs2

Displaying live data from an XMLHttpRequest in a Vue component in real-time

I'm currently working on implementing lazy loading for a list of posts fetched from the WordPress REST API. My goal is to load additional news stories upon clicking an HTML element. However, I'm facing issues with accessing the original Vue inst ...

javascripthtmlwordpressvue.jswordpress-rest-api

Problem with UV mapping when adjusting texture size

I am currently working on an application to modify minecraft models. To display the drawn texture mapped on the 3D player model, I am using ThreeJS. However, I'm facing a challenge related to changing the texture size. Initially, the texture is mappe ...

javascript3dthree.js

Backbone "recalling" stored data in attributes

Presented here is a basic model: myTestModel = Backbone.Model.extend({ defaults: { title: 'My Title', config: {}, active: 1, } }) While nothing particularly stands out, there is an interesting observation regardi ...

javascriptbackbone.js

Display text when hovered over or clicked to insert into an HTML table

I have an HTML table connected with a component field gameArray and I need it to: Show 'H' when the user's cursor hovers over TD (:hover) and the corresponding field in gameArray is an empty string, Fill the gameArray field after a click. ...

javascripthtmlangulartypescriptangularjs-directive

What is the best way to reveal a hidden div using JavaScript after a form submission?

jQuery is not a language I am very familiar with, but I am attempting to display a simple animated gif when a form is submitted. When users click 'submit' to upload an image, I want the gif to show to indicate that the image is being uploaded. Th ...

javascripthtml

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...

javascriptjquerycss

Here is a method to display a specific string in the mat-datepicker input, while only sending the date in the backend

enter image description hereIn this code snippet, there is a date input field along with a Permanent button. The scenario is that when the Permanent button is clicked, it should display "Permanent" in the input UI (nativeElements value), but the value bein ...

javascriptangulartypescriptangular-material

Issue with jQuery incorrectly calculating height post-refresh

I am currently utilizing jQuery to vertically center various elements on a webpage. Due to lack of support in older versions of IE, I cannot use the table-cell CSS statement. Therefore, I am using jQuery to calculate half of the height and then position it ...

javascriptjqueryhtmlcssheight

Expanding the capabilities of the JQuery submit function

Within my web application, I find myself working with several forms, each possessing its own unique id. To streamline the process, I decided to create a custom handler for the submit event in my JavaScript file: $('#form-name').submit(function(ev ...

javascriptjqueryformsform-submit