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?
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']").
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();
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.
First, inspect, then select an element, and then click Ctrl-F. The search bar will open below the elements section.
