Maximizing the full potential of a JavaScript menu using WebDriver

I am facing a challenge in clicking a button on a website using WebDriver that utilizes JavaScript to expand a menu and display additional links:

<div id="menu">
<div id="security_bt" class="advanced_white_close_button" onclick="open_or_close_sub('security');                
security_open++;"><b> <span languageCode = "13">Security</span></b></div>
<div id="advanced_bt" class="advanced_white_close_button" onclick="open_or_close_sub('advanced');     
advanced_open++;"><b><span languageCode = "3011">Advanced Setup</span></b></div>
...etc

Several methods have been attempted, such as Xpath and CSS selectors, with no success.

Browser.Driver.FindElement(By.XPath("//div[@id='advanced_bt']/b/span")).Click();
or
Browser.Driver.FindElement(By.CssSelector("#advanced_bt > b > span")).Click();

An attempt was made using IJavaScriptExecutor:

            var executor = (IJavaScriptExecutor)webDriver;
        executor.ExecuteScript("arguments[0].click();", element);

Despite the elements being located successfully, they cannot be clicked. Any insight would be greatly appreciated. Thank you.

The following is the onclick= code snippet:

function open_or_close_sub(name)
{

var button_name= name+"_bt";
var sub_name= name+"_sub";
var open_flag= top.document.getElementById(sub_name).style.display;

close_all_sub(sub_name);/* fold all menus first, except the menu which user click*/

var button_div = top.document.getElementById(button_name);
var content_length = button_div.getElementsByTagName("span")[0].innerHTML.length;
if( open_flag == "none")
{
    settingClass(button_div, content_length, "advanced_white_open_button", top.region_class.white_triple, top.region_class.white_double);
    top.document.getElementById(sub_name).style.display="";
}
else
{
    settingClass(button_div, content_length, "advanced_white_close_button", top.region_class.white_triple, top.region_class.white_double);
    top.document.getElementById(sub_name).style.display="none";
}
change_menu_height();
}

Answer №1

Here is the code snippet you can try:

Browser.Driver.FindElement(By.Xpath("//div[@id='advanced_bt']//span[.='Advanced Setup']")).Click();

This code will trigger a click on the 'span element' that is located within a div tag with the id 'advanced_vt', and has the exact innerHTML/text as 'Advanced Setup'

You can also attempt the following code using the Actions class:

Actions action  = new Actions(Browser.Driver);
action.MoveToElement(Browser.Driver.FindElement(By.Xpath("//div[@id='advanced_bt']//span[.='Advanced Setup']"))).Click().Perform();

UPDATE 07.12.14

If the above methods do not work, you can utilize IJavascriptExecutor to make the submenu visible by setting its attribute accordingly. Once done, you can proceed with additional actions on the submenu. Based on the image provided in the comments, the following code snippet will unveil the submenu under 'Advanced Setup':

 IWebElement element = Browser.Driver.FindElement(By.Xpath("//div[@id='advanced_sub']"));
 var executor = (IJavaScriptExecutor)webDriver;
 executor.ExecuteScript("arguments[0].style.display='block';", element);

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

Creating a repository of essential functions in AngularJSDiscover the steps to set up a

I am looking to create a set of reusable functions in AngularJS for CRUD operations that can be used across multiple entities in my project. I have already set up a factory using $resource for server communication, which looks like this: Model File: var ...

Having trouble using angular.isString in conjunction with ng-repeat

Is there a way to use angular.isString for comparison within an ng-if in an ng-repeat loop? Currently, all items in the array are being returned. I attempted to simply display the result of angular.isString, but no output is generated. This is my desired ...

The issue arises when using multiple route files in Route.js, as it hinders the ability to incorporate additional functions within the

After breaking down Route.js into multiple controllers, I'm stuck on why I can't add an extra function to block permissions for viewing the page. // route.js module.exports = function(app, passport) { app.use('/profile&apos ...

What is the best way to transfer information between two separate Javascript controller files?

My current situation is a bit complex, but I believe there must be a straightforward solution. I have two Javascript controller files: one named rootPageClient.js and another called findPollClient.js. Additionally, there's a file called ajax-function ...

Animating a 3D model with pose estimation data in Three.js

