How to choose an element in Webdriver.io that dynamically changes depending on the quantity of similar elements present on the webpage

I'm looking for a way to target the udp-address-input field within the named-source-add div. The issue I'm facing is that the element id udp-address-input-<+id> changes based on how many named sources are added. However, there is always only one udp-address-input-<+id> element inside the named-source-add div. Is there a way to narrow down my search to just that specific div?

<div id="named-source-add" class="named-div">

<input type="text" class="table-cell" data-bind="textInput: address, attr: 
{id: 'udp-address-input-'+id, readonly: readonly, required: role() == 
'destination'}" id="udp-address-input-18">

</div>
cssselenium-webdriverxpathcss-selectorswebdriver-io

Answer №1

My method involved using xpath to specifically target input fields with ids that begin with udp-address-input within the named-source-add section.

//div[@id='named-source-add']//input[contains(@id,'udp-address-input')]

To make it compatible with my javascript webdriverio page object, I had to include additional slashes in the code like so:

udpMulticastAddr:{ get() { return '//div[@id=\'named-source-add\']//input[contains(@id,\'udp-address-input\')]';}},

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

Are the links drifting to the left?

Some of the links on my website seem to be misbehaving and not following the CSS rules, floating to the left unexpectedly. Strangely, it's only the links that are affected; the rest of the text appears fine. For example, you can observe this issue at ...

htmlcsswordpress

Utilize the `addEventListener` and `removeEventListener` functions on the menu to

Why is my mobile menu not functioning correctly? The submenu should open on the first click and redirect to the parent URL on the second click, which works fine. However, when the window width increases to 768px or more, the submenu should appear on hover ...

javascripthtmlcssaddeventlistenerwindow-resize

I am currently in the process of gathering information from a newspaper by clicking on the "next" button in order to access

I am attempting to retrieve data from the economy section of Business Standard newspaper by clicking on the links, but I have been unsuccessful so far. from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.w ...

pythonseleniumxpathselenium-chromedriverwebdriverwait

What could be the reason behind the discrepancy in functionality between two identical jsfiddles?

I am currently in the process of trying to create a map where each subsection will highlight when hovered over. After conducting some research, I came across imagemapster as the recommended method to achieve this functionality. Surprisingly, the first link ...

htmljquerycssimagemapimagemapster

Can a button be created with multiple borders and a drop shadow effect?

I am trying to create this specific button using CSS https://i.sstatic.net/sLNzK.png (source: gyazo.com) Don't pay attention to the grey background I attempted cropping the center and adding border top, left, right, but it still looks odd. Do you ...

cssbuttonstyles

Can you provide instructions for selecting a checkbox within a group of checkboxes using Selenium and WebDriver in Java?

Currently, I am utilizing Selenium 2 (Webdriver) to automate tests on a website. I am wondering if there is a way to select a checkbox from a list of checkboxes using the webdriver framework? I have attempted the following code with no success: IWebElemen ...

seleniumwebdriverselenium-webdriver

Entering data into a webpage and retrieving the result from a designated cell in a Google Sheets document

Currently, I am in the process of developing a school platform and I am looking to incorporate a functionality that allows students to easily check the number of "passport" points they have earned. I envision having an input field along with a button that ...

javascriptphphtmlcssgoogle-sheets

Are there any alternatives to using <HR/> for creating lines in Bootstrap 3?

While working on my page design using Bootstrap 3, I noticed that the `` tag has too much margin. This is causing it to not fit well with the overall compact look of my page. Do you have any alternative options for drawing a line in Bootstrap 3 that woul ...

htmlcss

problem with the visibility of elements in my HTML CSS project

How do I prevent background images from showing when hovering over squares to reveal visible images using CSS? h1 { text-align: center; } .floating-box { float: left; border: 1px solid black; width: 300px; height: 300px; margin: 0px; } div ...

javascripthtmlcssimagevisibility

Is it possible to perform a CSS flip animation without delay?

Trying to implement David Walsh's CSS flip effect for an image that should change to another without requiring a mouseover. Is there a way to trigger it automatically, maybe in 3 seconds? I'm new to this so any help would be greatly appreciated! ...

htmlcss

Enhancing Your Website with Animation Delay using Animate.css and ViewportChecker

I am attempting to apply a delay to various elements with animated classes on a specific webpage using animate.css version 3.5.1 by Daniel Eden and jquery-viewport-checker version 1.8.7 by Dirk Groenen. My initial approach was to utilize the setTimeout fu ...

jquerycssanimationviewport

How can I ensure the carousel stays centered on a webpage even after resizing the browser window?

Currently in the process of developing a website, I have implemented a jquery-based carousel on the homepage sourced from here. However, substantial modifications were made to tailor its appearance specifically for the site. The issue at hand is that I hav ...

javascriptjqueryhtmlcsscarousel

What is the best way to use html, css, jquery, and bootstrap to show or hide images without any extra space or alignment issues

I am looking to showcase 6 images on a page using the Bootstrap grid layout. The images should be displayed in two rows, with 3 images in each row. Additionally, I want to implement a filter functionality using Isotope, so users can click on a specific cat ...

javascripthtmlcssbootstrap-4

Tips for avoiding a noticeable sliding drawer when changing the direction of an HTML element

I am encountering an issue with the Daisy UI drawer component on my page. When I attempt to change the page direction using a JavaScript function, the drawer animates visibly from left to right or right to left, which is not the desired behavior. I have tr ...

htmlcsstailwind-cssdaisyui

The RemoteWebDriver is currently unable to upload the file

Having trouble uploading a file on a demo site using RemoteWebDriver? You’ve successfully done it with the regular WebDriver driver, but now facing issues with RemoteWebDriver. The exception thrown is :"org.openqa.selenium.WebDriverException: Settin ...

javaselenium-webdriverautomationremotewebdriver

Visibility of text compromised when placing transparent button inside input field

After adding a clear button inside the input box in Angular, I am facing an issue where the text in the input box is being overlapped and not fully visible. Below you will find detailed information on this problem. HTML Code <ng-template pTemplate=&quo ...

htmlcssangularstylesp-table

Receiving inaccurate video duration when the input bar is modified

Initially, I am uncertain whether the issue stems from Javascript or CSS. The code in question involves displaying the corresponding video time when a user hovers over an input bar. The calculation utilized is as follows: ((user mouseX position / input wi ...

javascripthtmlcsshtml5-video

Problem: Implementing a horizontal scrolling feature using Skrollr

I'm interested in creating a horizontal animation controlled by skrollr. As I scroll down, I want the elements on my page to move from left to right within my container. When all elements have the same width, setting the scrolling data from 100% to 0 ...

javascriptjqueryhtmlcssskrollr

Issue with Bootstrap/Bootswatch Dropdown Tab Not Showing Up

I am encountering an issue while trying to implement a tab with a dropdown navigation, similar to the examples shown on Bootswatch. Interestingly, it seems that this functionality is not working properly even on the demo page provided by Bootswatch. My ma ...

javascripthtmlcssbootstrap-4bootswatch

alteration of colors in a Chartist chart

Currently, I am working with a chartist graph where the colors are defined at a framework level. However, I need to make changes to the colors for a specific graph without altering the framework level settings. I attempted to create a .less file, but unfor ...

htmlcssangularjschartist.js