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

When the @change event is triggered, Vue data objects do not exhibit reactivity

Trying to figure out why the msg and show data parameters are not updating when triggered by @change. To ensure that these parameters are only updated upon successful file upload, I placed them inside the lambda function of onload: reader.onload = functio ...

javascriptnode.jsvue.jsquasar

unable to clear form fields after ajax submission issue persisting

After submitting via ajax, I am having trouble clearing form fields. Any help in checking my code and providing suggestions would be greatly appreciated. Here is the code snippet: jQuery(document).on('click', '.um-message-send:not(.disabled ...

javascriptjqueryhtmlajax

Guidelines for Naming Data Attribute Values in JavaScript

When it comes to the Data Attribute Value, should one use hyphens or camelCase as a convention? Hyphen Example: <input type="text" name="some_input" data-target="to-grab-input-via-javascript"> Camel Case Example <input type="text" name="some_ ...

javascriptjqueryhtml

Guide to eliminating hashtags from the URL within a Sencha web application

I'm currently developing a Sencha web application and I need to find a way to remove the "#" from the URL that appears after "index.html". Every time I navigate to a different screen, I notice that the URL looks like this: ...../index.html#Controller ...

javascriptwebsencha-touch

Exploring the World of D3.js with an Interactive Example

Struggling to grasp D3, I'm having difficulty executing the circle example. http://mbostock.github.com/d3/tutorial/circle.html I aim to run the part where the circles change colors and sizes. I simply copied and pasted the example but can't fi ...

javascriptd3.js

What is the method for modifying the chosen color using a select option tag instead of a list?

element, I have a Vue component that features images which change color upon clicking a list item associated with that color. <div class="product__machine-info__colors"> <ul> <li v-for="(color, index) in machine.content[0] ...

javascripthtmlvue.jsinterpolation

Having trouble getting the form to submit with jQuery's submitHandler

I am in the process of converting a contact form to AJAX so that I can utilize the success function. Currently, I am encountering an issue where the code is halting at the submitHandler section due to it being undefined. Can anyone identify why my submitHa ...

javascriptphpjqueryajaxforms

Implementing PhantomJS with Selenium WebDriver in a Java environment

My frustration is escalating, seriously. Here's the code snippet that's driving me crazy: public class Creazione extends TestCase { private PhantomJSDriver driver; private String baseUrl; private boolean acceptNextAlert = true; p ...

javaseleniumselenium-webdriverphantomjsscreenshotexception

Add a SlideUp effect to the .removeClass function by using a transition

Looking to incorporate a SlideUp transition while removing the class with .removeClass. This script handles showing/hiding the navigation menu based on page scroll up or down. I am looking to add a transition effect when the navigation menu hides. Check ou ...

javascriptjqueryscrollslideup

The Jquery Mobile 1.4.5 virtual keyboard on the device is causing the form inputs at the bottom of the page to become hidden

I am currently working on a web app using JQuery Mobile 1.4.5. Encounter an issue that seems to be related to either the browser or JQM bug specifically when using Google Chrome in fullscreen mode on Android (v.4.4.2). Upon clicking on the Click Here!! ...

javascriptandroidjqueryhtmljquery-mobile

Choose an item from a list that does not have a particular class

Here is a list of items: <ul id='myList'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li class='item-selected'>Item 4</li> <li>Item 5</li> & ...

javascriptjqueryhtmlcss

New techniques in VueJS 3: managing value changes without using watchers

I am currently working on coding a table with pagination components and I have implemented multiple v-models along with the use of watch on these variables to fetch data. Whenever the perPage value is updated, I need to reset the page value to 1. However, ...

javascriptvue.jswatch

"Is there a way to extract text enclosed within HTML tags, such as <div>text</div>, with Selenium using C#

How can I extract the text 'True' from within the HTML tags <div>text</div> using Selenium and C#? <div type='data' id='OfferInCart' style='display:none;'>True</div> I have attempted to retr ...

c#htmlselenium-webdriver

How to extract data from Google Sheets using NODEJS?

When utilizing the REST API to extract data from a cell range in Google Sheets, the response returned is as follows: { "range": "RECORD!A2:J2", "majorDimension": "ROWS", "values": [ [ "07/11/2016", "21:20:10", "3", "MAIN" ...

javascriptjsonnode.jsgoogle-sheets

Having trouble retrieving state parameters when trying to launch a modal in AngularJS

When the "view detail" link is clicked, I wanted to open a modal for a detailed view of a specific user. However, I encountered an issue where I couldn't retrieve the user ID in the resolve attribute of $uibModal.open(). Strangely enough, the ID is av ...

javascriptangularjsangular-ui-router

What are some ways to monitor the movement of elements and activate functions at precise locations?

I am working on a project that involves a #ball element which, when clicked, utilizes jQuery animate to move downwards by 210px. The code I currently have is as follows: $('#ball').click(function() { $(this).animate({ top: '+=2 ...

javascriptjquerycss

React Component: Issue with conditional "if else" statement not refreshing in return statement

Starting out in React and the front-end field with minimal experience. Currently attempting to dynamically change the color of the "fill" property in a polygon element using React. If the percentage is greater than 50, I want the color to be green; otherw ...

javascriptreactjswebreact-component

Exploring the potential of VSCode's RegEx search and replace

I am working on an Angular translation file and need to perform a search and replace operation in VScode for the translate key. The goal is to extract only the final key and use it in the replacement. The keys are structured with a maximum depth of 3 level ...

javascriptregexsearchreplacevisual-studio-code

Tips for hiding a popover in Angular when clicking outside of it

In a demo I created, rows are dynamically added when the user presses an "Add" button and fills in a name in an input field. Upon clicking "OK," a row is generated with a Star icon that should display a popover when clicked. While I have successfully imple ...

javascriptjqueryangularjs

Bring in Bootstrap and the Carousel plugin using Webpack Encore

Currently, I am tackling an issue within my Symfony project that involves Webpack Encore and the loading of Bootstrap and the Carousel plugin. The problem may stem from how I import Bootstrap, as it seems to partially work when I import the file like this ...

javascriptbootstrap-5webpack-encorebootstrap-carousel