Interact with elements on a dynamically loaded webpage using Selenium WebDriver in Java

I am faced with a challenge of clicking on a specific element on a dynamically loaded page, where the web element is generated as we scroll down the page, similar to the setup on a Jabong webpage.

Here is the code I tried on the Jabong webpage:

 WebDriver driver = new FirefoxDriver();
 driver.manage().window().maximize();
 driver.navigate().to("http://www.jabong.com/men/clothing/"
         + "?source=topnav");

 driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
 System.out.println("Close the modal popup");
 driver.findElement(By.id("jab-vchr-cls")).click();
 driver.manage().timeouts().implicitlyWait(0, TimeUnit.SECONDS);

   /**
    * The while(true) loop is necessary to continuously search for the element until it is found. 
    * We try to find the element within a try-catch block, and if an exception occurs, we scroll 
    * the page and try to find the element again.
    */
 while(true) {

         ((JavascriptExecutor)driver).executeScript("window.scrollBy(0,100)", "");
     try {
         WebElement element = driver.findElement(By.xpath("//*[@id='http:    //static3.jassets.com/p/The-Indian-Garage-Co.-Checks-Red-Casual-Shirt-2889-679124-1-catalog.jpg']/img"));
         Wait<WebDriver> wait_element=new WebDriverWait(driver, 10);
         wait_element.until(ExpectedConditions.elementToBeClickable(element));
         element.click();
         System.out.println("!!!!!!!!!!!!!!At Last Get Success!!!!!!!!!!!!!!!!");
         break;

     }
     catch (Exception ex) {
         Logger.getLogger(Test.class.getName()).log(Level.SEVERE, null, ex);
         System.out.println(ex.getMessage());
     }
     }

}

My inquiry is:

1. Are there more efficient ways to achieve this task?

2. What can be done to optimize the script for faster execution?

Answer №1

If you prefer to avoid using while(true), you can try this alternative method. Although, I don't see any issues with the original loop.

    boolean reachedbottom = Boolean.parseBoolean(js.executeScript("return $(document).height() == ($(window).height() + $(window).scrollTop());").toString());

    while (!reachedbottom) {
        ((JavascriptExecutor) driver).executeScript("window.scrollBy(0,600)", "");
        try {
            reachedbottom=Boolean.parseBoolean(js.executeScript("return $(document).height() == ($(window).height() + $(window).scrollTop());").toString());
            WebElement element = driver.findElement(By.xpath("//*[@id='http://static3.jassets.com/p/The-Indian-Garage-Co.-Checks-Red-Casual-Shirt-2889-679124-1-catalog.jpg']/img"));
            WebDriverWait wait_element = new WebDriverWait(driver, 5);
            wait_element.until(ExpectedConditions.elementToBeClickable(element));
            element.click();
            System.out.println("!!!!!!!!!!!!!!At Last Get Success!!!!!!!!!!!!!!!!");
            break;
        } catch (Exception ex) {
            Logger.getLogger(Test.class.getName()).log(Level.SEVERE, null, ex);
            System.out.println(ex.getMessage());
        }
    }

Answer №2

  1. When using the Getting Started with Selenium framework, the AutomationTest#waitForElement method proves to be a valuable tool for handling elements. It serves as an alternative to the webdriver wait, offering similar functionality.

    /**
     * Private method that acts as an arbiter of implicit timeouts of sorts.. sort of like a Wait For Ajax method.
     */
    private WebElement waitForElement(By by) {
        int attempts = 0;
        int size = driver.findElements(by).size();
    
        while (size == 0) {
            size = driver.findElements(by).size();
            if (attempts == MAX_ATTEMPTS) fail(String.format("Could not find %s after %d seconds",
                                                             by.toString(),
                                                             MAX_ATTEMPTS));
            attempts++;
            try {
                Thread.sleep(1000); // sleep for 1 second.
            } catch (Exception x) {
                fail("Failed due to an exception during Thread.sleep!");
                x.printStackTrace();
            }
        }
    
        if (size > 1) System.err.println("WARN: There are more than 1 " + by.toString() + " 's!");
    
        return driver.findElement(by);
    }
    
  2. If a page fails to load content within a 10-second timeframe, it likely indicates an issue that needs attention. It is advisable to refactor the code by removing the infinite loop and implementing either the waitForElement method as described above, or utilizing the WebDriverWait class.

Moreover, manually scrolling to locate an element should be unnecessary. There is usually no need for such action as long as the element exists in the DOM, it should be accessible for manipulation.

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

What is the best method for executing an HTTP request to retrieve the complete source page if certain aspects are loaded through JavaScript?

I am trying to retrieve the HTML webpage from . However, a portion of the HTML file is loaded through JavaScript. When using HTTP.jl to fetch the webpage with HTTP.request(), I only receive the part of the HTML file that was loaded before the execution of ...

