How to write XPath based on elements in Chrome Dev Tools?

How to write XPath based on elements in Chrome Dev Tools?

how to write xpath in chrome browser
how to find xpath in chrome for selenium webdriver
chrome console find element by class
chrome console css selector
chrome console click element by xpath
chrome console find element by id
how to verify css selector in chrome
developer tool xpath

I am trying to get XPaths for underlined values in the image below. I have a list of cards which is always different, and I need to grab values from the inside of the highlighted card which has 'highlight' in its class.

When I grab the XPath through inspecting an element in Chrome, I get something like this //*[@id="rental-asset"]/div/div[1]/div/rdo-nav-card-asset[11]/div/div[1]/div/i which doesn't work for me since that 11 in brackets is always going to be a different value. How can I create an XPath for these elements based on their unique class?


Here is how to get the first underlined thing. I think you should be able to take it from here.

//rdo-nav-card-asset/div[contains(@class,'panel') and contains(@class,'highlight')]/div[contains(@class,'panel-heading')]/div[contains(@class,'panel-title')]

Evaluate and validate XPath/CSS selectors in Chrome Developer , From Console panel. Press F12 to open up Chrome DevTools. Switch to Console panel. Type in XPath like $x(".//header") to evaluate and validate. Type in CSS selectors like $$("header") to evaluate and validate. Check results returned from console execution. If elements are matched, they will be returned in a list. Google Chrome provides a built-in debugging tool called " Chrome DevTools " out of the box, which includes a handy feature that can evaluate or validate XPath/CSS selectors without any third party extensions. This can be done by two approaches: Use the search function inside Elements panel to evaluate XPath/CSS selectors and highlight matching


You can Split the xpath and iterate in the range they are expected to occur.

Suppose they have that value from 1-22 you can something like this. This is a python code.

str1 = '//*[@id="rental-asset"]/div/div[1]/div/rdo-nav-card-asset['
str2 = ']/div/div[1]/div/i'
for i in range(1, 22):
    str3 = str1 + str(i) + str2
    a = driver.find_element_by_xpath(str3).text
    print a

You can grab the other elements or data inside the loop.

Comment below if you have any confusion.

XPath locators with chrome devtools, XPath is one of the choices for locators with Selenium but writing You should not be in Chrome dev tools and the html element should be  Press F12 to open up Chrome DevTools. Elements panel should be opened by default. Click on some element. Press Ctrl + F to enable DOM searching in the panel. Type in XPath or CSS selectors. If system finds something, result will be highlighted in DOM.


You can firstly find the highlight card and use it as the search context of those underline texts.

Code as following:

var activeCard = driver.findElement(By.css('rdo-nav-card-asset > div.rdo-card-highlight'));

// the text of 1rd underline
var title = activeCard.findElement(By.css('.panel-title')).getText();

// the text of 2rd underline
var title = activeCard.findElement(By.xpath('.//div[@class='rdo-card-metric'][1]'))
           .getText();

// the text of 3rd underline
var title = activeCard.findElement(By.css('.text-danger')).getText();

// the text of 4rd underline
var title = activeCard.findElement(By.xpath('.//div[@class='rdo-card-metric'][3]'))
           .getText();

Finding Xpath and CSS in Chrome Developer Tools, Chrome Developer Tools Google Chrome provides a built-in inside Elements panel to Duration: 4:27 Posted: Jan 5, 2018 The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. We can use this DevTools to validate XPath and CSS selectors which requires no third party extensions as we have Firebug, Firepath in Firefox and Xpath Selector in Chrome.


How to Inspect Elements with Chrome Developer Tools?, How to use Find tool in Chrome developer to locate WebElements in Selenium? How to inspect element with xpath? But mastering this art using the Developer Tools provided the browser will make you more conformable Elements in the DOM are highlighted based on the location of the mouse pointer. Chrome Developer Tools Google Chrome provides a built-in debugging tool called 'Chrome DevTools' out of the box, which includes a handy feature that can eval


Console Utilities API Reference, Technical Writer, Chrome DevTools & Lighthouse The following example returns a reference to the first <img> element in the document: $x(path) returns an array of DOM elements that match the given XPath expression. Option 1: Press “F12” key. Option 2: keyboard shortcut “Ctrl + Shift + I”. Option 3: Click on the 3 dots on the top right corner of the Chrome > More Tools > Developer Tools. Option 4: Right click on the Web page and click inspect.


Inspecting Elements for writing XPath, CSS Selector in Chrome, I blogged similar before with a more developer-centric way of doing the validation query in console following javascript-based DOM access. From Elements panel. Press F12 to open up Chrome DevTools. Elements panel should be opened by default. Press Ctrl + F to enable DOM searching in the panel. Type in XPath or CSS selectors to evaluate. If there are matched elements, they will be highlighted in DOM.