In JavaScript, update all child nodes with a class name attribute

Currently, I am utilizing Selenium Webdriver in my project. On a webpage of mine, there exists numerous menu items each containing sub menu items. My objective is to modify the classname attribute for all child elements located under the nav-left-main div tag to an empty string. This will ensure that all elements are visible on the main page for easy clicking, rather than having to navigate through each menu and submenu individually. In essence, I need to identify all elements with a classname under the id=main and replace them with ''. How can I accomplish this using JavaScriptExecutor within Selenium Webdriver?

<div id="nav-left-main">
<div>
<a class="left-nav-icons icomoon-icon-users3 " title="Users" href="#Users-tab">
<div id="Users-sub" class="nav-left-subnav">
    <div id="Users-tab" class="hidden-menu">
      <ul class="level3menu">
       <li>
          <i class="cm-icon18 iconfont-arrow-sans-right" style="margin-top:-2px;margin-left:-17px;"></i>
          <a>Users</a>
          <ul class="second-level-hidden-menu" style="margin-left:5px;margin- top:10px;">
          <ul class="second-level-hidden-menu" style="margin-left:5px;margin-top:10px;">
          <ul class="second-level-hidden-menu" style="margin-left:5px;margin-top:10px;">
       </li>
   </ul>
<ul>
      <li>
        <a id="AdminGroups" class="$item.className" title="" href="cms?action=groupList&pageTitle=Groups">Groups</a>
      </li>
</ul>
<ul>
</div>
</div>
</div>
javascriptseleniumwebdriver

Answer №1

You can try this solution:

const mainDiv = document.getElementById("nav-left-main");
const allChilds = mainDiv.getElementsByTagName("*");   
for (let i=0; i<allChilds.length; i++) 
{
    if ( allChilds[i].hasAttribute("class") ) allChilds[i].className = ""; 
}

Answer №2

Are you looking to automate tests for your project? Keep in mind that modifying the UI content may have unforeseen consequences on other elements of the page, such as JavaScript functions relying on specific class attributes.

One alternative is to inject CSS changes using STYLE or LINK tags to alter the appearance and visibility of elements, potentially using !important to prioritize styles. However, this method also has its drawbacks as it could cause issues with JavaScript functionalities.

Although I'm not well-versed in webpage testing, isn't Selenium meant to simulate human user behavior? Perhaps a more effective approach would be to write test code that mimics how a human user interacts with the website, like triggering menu activation through mouseover events.

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

Tips for loading extensions in Chrome Driver using Python with Selenium

I have been facing difficulties in opening the Chrome browser with the Browsec extension enabled despite several attempts. Here is what I have tried so far: # Setting up the required command-line option. options = webdriver.ChromeOptions() options.add_argu ...

pythonseleniumgoogle-chromegoogle-chrome-extensionselenium-chromedriver

Dismiss MUI Snackbar notification and execute action upon pressing a key

A custom notification system has been developed, utilizing the material ui Snackbar with both an action button and a close button. The objective is to implement a listener event for the "enter" key in order to trigger the specific notification's actio ...

javascriptreactjsmaterial-ui

What is a more efficient method for structuring this React page while making an asynchronous request to the API?

When developing, I encountered this scenario where I needed to ensure that a certain useEffect function only runs once. To achieve this, I established router.query.something as a dependency for the effect. The logic is such that the request will only trigg ...

javascriptreactjs

JavaScript: Scroll Through Images Horizontally with Descriptions for Each Image

I am looking to create a horizontal scroller/slider that will display images with captions underneath each image. The data is provided in an array of objects, so I need to iterate through the data and populate each item in the scroller with the necessary i ...

javascriptimagesliderscroller

Automatically insert a hyphen (-) between each set of 10 digits in a phone number as it is being typed into the text

I'm attempting to automatically insert a hyphen (-) in between 10 digits of a phone number as it is being typed into the text field, following North American standard formatting. I want the output to look like this: 647-364-3975 I am using the keyup ...

javascriptangulartypescript

Creating a Self Closing Alert Message in AngularJS: A Step-by-Step Guide

Just getting started with AngularJS and looking to create a self-closing message. How can this be accomplished? I'm aiming for similar results as the question found here: How to Automatically Close Alerts using Twitter Bootstrap However, I want to ...

javascriptangularjs

Tips for maintaining the order of characters when using the SendKeys() function in Selenium with C#

