Identifying elements using xpath - Streamlined Xpath Techniques

I successfully found the element using the xpath copied directly from the code. Can someone assist me in creating a simpler xpath for the following code snippet, which is fully functional!

WebElement oCheckbox = myDriver.findElement(By.xpath(".//*[@id='app']/div[1]/div[2]/div/div/div[2]/div/div[1]/div/div/div[2]/div[2]/table/tbody/tr[1]/td[1]/div/label/div/i"));
WebElement oCheckbox1 = myDriver.findElement(By.xpath(".//*[@id='app']/div[1]/div[2]/div/div/div[2]/div/div[1]/div/div/div[2]/div[2]/table/tbody/tr[2]/td[1]/div/label/div/i"));
oCheckbox.click();
oCheckbox1.click();

HTML:

<head>
<body class="">
<div id="app">
<section class="bottom-padding cf top-padding white-bg">
<div class="container">
<div class="row">
<div class="row">
<div class="col">
<div class="row">
<div class="col-lg-3 push-lg-9 padding-l-r-30 padding-bottom">
<div class="col-lg-9 pull-lg-3 padding-l-r-15">
<div class="row dropshadow">
<div class="col-lg-5 padding-none">
<div class="left-round fixed-height gray-bg">
<div>
<div class="section-title">
<div class="floatThead-wrapper" style="position: relative; clear: both;">
<div class="floatThead-container" style="overflow: hidden; padding-left: 0px; padding-right: 0px; position: absolute; margin-top: 0px; top: 0px; z-index: 1001; will-change: transform; transform: translateX(0px) translateY(0px); left: 0px; width: 410.867px;" aria-hidden="true">
<div class="table-wrapper">
<table class="table protocol-table" style="table-layout: fixed; min-width: 410.867px;">
<colgroup>
<thead>
<tbody>
<tr>
<td>
<div>
<input id="select-pcsl-9777-protocol" type="checkbox"/>
<label for="select-pcsl-9777-protocol">
<div>
<i class="fa fa-check" aria-hidden="true"/>
</div>
<span class="sr-only">Select</span>
</label>
javahtmlcssxpathselenium-webdriver

Answer №1

Give this a shot:

myDriver.clickElementById("choose-nw-9777-option")

Answer №2

It's unclear why @peter's solution isn't working, but an alternative approach is to utilize the JavascriptExecutor

