Is it possible to target a specific element within one of two classes that share the same name using CSS or XPath in Webdriver.IO?

Currently, I am using Webdriver.io and facing a challenge in selecting an element within the "text-fields-container" class. This particular element happens to be a password field, and both classes share the same name. Can someone guide me on how to go about selecting the second class that has type="password"?

<form>
<div class="text-fields-container">
<div>
<input type="text" class="text-field" placeholder="Email" required stype="margin-bottom: 1.125rem;">
</div>
<div>
<input type="password" class="text-field" placeholder="Password" required stype="margin-bottom: 5px;">
</div>
</div>
</form>

cssselenium-webdriverxpathwebdriverwebdriver-io

Answer №1

When choosing the second class with type="password", you have the option to use any of the following Locator Strategies:

  • cssSelector:

    "input.text-field[type='password']"

  • cssSelector (specific):

    "input.text-field[type='password'][placeholder='Password']"

  • xpath

    "//input[@class='text-field' and @type='password']"

  • xpath (specific):

    "//input[@class='text-field' and @type='password' and @placeholder='Password']"

Answer №2

Give this a shot: 

driver.findElement(By.xpath("(//input[@class='text-field'])[2]"));

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

"Create a unique visual layout with CSS using a four-grid

When utilizing four div grids and increasing the content size of table 2, it causes table 3 to align with table 4, creating a large gap between tables 1 and 3. Is there a way to adjust the responsive content sizing for tables 1, 3, 5... and 2, 4, 6... in o ...

htmlcss

The rendering of the font appears distinct when viewed on an iPad compared to when displayed

Visit this website. The menu displays correctly on desktop, but on iPads, the font appears larger leading to a line break. Is it because the selected font isn't loading and defaulting to Times New Roman instead? It seems likely since I experience the ...

htmlcssfonts

Sidenav Content with all elements having opacity applied

How can I ensure that all page elements have a black background color when the mobile navigation is opened on the left screen, while ensuring that my sidebar and content image do not get overlaid by the black background? Here is my code: function openNav( ...

javascripthtmlcsswordpress

Insects featuring a button and tooltip duo creating a captivating "pull-effect"

Why is the button pulling when I move the cursor over a camera? Is there a way to solve this issue? <div class="input-group-btn advanced-group"> <button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Send Imag ...

javascripthtmlcsstwitter-bootstrap

React Side Panels that Collapse and Expand

Apologies if this task seems simple, as I am new to transitioning to React. My current application is primarily built with JavaScript, CSS, and HTML, and I am now looking to migrate it to React. There is a full-length horizontal side panel that is initiall ...

javascripthtmlcssreactjs

Is it possible to record my Selenium activities in the example.metadata[:extra_failure_lines] log?

In RSpec 3.4.0, there is a feature called example.metadata[:extra_failure_lines] that generates additional information to be displayed on test failure. How can I include Selenium/Capybara actions in this output log? RSpec.configure do |c| c.before do |e ...

rubyloggingselenium-webdriverrspeccapybara

Error encountered in jQuery's addClass and removeClass functions: Unable to read the property 'length' of an undefined value

Upon loading my page, I aim to have some of the div elements hidden initially and display only one. Here is a script that accomplishes this goal: <script> $(document).ready(function () { $(".total").click(function () { $("#pi ...

javascriptjqueryhtmlcss

Navigating Web Element with Selenium WebDriver using Java

Need assistance in dealing with StaleElementReferanceException. Attempting to scroll a webelement with the action class. Here's the code snippet: public void newsSearch() throws StaleElementReferenceException{ driver.get("https://pi.persistent.c ...

javaselenium-webdrivertestng

How to adjust background size for Iphone4 and Iphone5 simulators using only HTML5 and CSS3 code

Creating an HTML5 app for iPhone4 and 5 with a texture-rich background. I'm facing an issue where the texture image gets scaled and only the central part is visible, even though the image size is 640x960 and 640x1136. I've tried adding @2x at the ...

iphonehtmlcssmedia-queries

How to Use ExpectedConditions in Selenium Webdriver with C# to Handle Nonexistent Elements

With the power of c# and selenium webdriver, I have mastered detecting the presence of an element using this code snippet: new WebDriverWait(driver, TimeSpan.FromSeconds(timeOut)).Until(ExpectedConditions.ElementExists((By.Id(login)))); But now I challen ...

c#seleniumselenium-webdriverwebdriver

Is Bootstrap CSS Carousel malfunctioning following a float adjustment?

Currently, I am trying to implement a carousel in bootstrap, but I am facing two significant issues. The alignment of the carousel is vertical instead of horizontal (my div elements are stacking downwards). When I apply the float: left property, the carou ...

htmlcssbootstrap-4

What is the best way to position a button at the bottom of an image?

I am facing an issue with the following code snippet: * { box-sizing: border-box; } .wrapper { position: relative; /* border:1px solid blue; */ width: 250px; } .text { position: absolute; border:1px solid red; bottom: 0px; ...

css

Adjusting canvas dimensions for angular chart.js: A quick guide

I am currently creating my first sample code using angular chart.js, but I am facing an issue with changing the custom height and width of my canvas. How can I adjust the height and width accordingly? CODE: CSS #myChart{ width:500px; he ...

javascripthtmlcssangularjscanvas

Animation using jQuery is functional on most browsers, however, it seems to

After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...

javascriptjqueryhtmlcsssafari

The Jquery slider panel seems to be stuck open even after I switched its CSS orientation from right to left

I am following up on a previous question, which can be found here. After fixing the jQuery code, I decided to change the panel slider to open from the left side instead of the right. I modified the class from "cd-panel from-right" to "cd-panel from-left". ...

javascriptjqueryhtmlcss

Utilizing PHP Code within Inline CSS in HTML guides

Is it possible to integrate PHP code into Inline CSS? Here is an example: Check out this code snippet: <div class="col-auto"> <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">%22</div> </div> <div ...

phphtmlcssbootstrap-4

What is the best way to center my image both vertically and horizontally?

Utilizing react.js to develop a template website has been my current project. The issue arose when I began constructing the first component of the site. The dilemma: The picture was not centered on the page, neither vertically nor horizontally. Despite ...

cssreactjs

The Enchanted URL Folder Name

Spent two painstaking hours dealing with this issue. It's incredibly frustrating. Struggling to load css files in PHP pages when the URL contains a folder named "adsq" Comparing two identical pages, only differing in the folder name: One works perf ...

phpcssdirectory

What is the correct way to utilize href in CSS content property?

Below is the content of a box I have: When the above box is hovered over, it flips to this: This block's HTML code is as follows: <div class='tiles'> <div class='col'> <a href=""></a> <a href ...

javascriptjqueryhtmlcsshref

I need assistance from someone knowledgeable in HTML and CSS. I am trying to create a div that dynamically increases its width until it reaches a specific

Seeking assistance to create a dynamic div that continuously expands its width until it reaches a maximum of 540px. It should start at 75px. Below is the HTML and CSS code I've attempted: .Loading-Screen { background-color: black; color: alicebl ...

javascripthtmlcss