Selecting an option from a Javascript CSS drop-down menu functions successfully in the WebDriver IDE, but encounters issues when

Having difficulty selecting an item from a Javascript dropdown, where the items are not visible in the DOM tree until a link is clicked. Attempted to use the Actions class with code like this:

    Actions cursor = new Actions(driver);
    cursor.moveToElement(linkThatDropsMenu).perform();
    cursor.click();

Tried using clickAndWait() function which seems to be missing from Java WebDriver libraries, and experimented with pausing and clicking variations including double clicking. Even tried clickAndHold() without success.

Upon generation of the menu, changes can be seen in the DOM tree with the insertion of div class="menu"

<div id="divIdActive_2" class="data number active" style="min-height: 21px;">
<a class="opencnl" href="#">
    <span id="opencnlSpan" class="active" style="background-color: 
                             transparent;">800-852-2222</span>
</a>
<img class="tollFree" title="Display name(s) for Toll free function properly on 
                     Verizon Wireless devices, but may be omitted by other carriers on 
                     their devices." src="img/nil.gif">
<input id="customNum" type="hidden" value="8008522222" name="number_2">
<div class="menu">
    <a class="edit" href="#">Change Custom Number</a>
    <a class="copy" href="#">Copy Settings for 0 Selected Lines</a>
    <a class="clear" href="#">Clear Settings For this Line</a>
</div>
</div>

Interestingly, able to trigger the menu drop from the IDE using click() or clickAndWait() with the same locator. In my Java code, locators retrieve the element's text but fail to perform a click action. Other click commands work perfectly in the Java code, except for this particular case. Any thoughts or suggestions? Appreciate your time!

Answer №1

If you're looking to click on an option, make sure it is visible first using the isDisplayed() function. Unlike selenium 1's clickAndWait(), we now use element.isDisplayed(). This includes an implicit wait feature that is configured when the browser driver is initialized (refer to the documentation for details). Upon encountering an isDisplayed function, Selenium will automatically wait for a set amount of time before proceeding further.

Answer №2

Success! I finally figured it out. The key was to hover over the item, click on it, then hover over it again to keep the cursor in place before grabbing the newly rendered objects. My theory is that without that second moveToElement(), the cursor would finish its task after clicking and get collected by garbage collection. Check out my code below - hopefully, it can help someone else too!

    Actions cursor = new Actions(driver);
    cursor.moveToElement(customNumberLink).perform();
    cursor.click();     

    // move to SAME element to leave cursor where it is while Javascript runs.
    cursor.moveToElement(customNumberLink).perform();

    // now grab newly generated elements
    WebElement clearLink = customNumberCell.findElement(By.cssSelector("a.clear"));
    clearLink.click();

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

After successfully carrying out the tasks in the Upload window using AutoIT, I encountered a setback when transitioning to the Firefox browser as the subsequent actions failed to execute as