WebElement element= driver.findElement(By.id("select-pcsl-9777-protocol"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", element);

An alternate method is to use xpath

WebElement element= driver.findElement(By.xpath("//input[@id='select-pcsl-9777-protocol']"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", element);

Answer №3

Both of the xpath options you mentioned are functional, but they utilize absolute paths:

WebElement oCheckbox = myDriver.findElement(By.xpath(".//*[@id='app']/div[1]/div[2]/div/div/div[2]/div/div[1]/div/div/div[2]/div[2]/table/tbody/tr[1]/td[1]/div/label/div/i"));
WebElement oCheckbox1 = myDriver.findElement(By.xpath(".//*[@id='app']/div[1]/div[2]/div/div/div[2]/div/div[1]/div/div/div[2]/div[2]/table/tbody/tr[2]/td[1]/div/label/div/i"));

Here is a more simplified and logical version of the xpath for the same task:

WebElement oCheckbox = myDriver.findElement(By.xpath("//i[@class='fa fa-check']"));

If you want to target the Select element specifically, you can be more precise with your xpath:

WebElement oCheckbox1 = myDriver.findElement(By.xpath("//i[@class='fa fa-check']/span[@class='sr-only']"));

Although there may be concerns about the aria-hidden="true" attribute, one foolproof option could be:

WebElement oCheckbox2 = myDriver.findElement(By.xpath("//input[@id='select-pcsl-9777-protocol']//following::span[1]))"));

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

What could be causing my grid-area properties to not take effect?

I'm attempting to create a basic structure with a header in the top row, menu and content in the middle row, and footer at the bottom. Here is what I have so far: body { color: white; } .container { background: cyan; display: grid; ...

csscss-grid

What is the reason for the return of undefined with getElementsByClassName() in puppeteer?

Currently, I am utilizing puppeteer to fetch certain elements from a webpage, specifically class items (divs). Although I understand that getElementsByClassName returns a list that needs to be looped through, the function always returns undefined for me, e ...

javascripthtmlnode.jstypescriptpuppeteer

Submenu animation that "bursts onto the scene"

I'm facing an issue with my menu that has sub-items inside it. To achieve the animation effect I desire, I need to extract the width, height, and first-child's height of the sub-menu. While my animation is working most times, there are instances ...

javascriptjqueryhtmlcssanimation

CSS Switchable Style Feature

I am in need of some assistance with the navigation on my website. You can find the current code at this link: http://jsfiddle.net/Sharon_J/cf2bm0vs/ Currently, when you click on the 'Plus' sign, the submenus under that category are displayed bu ...

javascriptjqueryhtmlcss

What methods can I use to ensure my HTML/CSS code is compatible with all browsers? It functions properly on Chrome but encounters issues on Safari, Edge, and other

My hosting for the website is with bluehost, and interestingly when viewed on Chrome, everything appears perfect. However, upon switching to Safari, I noticed that the background of the about me section is not black as intended, and the footer seems to be ...

htmlcss

Printing a React component using a button causes formatting related to className to be lost, while printing it inline preserves the formatting

I've hit a roadblock in trying to figure out the React and printing issue for the past week and a half, and it feels like I'm going in circles. Despite finding some helpful solutions on Stack Overflow, none of them seem to work completely for me ...

javascriptcssreactjsprinting

Guide to utilizing Selenium to extract frames

Using Selenium, I fetched the content of this page ... <frameset rows="0,0,*" frameborder="no" border="0"> <frame name="applet_container" scrolling="no" marginwidth="0" marginheight="0" noresize src=""> <frame name="javascript_conta ...

javaselenium

What is the method for choosing an Object that includes an Array within its constructor?

Is there a way to retrieve a specific argument in an Object constructor that is an Array and select an index within the array for a calculation (totaling all items for that customer). I have been attempting to access the price value in the Items Object an ...

javascripthtml

I am looking to incorporate a 10 px border at the top of my column by utilizing bootstrap4

How can I add a border to the top of my column using Bootstrap 4? I've been struggling with it and can't seem to get it right. Here is the code I'm currently using, which includes <div> tags for the columns: <!doctype html> &l ...

htmlcssbootstrap-4

bridging information from tables with text fields in forms

I am working on an HTML/CSS page that utilizes a table layout filled with buttons to mimic a T9 keypad design. Within the page, I have a form containing two text fields. My aim is to populate these text fields with numbers based on the values from the tab ...

javascripthtml

Guide on updating a MongoDB document upon clicking a button on an HTML page

I'm new to backend development and I've been working on creating a CRUD notes application without using React or EJS. My current issue is that I am unable to edit documents. The desired functionality is for the user to be directed to a page wher ...

javascripthtmlnode.jsexpressmongoose

When the Chrome Dev Tools are activated, the responsive website malfunctions

As I work on designing a responsive website, I've encountered an issue with media queries. When I set the breakpoint to min-width: 320px in Chrome dev tools, all of my CSS styles disappear. The same problem occurs when I zoom the window size to 150%, ...

css

Is there a problem with addEventListener returning false?

What does keeping the third parameter as false in the line below signify? var el = document.getElementById("outside"); el.addEventListener("click", modifyText, false); ...

javascriptjqueryhtml

Tips for centering elements in an image caption

I need some help with separating an image and text within an image caption from each other. Currently, they are overlapping and I want them to be distinct. I attempted using inner div elements for the text and image separately, but it caused issues by brea ...

htmlimagecss

Can you explain the concept of fallback color in CSS?

Can you explain to me what a fallback color means? I searched online and found out that it is used to display a color when the specified format is not supported by browsers, like Internet Explorer. Is there anything else I should know about fallback colors ...

cssangularjshtml

Bootstrap CDN causing modals to fail to appear

Here are the stylesheets I am currently using: script(src="/js/application.js") script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js") script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js") link(rel="styl ...

htmlcssbootstrap-modal

Having Trouble with Sending Keys in Selenium using Python?

I've been trying to input keys into an element, but it's not working as expected. The element appears like this. I am unable to input keys into all three fields. This is the code snippet: input id="creditCardNumber" name="creditCardNumber" t ...

pythonseleniumselenium-webdriversendkeys

Extract the title of a YouTube video and convert it into a string using JSONObject

I'm struggling to figure out how to extract a JSONObject from a method and convert it into a String in order to retrieve the titles of YouTube videos. public static String getTitleQuietly(String youtubeUrl) { try { if (youtubeUrl != null) ...

javajsonyoutube

When using Ruby and Rack on Heroku to serve a static site, the CSS styling may not be

Trying to deploy a static site consisting of HTML, CSS, font, and image files with Ruby Rack has been a bit challenging. While the HTML displays perfectly in Chrome when running it locally, the CSS assets do not seem to be loading or being applied to the H ...

htmlcssruby-on-railsrubyheroku

Issue with Navigation Scrolling Feature on Wordpress

I am in the process of implementing a 'scroll-nav' for my website. To achieve this, I decided to separate the Navigation into two sections and incorporate some jQuery: <nav class="main-nav clearfix"> <?php wp_nav_menu(array('th ...

javascriptjqueryhtmlwordpress