When using Selenium c# to input data into a Textbox on My Test Website, the cursor position defaults to the middle and the entered data appears in the incorrect order, such as 3421 instead of the correct sequence 1234. Does anyone have any suggestions on ...

c#seleniumselenium-webdriverwebdriversendkeys

Error encountered with java.lang.NoClassDefFoundError when attempting to employ FirefoxDriver(Selenium) in a Docker environment with an alpine

Recently, I encountered an error when trying to use the FireFox driver in my web browser manipulation application after dockerizing it. The technologies used include Selenium, Firefox-driver, and a maven:3.6.1-jdk-8-alpine image with firefox-esr and xvfb ...

javaseleniummavenwebdriveralpine-linux

Displaying/Concealing specific choices using jQuery

Greetings! I am in need of some assistance with my coding query. I have been working on a piece of code where selecting 'x' should reveal another dropdown, which seems to be functioning correctly. However, if I navigate three dropdowns deep and t ...

javascriptjqueryhtmlcss

An error was encountered: Unable to assign value to the property "once" of [object Object] because it only has a

`Encountering an Uncaught TypeError: Cannot set property 'once' of [object Object] which has only a getter at HTMLDivElement.addEventListener (polyfills.js:1:146664). This issue is being faced during the process of upgrading the Angular version. ...

javascriptangularangularjsnpm-installnpm-scripts

Modify the material of all other models to match the material of the selected model

I've been tinkering with the vertex shader for 3D models, but I'm running into an issue where I can't seem to change all other models' materials to match the selected model's material. Each viewport contains 4 models, and when I se ...

javascriptthree.js

Guide to retrieving a byte array from a server using JavaScript and converting it into a downloadable PDF

I am attempting to convert a byte array received from the server and download it as a pdf. The download functionality is working, but unfortunately, the file appears to be corrupt. My approach involves using JavaScript and vue.js. Function responsible fo ...

javascriptc#vue.js

Nuxt.js and Algolia Integration Issue: Search Box Functionality Dysfunction

Looking to integrate Algolia into my Nuxt.js WebApp and came across a helpful example in the official Algolia documentation here I've managed to display all the records successfully: see image here However, I'm experiencing issues with the sear ...

javascriptvue.jsnuxt.jsalgolia

"Enhance User Interaction with a Bootstrap Popup when Submitting Form Data via

As a junior web master, I have a simple question to ask. I have created a single page application for a client with a contact form at the end of the page. The validation is done using Bootstrap, but the only method I know to send the form data to a mail id ...

javascriptphpjqueryhtmltwitter-bootstrap

Creating a custom route in Node.js using Express for posting content and adding it to a specific user's page

I am currently working on a node.js express project where I am developing a health app for a trainer to manage his clients. The main functionality of the app includes allowing the trainer to access individual client profiles and view their exercise list by ...

javascripthtmlruby-on-railsnode.jsexpress

Guide to executing a fetch request prior to another fetch in React Native

I am currently working on a project using React Native. One issue I have run into is that all fetch requests are being executed simultaneously. What I actually need is for one fetch to wait until the previous one has completed before using its data. Speci ...

javascriptreact-nativeasync-awaitpromise

Looking for ideas on how to use Python and Selenium for web scraping?

Input Field: <input type="text" auto_complete_item_format="<b xmlns=&quot;none&quot;>[_full_name]</b>" auto_complete_display_field="_full_name" auto_complete_id_field="suburb_id" auto_complete_ ...

pythonselenium

Enabling Typescript to identify additional methods introduced via Object.prototype

I am hoping for typescript to detect the changes I make to Object.prototype. Ideally, I want to be able to do something like: Object.prototype.l = function (title: string) => { console.log({[title]: this}) return this } const bar = foo().l(&apos ...

javascriptnode.jstypescriptprototypejsdoc

Retrieving the current URL using selenium

Greetings I'm trying to retrieve the current URL of a page after clicking on a link. When I click on the link (on the first page), it opens a new page (second page) and I need to get the URL of that page. However, when I use the GetCurrentUrl() metho ...

urlseleniumjunit

"Step-by-step guide on adding a new row to a table using a child controller in AngularJS

I have a table where I can insert new rows by opening a dialog window and entering the data. The dialog window contains a child controller called addNewTaskCtrl. Inside this dialog, there is a form that inserts data into the table when the "Add" button is ...

javascriptangularjs