"Despite successfully clicking on the menu with Selenium WebDriver, no action or change occurs on the webpage

Currently, I am in the process of writing a selenium C# test script for an older "infragistics" webpage, which I must admit, is not something I am very familiar with. The challenge I am facing is that the page does not provide many options for referencing elements. For example, I want to click on the submenu item called INVENTORY within a menu, but there is no element Id or Name to work with. Therefore, I have resorted to using XPath (see code snippet below). It appears that the webdriver recognizes this XPath, however, when the click function is executed, nothing happens on the page – the expected page fails to open. Is there something I am missing or doing wrong here?

<li class="igdm_MenuItemVertical igdm_MenuItemVerticalParent " unselectable="on" data-ig="x:1171509256.11:adr:1.2" adr="1.2"><A onclick="{return false;}" tabIndex=-1 class="igdm_MenuItemVerticalLink " href="#/Inventory...">
<a onclick="{return false;}" tabIndex=-1 class="igdm_MenuItemVerticalLink>
<img class="igdm_MenuItemVerticalIcon " alt="   Inventory..." src="../Images/report16.gif">
<span tabIndex=-1 unselectable="on"> INVENTORY...</span>
</a>

Test Script:

private By FileSubMenu = By.XPath(".//li/a/span[text()=' Inventory...']");

    public HomePage SubMenu()
    {
        int retryCount = 0;
        while (true && retryCount < Constants.RETRY_COUNT)
        {
            try
            {
                Thread.Sleep(3000);
                IWebElement element = _driver.FindElement(FileSubMenu);
                Actions Rmouseover = new Actions(_driver);
                Rmouseover.MoveToElement(element).Click().Perform();
                return this;
            }
            catch (Exception ex) when (ex is WebDriverTimeoutException || ex is TimeoutException)
            {
                retryCount++;
                Thread.Sleep(3000);
            }
        }
        return this;
    }

Answer №1

While XPath is useful, I personally prefer CSS Selector because it often results in less fragile selectors (not solely based on DOM location, but can still be). To grab one in Chrome:

  1. Simply right-click on the element and choose 'Inspect'
  2. Then right-click on the element within DevTools' DOM explorer
  3. Select "Copy" > "Copy selector"

Subsequently, your code might resemble something like this:

IWebElement element = driver.FindElement(By.CssSelector("paste_the_selector_here"));
// Click using Selenium's Click method
element.Click();
// Alternatively, click via JavaScript
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].click()", element);

In addition, instead of targeting the <span>, you may opt to click on the <a> since it includes an onclick event handler.

If the selector contains a dynamic parent ID, then it should be removed. This can be achieved by locating the ID-bearing element in DevTool's Element tab, double-clicking on the id="..." section, and erasing it entirely. Afterwards, extract the selector for the child element.

For instance, consider the following:

<div id="ctl00_NavBarAdmin_WebDataMenu1"> // <- Parent div html
#ctl00_NavBarAdmin_WebDataMenu1 > ul > li:nth-child(2) > ul > li.igdm_MenuItemVertical.igdm_MenuItemVerticalParent.igdm_Me‌​nuItemVerticalSelect‌​ed > a

This could potentially transform into:

<div> // <- Parent div HTML
div > ul > li:nth-child(2) > ul > li.igdm_MenuItemVertical.igdm_MenuItemVerticalParent.igdm_Me‌​nuItemVerticalSelect‌​ed > a 

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

A guide on transferring data from JavaScript to HTML and efficiently directing it to a Laravel 5 controller

Recently, I have been exploring different ways to connect Javascript with HTML and interact with PHP. Although I am comfortable using plain PHP to send or retrieve data from a PHP backend, I decided to dive into Laravel5 as my PHP framework. So far, it has ...

Implementing a django like feature using ajax requests

I am currently working on a template where I have a link for my article: <div id="voteUp"> <h4><a href="{% url "vote_up" article.id %}">Like {{article.up_vote}}</a></h4> </div> My goal is to increase the vote count for ...

Issues encountered when attempting to utilize removeEventListener() with multiple elements within a for loop in Javascript

After experimenting, I have been exploring ways to avoid encountering repeated event listeners The script provided below iterates through all buttons with a specific attribute. However, the issue is that it only functions effectively for a single button ...

Combining array objects in Node.js

