Tips for working with elements in WebDriver that are created dynamically by JavaScript

As a novice in automation using Java and WebDriver, I find myself facing a particular issue:

  1. Browse for a specific customer
  2. Select a new customer type from a dropdown menu
  3. Click on the Save button

Outcome: Upon trying to change the customer, a message pops up (created by JS/Jquery) within a notification div container (refer to the code below). The message could be "Saving your changes", "Success", or "Failed" based on the customer being modified.

 <div id="notifications">
            <ul id="noty_inline_layout_container" class="" style="width: 100%; height: auto; margin: 0px; padding: 0px; list-style-type: none; z-index: 9999999;">
                <li style="overflow: hidden; background: rgb(255, 234, 168) url("data:image/png;base64,iVBORw0KGgoAAAANS")  border: 1px solid rgb(255, 194, 55); cursor: pointer; height: 1px;">
                    <div id="noty_545247324387577860" class="noty_bar">
                          <div class="noty_message" style="font-size: 13px;">
                              <span class="noty_text">Saving your changes...</span>
                          </div>
                        </div>
                     </li>
                <li style="overflow: hidden; background: lightgreen url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB=="); border: 1px solid rgb(80, 194, 78); cursor: pointer; height: 1px;">
                    <div id="noty_851025645275431000" class="noty_bar">
                        <div class="noty_message" style="font-size: 13px; ">
                            <span class="noty_text">Success</span>
                          </div>
                        </div>
                    </li>
          </ul>
        </div>

Following some time, the message fades away, leaving the notification div container empty like this:

<div id="notifications"></div>

To retrieve the text ("Saving your changes" or "Success") of the JS message that appears briefly, how can it be achieved?

javascriptseleniumwebdriver

Answer №1

To retrieve the text, you can utilize the WebElement#getText() method.

String text = driver.findElement(By.cssSelector("span.noty_text")).getText();

If you prefer more specificity:

String text = driver.findElement(By.cssSelector("div#notifications  span.noty_text")).getText();

Then, you can manipulate the variable text as needed.

Remember to execute this code "before" the message disappears to avoid a StaleReferenceException.

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

Displaying properties of a class in Typescript using a default getter: Simplified guide

