Using the last child as a parent element in Selenium with JavaScript

I am trying to access the input element of the last child in this code snippet. Specifically, I want to retrieve the text Text Reply - Delete.

<div class="priority-intent-div">
  <div class="row add-priority-intent-div">
    <div class="col-xs-12">
      <input type="hidden" name="priorityIntentId" value="5f8fb2f031f8a20a0cd6e2d1">
        <div class="form-group">
          <div class="intent-conditions">
           <button onclick="addIntentCondition(this)" type="button" class="btn btn-default" style="width: 100%">
              <span class="fa fa-plus"></span> Add Condition</button> 
         </div> 
           <label for="priorityIntentName" class="control-label">Intent Name</label>
           <input type="text" name="priorityIntentName" placeholder="Greeting" single="" maxlength="20" class="form-control maxlengthBadge" value="Text Reply - Delete" required="">
           <div class="help-block with-errors"></div>

I attempt to target the last child using this code:

let block = await driver.findElement(By.css('div.priority-list-tab > div.priority-intent-list > div:last-child'))
await driver.executeScript("arguments[0].scrollIntoView(true)", block)

While it successfully scrolls down to the last child with the class priority-intent-div, there seems to be an issue when trying to extract the text from that last child (specifically from the input tag) using:

priority_intent_name = await block.findElement(By.xpath('div/div[1]/div/input'))
priority_intent_value = await priority_intent_name.getAttribute('value')
expect(priority_intent_value).to.be.eq(intent_name)

Instead of retrieving the desired value from the last child, it is returning the value of the first child. Can anyone offer assistance? https://i.sstatic.net/rBu72.png

Answer №1

let nodeElement = await driver.findElements(By.xpath(`//div[@class='priority-intent-list']`));
let lastNode = nodeElement[nodeElement.lenght - 1];

let intentDiv = await nodeElement.findElements(By.xpath(`//div[@class='priority-intent-div']`));
let lastIntentDiv = intentDiv[intentDiv.lenght - 1]
let response = await lastIntentDiv.findElement(By.xpath(`.//input[@type='text']`)).getAttribute('value')

or

let result = await driver.findelement(By.xpath(//div[@class='priority-intent-list'][last()] //div[@class='priority-intent-div'][last()] input[@type='text']))
priority_intent_value = await result.getAttribute('value')

*find elements will give you a collection of elements, get the last one or use XPath to find the input directly, something like this

//input[(@value='Text Reply - Delete')]
read this once: *

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

Hiding overflow when navigating back a page in Safari

I need help finding a solution to this issue. On my website, the results page works perfectly fine until I navigate to a product's details page and then return to the results using the "page before" button. At that point, the overflow becomes hidden, ...

Writing Xpath for a disabled button in Selenium with Salesforce using Java

I need assistance with creating an XPath that will only work when a button is enabled. If the button is disabled, I do not want the XPath to click on it. Currently, when I write the XPath and check if the web element is enabled, it always returns as enabl ...

Is it unwise to use catch blocks for logic and routing?

After making changes to the code below to handle Exceptions from the DB and display error messages on the GUI in case of failure, my supervisor told me it's a bad idea! I find it more convenient and can't see any potential design flaws. Can anyon ...

Selenium in C# encounters difficulty in retrieving input values from Angular

I am currently utilizing Specflow within Visual Studio for creating Selenium Chrome webdriver tests on an Angular 5 application. Within my HTML, I have an input field: <input type="text" (change)="onInputChange()" id="{{name}}" [(ngModel)]="inpu ...

Establishing the state in React using information received from a Java Spring request

I am currently working on a small project with React for the front end and Spring Java for the backend. I am trying to populate a React "state" based on the response from a method in Spring. Here is an example of the Java method: @CrossOrigin(origins = ...

The attempt to execute 'removeChild' on 'Node' was unsuccessful because parameter 1 is not the correct type. Although it did remove the elements from the DOM, it only did so once

It's quite a challenge I'm facing!!! Although there have been similar questions asked before, they were all for specific scenarios. I am currently developing a tictactoe game using the module design pattern. The function below helps me create tw ...

Guide on displaying the AJAX response within an HTML or JSP element pulled from a database

description of image 1description of image 2How can I display an AJAX response from a database (map) on a JSP screen? I am able to retrieve the response in the browser console but unsure how to visually render it on the JSP page, like in a table or any ot ...

Enable compatibility with high resolution screens and enable zoom functionality

My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...

Utilizing CSS3 to apply a customized background color to every set of three table rows

Is it possible to achieve what I want using CSS3 without Javascript? I've experimented with nth-child and nth-of-type, but couldn't get it to work. I have three table rows that I want to give a background color to, but the table rows beneath them ...

Formatting tables

Below is the table structure that I have. I attempted to insert empty tds divs in order to achieve the formatting shown in the image, but I have not been successful. Any suggestions or ideas would be greatly appreciated. <table border="0" cellpadding=" ...

WebDriver clicks on the Google Play button

Could someone assist with a task that involves clicking the "More" button on this link: Attached is a screenshot for reference: Here's the code snippet I have so far: String url = "https://play.google.com/store/apps/category/FINANCE/collection/tops ...

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

Firebase listeners activated even when application is idle

Is there a way to keep my Firebase listeners active, even when the app is not running? I want to dynamically add listeners without relying on a service. Your assistance would be greatly appreciated. ...

When attempting to select the 'yes' option in the popup window, it does not seem to be responding

Every time I click on something, a popup window appears with options. I am struggling to select the 'Yes' option in this popup. I have tried various methods like switch windows and alerts, as well as using id=yes and css selectors, but nothing ha ...

Stylishly Select with Bootstrap 4

Currently, I am utilizing Angular 2 with bootstrap 4 and have implemented the following select element: <div class="form-group"> <label class="col-md-4 control-label" for="OptionExample">Choose an option:</label> <div class="c ...

A tool designed to create a function that can fetch information from a JSON file

Currently, I am working on a function that accepts arguments and combines them to form a line for searching data in a JSON file. To accomplish this, I have initialized a variable for the readFileSync and then added the function's arguments to it in or ...

Show the table within the flex container

I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...

What could be causing my inline-block divs to not line up correctly?

Presented below is the code snippet of my HTML: .classWrap { text-align: center; } .classInd { display: inline-block; height: 200px; width: 200px; margin: 20px; border: 2px solid #FFF202; border-radius: 10%; box-shadow: 0 0 15px 0 #FFF2 ...

Maintaining the original size of the fill texture when resizing a path in SVG

I have created an SVG pattern using the following code: <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="circles-1_4" patternUnits="userSpaceOnUse" width="10" height="10"> & ...

Creating a Mobile-friendly Sidebar: A Guide to Angular 5

I've been seeing a lot of recommendations online about using Angular Material for creating a sidebar, but I'm hesitant to install an entire library just for one component. After following the instructions provided here, I managed to develop a si ...