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

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']").