Monitor the DOM for visibility changes in Selenium WebDriver and PjantomJS before proceeding

I am currently creating automated test scripts using selenium-webdriver, phantomJS, and mocha.

The script file I'm working with is a JavaScript file.

My goal is to wait until an element (<a>) is fully visible before clicking on it.

Let me provide some details:

There are menus and submenus, with the menu being collapsible. Clicking on a menu reveals its corresponding submenus.

The script I have iterates through the menu, clicks on it, then checks the status of the submenu.

for(var iMajor = 2; iMajor <= majorLinkLast ; iMajor++)
{   
    majorMenuXPath = "//ul[contains(@id, 'side-menu')]/li["+iMajor+"]/a";
    if(iMajor != 2)
    {
        driver.findElement(By.xpath(majorMenuXPath)).click();
        driver.manage().timeouts().implicitlyWait(30 * 10000);
    }   
    for(var iMinor = 1; iMinor <= minorSize[iMajor] ; iMinor++)
    {   
        minorMenuXPath = "//ul[contains(@id, 'side-menu')]/li["+iMajor+"]/ul/li["+iMinor+"]/a";
        driver.findElement(By.xpath(minorMenuXPath)).isDisplayed().then(function(elem){
        console.log(elem);
    });
}

This code shows the visibility status of the submenus as either true or false. Some submenus are not visible even after clicking the parent menu, despite using implicit waiting in the driver settings.

I require assistance with the following:

  1. How can I wait until a submenu becomes visible? Once visible, I need to perform certain actions.

  2. Alternatively, how can I make a submenu visible after a set time period?

Below is the HTML structure:

<ul id="side-menu" class="nav">
    <li class="nav-header">
    <img class="logo" alt="Track Revenue" src="/images/3c4939d.png">
    <div class="logo-element"> TR </div>
    </li>

    <!-- Other menu items omitted for brevity -->

    <li>
    <a href="#home">
    <i class="fa fa-cog"></i>
    <span class="nav-label">Settings</span>
    <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse">
        <li>
        <a href="/profile/">Account</a>
        </li>
        <li>
        <a href="/plan/">Plan Management</a>
        </li>
    </ul>
    </li>
</ul>

Note:

I have basic knowledge of Selenium and require a JavaScript solution. I do not know Java, Python, or C#. Can someone assist me with this issue?

javascriptselenium-webdriverphantomjsmocha.js

Answer №1

There's a reason it's concealed from view, right? Implement automation to uncover elements that are normally hidden. At times, portions of a webpage remain unseen due to the presence of multiple "views" on one page. Users typically switch between these views by clicking or completing forms. Your task is to replicate this user interaction through automation.

Answer №2

This code snippet was instrumental in ensuring the elements were properly displayed.

menuSelector = "//ul[contains(@id, 'side-menu')]/li["+iMajor+"]/ul/li["+iMinor+"]/a";
//The following code is utilized to have the driver wait until the element becomes visible.
driver.wait(function() 
{
   return driver.isElementPresent(By.xpath(menuSelector));
}, 20*1000);
driver.findElement(By.xpath(menuSelector)).then(function(elem)
{
    elem.isDisplayed().then(function(status){
        console.log(status);
    });
});

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

Prevent the annoying popup "Chrome did not shut down correctly, Restore Pages?" from appearing when using selenium webdriver in Java

Despite encountering similar questions regarding this issue, I am reposting my question as I am still experiencing the problem. On my website, the login verification code is required only during the first login and not on subsequent logins. However, when S ...

javaselenium-webdriverpopupchrome-profile

The Workbench has "Rejected the setting of an insecure header 'content-length'"

While working on implementing a simple xhr abstraction, I encountered a warning when trying to set the headers for a POST request. Strangely, I noticed that the issue might be related to setting the headers in a separate JavaScript file. This is because wh ...

javascriptajaxxmlhttprequest

Email responses containing unidentifiable values

Currently, I am working on implementing AJAX for my contact form to send form data to the server. The objective is to have the server email me the user's information extracted from the input fields. However, I'm encountering an issue where the f ...

javascriptajaxexpressform-datax-www-form-urlencoded

Automated Desk: adjust page through programming

I am currently utilizing Smart Table and I would like to automatically navigate to a specific page once the controller has been created and the table is displayed. After searching on stackoverflow, I came across this code snippet that allows me to achieve ...

javascriptangularjssmart-table

Searching in binary for the number closest to the target float value

Seeking assistance with a float array conundrum! I am trying to identify the closest float value to a target number within the array. My attempt involved utilizing a basic binary search algorithm in JavaScript, but I've hit a roadblock. function bina ...

javascriptalgorithmecmascript-6binary-search

The occurrences of Swiper events fail to be activated

I am in the process of developing a gallery website that utilizes the Swiper JQuery plugin for slideshows and isotope for grid layout. Each individual item within the gallery has its own slider and corresponding isotope element. The Swiper gallery is in ...

javascriptjqueryfancyboxswiper.jsjquery-isotope

When a jQuery click event is triggered, the event.target will return the child element that was clicked within the

When I have a jQuery click event assigned to a hyperlink that contains an image, each with separate ids, I expect clicking the hyperlink to trigger the code event.target.id, returning the hyperlink's id. However, it actually returns the image's i ...

javascriptjqueryhtmleventsjquery-events

using Angular and RxJS to filter out an element from an array

One of the functions in my service is a delete function. This function calls an API that returns either true or false. If the response is true, I then proceed to find the index of the item in my array, splice it out, and return the updated array. Here&apos ...

javascriptangularrxjs

What could be causing the abortTransaction() method in mongoose to not function as

System OS: MacOS 10.15.5 NodeJS Version: 10.16.3 Mongoose Versions: 5.8, 5.9 MongoDB Version: 4.0.3 The following code snippet is in question: import User from 'models/user' const session = await User.startSession() session.startTransaction() ...

javascriptnode.jsmongodbmongoosetransactions

What are the best practices for protecting a web application with login and database in the year 2022?

My knowledge of security is outdated and I am looking to update my skills in full stack development. Currently, I am exploring Oauth2, JWT, Next.JS, Auth0, and more, but I am struggling to integrate all these components together. Please bear with me as I m ...

javascriptapisecuritynext.jsauth0

Preserving the original "this" context while binding a callback for a React child

class Parent extends React.Component { constructor(props) { super(props) this.handleChildOnClick = this.handleChildOnClick.bind(this) } handleChildOnClick() { /* Here, I want to perform an action that involves both Child and Parent. ...

javascriptreactjsthis

"Encountering an 'Undefined function' error while implementing AJAX in the code

I'm encountering the issue Uncaught ReferenceError: GetLicenceUserList is not defined in the browser console when I utilize the function with $.ajax inside. However, the function works perfectly fine when I invoke it with just an alert("example& ...

javascriptjqueryajax

Why does trying to package a Windows app on OSX prompt a request for Wine installation?

For several months, I have been successfully utilizing Electron on macOS (10.11.6) to create and package both OSX and Windows applications. My current setup includes electron v1.7.3 and "electron-packager" "^8.5.2", all of which have not been updated in a ...

javascriptnode.jselectronwine

Performing multiple AJAX calls from JavaScript

for(var y=0 ; y<=23 ; y++) { AjaxRequest99 = null; AjaxRequest99 = getXmlHttpRequestObject(); // method to initiate the request if(AjaxRequest99.readyState == 4 || AjaxRequest99.readyState == 0) { AjaxRequest99.open("GET", "aja ...

javascriptajax

The resolution of Q.all does not occur in the expected order

I'm currently facing an issue with the order in which promises are being executed in Node.js. The goal of the code is as follows: a) Run a query and use the resulting latitude/longitude pairs to b) Calculate the shortest paths (using an async funct ...

javascriptnode.jsq

Scrollable content with sticky positioning using CSS3 and JavaScript

I successfully implemented a sidebar using the position: sticky property and it is functioning perfectly. To identify colors in the following text, refer to the script below. When scrolling, the black area remains fixed while the green area sticks to its ...

javascriptjqueryhtmlcss

Hide an Angular button when a page is loaded, depending on the information found in a table

How can I hide the Submit button in a table row if a certain condition is met based on information from the database? I attempted to create a function that returns true or false, but it ends up crashing my program because it runs continuously. I also trie ...

javascripthtmlangularjs

Ensure that both Vue methods are executed synchronously

I am working with two Vue methods: (1) this.retrieveSavedSearches() (2) this.updateDefaultSelectOption() Is there a way to ensure that method (2) only executes after method(1) has completed its execution? ...

javascriptvue.jsvuejs2

Troubleshooting a problem with dynamic options in Materialize select set

I'm currently facing an issue with my two dependent dropdowns, country and state. When I select a country, I use JavaScript to populate the respective states in the state dropdown. However, even though the options are added correctly when I inspect th ...

javascripthtmlmaterialize

JavaScript regex substitution not functioning as expected

My JavaScript code contains a string var str = '<at id="11:12345678">@robot</at> ping'; I am trying to remove a specific part of this string <at id="11:12345678">@ To achieve this, I am using the following code snippet: var ...

javascriptregex