Received an array in the request body: [ { "month": "JUL", "year": "2018" }, { "month": "JAN", "year": "2018" }, { "month": "MAR", "year": "2018" } ] The input consists of two parameters (month:enum and ye ...

How to Call a Nested Object in JavaScript Dynamically?

var myObj = { bar_foo : "test", bar : { foo : "hi there"; }, foo : { bar : { foo: "and here we go!" } } } How can we achieve the following: var arr = [["bar", "foo"], ...

What are the steps to start a ExpressJS server for webpages that are not index.html?

I am exploring how to browse/run/view web pages other than just the index.html file in my public folder, which contains multiple HTML files. I am using ExpressJS and NodeJS for this purpose, but every time I start my server, I can only access the index.htm ...

Steps for saving both checked and unchecked checkbox values in Firebase

I have a set of objects that I am using as initial data in my Ionic 3 application: public interests = [ { name: 'Travel', checked: false }, { name: 'Animals', checked: false }, { name: 'Theatre', checked: false ...

When an AJAX request is successful in Angular, utilize the ng-hide directive

I've implemented a feature where double-clicking the name displays an input field, but I'm facing an issue with switching back after a successful put-request. Despite setting $scope.edit to false, it doesn't seem to work as expected. This is ...

The face textures are not being applied correctly to the model imported in THREE.js

I'm having trouble importing a model exported from blender using the THREEJS exporter. The model loads correctly in my scene with the materials applied, such as the car appearing yellow and the glass being transparent as intended. However, I am facin ...

Breaking circular dependencies in JavaScript is a common challenge that developers face when

Having encountered a circular dependency issue between certain JS files, I am seeking steps to resolve it. Q1: Is repositioning the require function an appropriate solution? One suggested approach to resolve this issue is to move the require() statement ...

Guidance on selecting a checkbox with a dynamically generated identifier using WebDriver

I'm facing an issue with a form that contains a checkbox. The id of the checkbox changes every time a new form is opened, making it difficult to identify and interact with using Selenium-Webdriver in C#. Is there a way to locate and click on this dyn ...

What could be causing the jQuery change function to stop working after loading HTML with AJAX?

When loading a form, I use AJAX to dynamically populate a select element from a PHP file. Previously, my change function was working fine (it displayed another input when 'other' was selected). However, after implementing the dynamic AJAX populat ...

Utilize jQuery to apply inline styles to dynamically created div elements

I am attempting to apply inline styles to a div using jQuery. The current state of the div, as seen in Firebug, is shown below: https://i.sstatic.net/rqhIc.jpg My goal is to retain the existing CSS while adding margin-left:0 and margin-right:0 to the cur ...

When using JavaScript with React, setting a value after the onBlur event can result in users having to click

In my React form, I have an input button with an onBlur event that sets the value to a useState property. However, after the onBlur event is triggered, the user has to click the button twice to focus on it properly. It seems like the page needs time to pro ...

What is the best way to give stacked bar charts a rounded top and bottom edge?

Looking for recommendations on integrating c3.js chart library into an Angular 6 project. Any advice or suggestions would be greatly appreciated! https://i.sstatic.net/iiT9e.png ...

Dynamic creation of HTML/Ionic checkbox leads to ng-change not binding properly

Recently, my team and I have been actively engaged in the process of handling an XML file and dynamically constructing a settings page based on the information extracted from it. Allow me to present an illustration of how these elements are dynamically cre ...

Best practices for displaying a Multidimensional JSON Object using JavaScript

Within my current project, I have a JSON object structured as follows: { "face": [ { "attribute": { "age": { "range": 5, "value": 35 }, "gender": { "confidence ...

Creating a new array set by utilizing the map method

How can I filter and return a new array using the map function based on 2 conditions: The array must not be empty The role should be "moderator" This is an example of my initial response: https://i.sstatic.net/UeVn3.png Below is a React function that ...

Sending a POST request using Node.js Express: A step-by-step guide

Looking for help on sending a post request from node.js Express with data passing and retrieval. Preferably a straightforward method like cURL in PHP. Can anyone assist? ...

Ways to display console.log output in VS Code?

Sorry if this question is a bit unclear, but I'm struggling to figure out how to display the results from my console.log (line 14) in the console/terminal. I want to see the random RGB values generated for each column every time I click the button, bu ...