How can I find the XPATH or the CSS locator of any element on an HTML web page

Question

I am trying to find the locator of an element in a screen using chrome. I am using Inspect elements but I don't know how to extract the locator for my automated UI testing. How can I do that. Here is an example of the element I am trying to locate

I am trying to locate the Login button. I do not need to locate the login button I need to know about a strategy to locate anything I want. How can I extract any locator I want?

Refer this - https://www.browserstack.com/guide/chrome-extensions-to-find-xpath-in-selenium — Shawn, Jun 13 '23 at 08:42

score 1 · Answer 1 · answered Jun 13 '23 at 00:23

1

To click on the element Log in you can use the following locator strategy:

Using xpath:

driver.get("https://tinder.com/");
driver.findElement(By.xpath("//a//div[text()='Log in']")).click();

answered Jun 13 '23 at 00:23

undetected Selenium

183,867
41
278
352

I do not need to locate the login button I need to know about a strategy to locate anything I want. How can I extract any locator I want? – Mouna Camelia Hammoudi Jun 13 '23 at 00:25
I do not need to locate the login button I need to know about a strategy to locate anything I want. How can I extract any locator I want? I would like a way to extract it automatically from the web inspector elements. – Mouna Camelia Hammoudi Jun 13 '23 at 00:26
That's indeed a huge question and I'm afraid the answer won't fit into this answer space. – undetected Selenium Jun 13 '23 at 00:28
Just add a new answer giving a strategy. Everyone needs an automated way to detect any element on a web page – Mouna Camelia Hammoudi Jun 13 '23 at 00:29

score 1 · Accepted Answer · answered Jun 13 '23 at 06:05

To extract a locator for an element in Chrome's Inspect Elements, you can follow these steps:

Right click on the element you want to locate (in this case, the Login button) and select "Inspect" from the context menu. This will open the Chrome DevTools panel and highlight the corresponding HTML code.
In the DevTools panel, locate the highlighted HTML code that represents the Login button. It might be a button, input, or any other relevant HTML tag.
Look for unique attributes of the element that can be used as locators. Commonly used attributes include id, class, name, data-* attributes etc.

Reference :

    Using id attribute: If the element has a unique id attribute, you can use it as a locator. For example: By.id("loginButton").

    Using class attribute: If the element has a unique class, you can use it as a locator. For example: By.className("login-button").

    Using other attributes: If there are no unique id or class attributes, you can use other attributes like name, data-*, or cssSelector. For example: By.cssSelector("button[data-testid='loginButton']").

score 0 · Answer 3 · answered Jun 16 '23 at 07:36

You right click on the element you want to locate and you choose the option "Inspect", this will open the developer tools and the given line of the HTML code will be highlighted. Right click on the line and choose the option copy XPATH or CSS locator depending on the type of locator that you want to obtain.

How can I find the XPATH or the CSS locator of any element on an HTML web page

3 Answers3