How can we inspect web element attributes to use in different locators?

Right-click the element on the page → click "Inspect" → The Elements panel shows full HTML with all attributes. Look for: id, name, class, type, placeholder attributes. Right-click the HTML node → Copy → "Copy XPath" or "Copy selector".

2. ChroPath Plugin (Chrome/Firefox) Browser extension that auto-generates XPath and CSS Selectors. Shows relative XPath, absolute XPath, and CSS Selector for any element. Best tool for beginners.

3. Selenium IDE Chrome/Firefox extension that records interactions and auto-generates locators.

What attributes to look for:

<input id="username" name="user" class="form-input"
       type="text" placeholder="Enter username">

From the above HTML:

• ✓id="username" → By.id("username")
• ✓name="user" → By.name("user")
• ✓class="form-input" → By.cssSelector(".form-input")
• ✓placeholder="Enter username" → By.xpath("//input[@placeholder=''Enter username'']")