My goal is to animate a rigged 3D model in three.js using pose estimation coordinates. The pose estimation technology I'm utilizing gives me real-time x, y, z coordinates from a person in a video feed, and I want to use this data to move the 3D model ...

Steer clear of Cross-Site Request Forgery through

As someone who is still learning about web security, I am curious about the best practices for using tokens on JavaScript requests to prevent CSRF attacks. Is it possible for someone to provide a code example? I already know how to implement this properly ...

I am attempting to use $.map to transfer values into a new array, but unfortunately, it is not producing the desired result

This task seems easy at first glance, but unfortunately it's not working for me. Can someone please point out what I might be doing wrong? var oldArr = [0, 1, 2]; var newArr = []; /* * This function is supposed to add 1 to each element in the array ...

Change the boxShadow and background properties of the material-ui Paper component

I am currently referencing their documentation found at this link in order to customize default Paper component properties. Below is the code snippet I have: import { styled } from '@mui/material/styles'; import { Modal, Button, TextField, Grid, ...

Is there a way in asp.net to enable users to switch a textbox to a grid view by clicking a button on the webpage?

I currently have a multiline textbox for users to input text. I want to give them the option to switch this textbox to a grid layout when they click a button labeled "Switch to Grid". How can I replace the textbox with a grid layout in the same location ...

The functionality of the Bootstrap toggle button seems to be malfunctioning

I'm having trouble with the toggle button in my Bootstrap code. When I resize the window, the toggle button appears but clicking on it doesn't do anything. This is my first time using Bootstrap, so I might have made some silly mistake. Any assist ...

What is the best approach to integrate express.js with truffle contracts?

While following a tutorial on Youtube about creating a decentralized voting app on truffle, I encountered a situation where I wanted to include a login and sign up feature into the system. Since lite-server couldn't send Mysql queries like express.js ...

Content enclosed in a div tag and displayed within the same

I need assistance in converting a PSD file into two cards. The content within the card should resemble this. Can anyone provide guidance on how to achieve this? Below is the code I am currently working with: .container { margin-top: 10px; } .ca ...

HighStocks should show categories instead of dates

The zoom function in HighCharts is what drew me to it initially. Everything was working perfectly until I encountered an issue that I can't seem to resolve. Here's my code snippet: http://jsfiddle.net/ma50685a/16/ $(function() { // Crea ...

Vue router is unable to render or mount the component at the root path

I am currently working on a webpage using vue, vue-router, and laravel. I have encountered an issue where the Home component is not being rendered in the router-view when I access localhost/myproject/public_html/. However, if I click on the router link to ...

The JSON.parse function encounters issues when trying to parse due to a SyntaxError: Unexpected character found after JSON at position 2, causing it to be unable

I've encountered an issue with my JavaScript code when trying to retrieve the value of the details field from JSON data. While all other values are successfully passed to their respective fields, the details field generates the following error: "Unabl ...

Is there a way to remove this specific element from an inherited hyperlink?

My website can be found at whensayfeed.meteor.com. Each post on the site is enclosed within an <a></a> element. The heart symbol on the right side of each post is intended to be a "like button" that users can click on. However, because it is ...

Generating Unique Profile Pictures for Stack Overflow Users

I am currently developing a website in C# ASP.Net and I'm looking to incorporate a functionality similar to that of Stack Overflow. On StackOverflow.com, each new user is assigned a default user picture until they upload a profile image (Gravatar). Th ...

Error message "A potential object loop was identified" encountered during JSON serialization in .NET MAUI

I have been encountering this error while working on my code, even though I have not been able to identify any cycles within my classes. Here are the two classes in question: public partial class Project: ObservableObject { [ObservableProp ...

Exploring Selenium: Techniques for examining the source code of an unidentified function

I'm fairly new to using Selenium. I have come across this javascript code snippet and I am attempting to use Selenium to inspect the script, but I haven't had much luck so far. My main goal is to employ Selenium to access/inspect the script in or ...

Tips for dealing with pop-up windows in Selenium WebDriver that are not alerts

2) An email entry form will appear asking for your email address in order to register. 3) I am having difficulty navigating to the window as it is not a typical pop-up. I have attempted using alerts, javascriptexecutor, and windowhandles, but none of the ...