"Exploring the Power of TypeScript Types with the .bind Method

Delving into the world of generics, I've crafted a generic event class that looks something like this: export interface Listener < T > { (event: T): any; } export class EventTyped < T > { //Array of listeners private listeners: Lis ...

Tips for transferring a JSON object from an HTML document to a JavaScript file

Here is the code snippet: <script id="product-listing" type="x-handlebars-template"> {{#each productsInCart}} <tr> <td> <div class="imageDiv"> <img ...

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Currently working on a custom slider and encountering an issue. When quickly moving the mouse outside the slider's range horizontally, exceeding its width, the slider doesn't smoothly transition to minimum or maximum values. Instead, there seems ...

Vue.js - Implementing multiple values (array) for a component through a property

I am currently working with vue.js components that receive their data from external sources. For example: <vue-button icon="fa-arrow-right" text="mytext"></vue-button> Initially, this setup is effective. However, I encountered a challenge wh ...

Determining the Right Time for E2E Testing

I'm currently involved in a project using Angular and Spring Boot where we conduct both UnitTests and Integration tests. I find myself unsure about the purpose of E2E testing. How do I know when to incorporate E2E testing and what benefits does it off ...

The Java authentication function will execute if the credentials are accurate, but it will throw a NullPointerException if the

Having developed a method to validate username and password input against a text file containing all the credentials, I encountered an intriguing issue. When the details are accurate, the application proceeds smoothly; however, if there is an error, it ret ...

Ordering an array using Typescript within React's useEffect()

Currently, I am facing a TypeScript challenge with sorting an array of movie objects set in useEffect so that they are displayed alphabetically. While my ultimate goal is to implement various sorting functionalities based on different properties in the fut ...

Detection of collisions using bounding sphere method

In Three.js, each mesh (THREE.Object3D) comes with useful properties like boundingSphere and boundingBox, along with methods such as intersectsSphere and isIntersectionBox. I initially thought I could use these for simple collision detection. However, I n ...

Preventing JavaScript from refreshing the page when using location.replace for the second time with the identical URL

I've encountered an issue while using location.replace to reload a page that relies on GET variables for displaying a success message. The problem arises when the URL specified in the location.replace call is identical to the current one, causing the ...

How can I extract the text enclosed in <li> tags using JavaScript?

Can someone help me with retrieving the text content of li tags? I managed to get a list of lis, but I'm having trouble assigning the text content to my country object. Snippet var lis = document.getElementById("navbar").getElementsByTagName("l ...

Storing information in RAM rather than persisting it in a database using Java

I am looking to execute a Java function that produces a JSON with a size of approximately 1 million. I require this JSON as input for the next call, which will occur 2 minutes later. While saving the JSON in a database is an option, the time it takes to ...

Comparison between PrintWriter and FileWriter in Java

Are PrintWriter and FileWriter in Java essentially the same, leading to similar results no matter which one you use? I have personally worked with both and found their outcomes to be identical. However, are there specific scenarios where it would be more ...

Mastering the Vue 3 Composition API: A guide to efficiently utilizing it across multiple Vue instances spread across different files

tl;dr What is the best way to import Vue3 in a base Javascript file and then utilize Vue's composition API in subsequent standalone files that will be loaded after the base file? I incorporate Vue to improve user interactions on specific pages like t ...

Encountered an error while executing findByIdAndRemove operation

Could someone please assist in identifying the issue with the mongoose findByIdAndRemove function in the delete route provided below? //DELETE Route app.delete("/blogs/:id", function(req, res){ //Delete blog Blog.findByIdAndRemove(req.params.id, funct ...

Real-time array filtering with ReactJS for nested arrays

I am currently working on implementing a real-time filtering search feature for a lengthy list of items. The items are structured in the form of an array containing arrays with a string and an object, as shown below: const items = [ ["cats", [ ...

Tips for creating a Google Chart using temperature and humidity data sourced from an XML file

Below is the XML file I am working with: <data> <temp>21</temp> <humidity>17</humidity> <analog>670</analog> <analog>908</analog> <analog>628</analog> <analog>909</analog> <L ...

Issue with ng-repeat directive not functioning

Let's dive into this directive: .directive('img', function () { return { restrict: 'E', link: function (scope, elem, attr) { if (attr.src && attr.type === "extension"){ var ...

Utilizing Selenium with C# to interact with disabled buttons

To determine if the button can be pressed, I am using "Enabled", where both outcomes (button able to be pressed / button not able to be pressed) are set to a true value. I am attempting to extract either an attribute or property from the DOM but am unsure ...

What is the maximum number of JavaScript functions allowed in a single HTML file?

My HTML5 file includes JavaScript (created from CoffeeScript) directly within the HTML file, as I prefer this approach for my HTML/JavaScript programming. The code consists of four JavaScript functions that convert one temperature unit to another. Strang ...