When completing a form, I upload a document and then click submit. To automate the windows based actions, I utilized the AutoIT tool. After uploading the document, I proceeded to submit using selenium. Runtime.getRuntime().exec("C:/Users/MSTEMP/Documents/ ...

What is the alternative method for clicking a button in selenium webdriver when there is neither a ClassName nor a functioning ID?

from selenium import webdriver import time driver = webdriver.Firefox() try: driver.get("URL Link") time.sleep(10) driver.find_element_by_id("ess.myAccount.Label").click() except: print("Requested page is not opening") driver.close() Is ...

Validating passwords using Vuetify

I am implementing password validation on my form using Vuetify validation rules: passwordRules: [ v => (v && v.length >= 1 && v.length <= 10) || 'Password length should be between 1 and 10', v => (v && v.l ...

How does gray-matter function in Node.js affect the matter within?

import fs from 'fs'; import path from 'path'; import matter from 'gray-matter'; const postsDirectory = path.join(process.cwd(), 'posts'); // ... ... ... // export function getPostData(id) { const fullPath = ...

In Selenium version 2.32 with Java 1.6.0_07, using IE Webdriver for both 32 and 64 Bit systems, it has been observed that when running IE9, the

I am currently utilizing Selenium version 2.32, Java JDK 1.6.0_07, IE9 on Windows 7. Here's the issue at hand: While using IE WebDriver 32 Bit and clicking on a link that opens a new browser displaying a PDF, the PDF opens within the browser as ex ...

reduce the size of the image as the browser width decreases

Struggling with a webpage layout that features an image on the left and content area on the right, both with fixed widths. When reducing browser width, the image should not shrink but be cropped from the left side instead. Any solutions for this issue? ...

Exploring Vue.prototype attributes and utilizing them

I'm facing a challenge while attempting to globally set a property using Vue.prototype. This is what I currently have: microsoftTeams.initialize(); microsoftTeams.getContext((context) => { Vue.prototype.$teamsContext = true; }); new Vue({ ...

Discovering the highest value within an array of objects

I have a collection of peaks in the following format: peaks = 0: {intervalId: 7, time: 1520290800000, value: 54.95125000000001} 1: {intervalId: 7, time: 1520377200000, value: 49.01083333333333} and so on. I am looking to determine the peak with the hig ...

Encountering a proxy error while attempting to create an account or log in, with no network

Embarking on my first web development journey, I utilized React-Redux to craft a React.js application within the client folder. For the backend code, I employed Node.js and MongoDb as my database. This project represents a significant milestone in my lear ...

Once I have verified the user's credentials through a POST request, I will proceed to make a GET request

I am in the process of constructing a dashboard that automates logging into an API and updating specific data elements. I have successfully managed to login and authenticate, but I am unsure how to proceed with chaining the GET request after the POST actio ...

Is the addClass() method not functioning properly within the mouseenter() event

When I use a mouseenter function to change the color and opacity of a div, adding a class called "full" doesn't work as expected. However, manually changing the color and opacity using this.style.color and this.style.opacity inside the mouseenter func ...

I am encountering an issue where the state remains undefined within my components, even when attempting to access it through the

Having an issue with my store and component setup. I have a component where I fetch data from an API in the created() hook to update the state, and then use mapGetters in the computed section to access this state. However, nothing is rendering on the scree ...

Wrapping a series of grids within a parent container to manage height effectively with grid960

Testing on the following browsers: Internet Explorer, Chrome, Firefox; Check out this example of an ideal layout in a PDF: Here is the link to the direct page: While Grid systems work well for width layout, I struggle with setting height constants. In ...

Using jQuery to enable scrolling and dynamically changing classes

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...

A dynamic modal window built with ReactJS

I am struggling to understand how to make my app function properly. There is a component called ContactAdd that should render the component ModalWindow when clicked. The ModalWindow component requires a parameter called isOpened={this.state.open}. How c ...

Unlocking the power of a Vuex getter through Vue router

My index.js file holds my routes, and I'm attempting to establish a beforeEnter guard for the admin panel route to only permit authenticated admins. However, when I check console.log(store.getters.isLoggedIn), the output is: ƒ isLoggedIn(state) { ...

Placing the word "repeatedly" in a d3 js tree

I am currently working on building a tree structure and incorporating edge labels. The tree allows nodes to be dynamically added using a plus button that appears when you click on a parent node. One issue arises when adding a new child. (apologies for the ...

Transferring data with JQuery Ajax to a C# Webmethod

I need assistance with sending data from an aspx page to a .cs Webmethod using jQuery Ajax. Below is my html code: <tr> <td> <input type="text" id="txtName"> </td> ...

Creating an xpath query to extract data from a label

When looking for the XPath, it is recommended to use the label to access the corresponding value. ...

Tips for implementing form validation in AngularJS

I'm currently working with a form that looks like this, <div ng-if="vm.settingsObj.others.name === 'Course Specialization'"> <div class="form-group"> <div class="col-xs-12" ng-repeat="specializatio ...