Here is an interface and a class that I am working with: export interface ISample { propA: string; propB: string; } export class Sample { private props = {} as ISample; public get propA(): string { return this.props.propA; } public se ...

javascriptangulartypescriptgetter-setter

Using getElementsByTagName in E4X code involves querying for specific

Is it possible to retrieve an array of elements in E4X for an unknown tagname, similar to how the DOMs getElementsByTagName function works, within a function? My initial idea was: (function (doc, tag) { return doc..[tag]; }) Can this be achieved? ...

javascripte4x

Discover the optimal approach for merging two jQuery functions effortlessly

The initial function (which can be accessed at ) is as follows: $('#confirm').confirm( { msg: 'Before deleting a gallery and all associated images, are you sure?<br>', buttons: { separator: ' - ' } } ); ...

javascriptjqueryjquery-pluginsconfirm

Executing a function a specific number of times in Jquery

I have a query regarding JQuery related to randomly placing divs on a webpage. The issue I'm facing is that it currently does this indefinitely. Is there a way to make it run for a specific duration and then stop? $(document).ready(function () { ...

javascriptjquerycss

What is the reason for the Circle to Polygon node module producing an oval or ellipse shape instead of a circle shape?

I've been experimenting with the npm package circle-to-polygon and I crafted the following code to generate a polygon that resembles a circle. const circleToPolygon = require('circle-to-polygon'); let coordinates = [28.612484207825005, 77. ...

javascriptnode.jsgoogle-mapsnpmgeojson

Every time Chrome on Android returns a keyCode of 229

Here is a snippet of code that I am having trouble with: ... @HostListener('keydown', ['$event']) onKeyDown(evt: KeyboardEvent) { console.log('KeyCode : ' + evt.keyCode); console.log('Which : ' + evt.which); ...

javascriptangulargoogle-chrome

Alter value upon click using JavaScript switch statement

I have an array that was downloaded from PHP to JS with paths to images. I am trying to switch the value on clicking the arrow image, -1 for left and +1 for right. However, my code is not working as expected. <script> var urls = <?php echo jso ...

javascript

Mastering Node.js: Writing to a Write Stream on the 'finish' Event

I'm currently using Node.js streams to process a text file line by line, apply some transformations, and then generate an SVG file based on the data. However, I am facing an issue where when I try to write the closing tag (</svg>) after all pro ...

javascriptnode.jsstream

What is the correct way to establish a backgroundImage path in React JS?

When adding an img, the image path functions as expected: import Background from "./img/bg.webp"; ... <div> <img className='bg' src={Background} /> </div> However, when using the same path for the backgroundImage property, ...

javascriptreactjs

Guide on implementing tail.select in a VueJS project

As a newcomer to VueJS, I am facing issues with using the tail.select plugin in my VueJS project. Even though I have imported the plugin in my main.js file using import 'tail.select' When I try to call tail.select(".select") in the mounted hook ...

javascriptvue.jstail.select

What techniques can I implement to optimize the speed of this feature in JavaScript?

I have developed a feature that highlights any text within a <p> tag in red based on a user-specified keyword. The current implementation works well, but it is slow when dealing with over 1000 lines of <p>. Is there a faster way to achieve this ...

javascriptjqueryhtml

My Angular JS http.get request is failing to reach the specified URL

While working with AngularJS to integrate RESTful web services into my website, I am encountering an issue where I am consistently receiving errors instead of successful responses. I have been stuck on this for the past three days and any assistance would ...

javascriptangularjs

Instructions for converting a legal size document to a PDF using Python and Selenium

I have a functional script utilizing Python, Selenium, and the Chrome webdriver to convert webpages into PDF files. However, I am looking to save them in legal size documents (216 x 356 mm) instead of the current letter size (216 x 279 mm). Below is the c ...

pythonseleniumgoogle-chromepdfselenium-chromedriver

"jQuery Hide-and-Seek: A Fun Way to Manip

I am facing a challenge with a set of divs that I need to dynamically show and hide based on user interactions with questions. Essentially, the user will be presented with a question. Based on their answer, specific content with a title and description wi ...

javascriptjqueryhtmlcss

Struggling with overlaying Bootstrap modals on top of each other

This idea is inspired by the topic Multiple modals overlay I am working on developing a folder modal that allows users to either 1) open an existing file or 2) create a new file within each folder modal. To see how it functions, please run the code below ...

javascripthtmljquerycssbootstrap-5

defiant underscore refusing to function

I'm currently working on a text editor, but I'm facing an issue with the remove underline functionality that doesn't seem to be working as expected. For reference, you can check out a working code example here: jsfiddle Below is the part of ...

javascripthtmlcssunderline

Using NextJs <Script> is only effective after a page has been reloaded

Currently delving into the world of NextJS and encountering an issue with integrating a third-party ebay script onto one of my route pages. The script only seems to appear sporadically upon reloading the page. However, when navigating to the store page via ...

javascriptreactjstypescriptnext.js

What sets apart initializing a driver object with WebDriver driver = new FirefoxDriver() from using FirefoxDriver driver = new FirefoxDriver()?

There are different ways to create a driver object. We can use: WebDriver driver = new FirefoxDriver(); or FirefoxDriver driver = new FirefoxDriver(); The FirefoxDriver class implements the WebDriver Interface. Is there any difference between using th ...

javaseleniumwebdriver

Prevent the Spread of an Event for a Particular Controller

tl;dr Summary Develop a function that is able to handle a specific event on multiple elements within a hierarchy. The function should execute when the event is triggered on the first element reached during bubbling, but should not continue executing or re ...

javascripthtmleventsdom-events

Find out the index of a div within an array

Curious about determining the position of a div in an argument? For instance, if there are multiple divs with the same name: <div class="woot"></div> <div class="woot"></div> <div class="woot"></div> <div class="woot ...

javascriptjqueryhtmljquery-selectors