How to find XPath in Chrome?

# Open Chrome and navigate to the target webpage, e.g., https://sandbox.oxylabs.io/products
# Right-click on the element you want to inspect and select "Inspect".

# Method 1: Use Chrome DevTools
# In the Elements tab, right-click the highlighted code.
# Choose "Copy" > "Copy XPath".
# This copies the absolute XPath to your clipboard

# Method 2: Use Chrome Extensions
# Install an extension like 'XPath Helper' or 'ChroPath'.
# Activate the extension and hover over the desired element.
# The extension will display the XPath, which you can copy.

# Method 3: Manually Construct XPath
# Examine the HTML structure in DevTools.
# Construct a relative XPath based on attributes like id, class, etc.
# Example: "//div[@class='product-list']/div[contains(@class, 'item')]" for items in a product list.

# Always verify the XPath by using it in the console with $x('your-xpath-here').
# Check if it selects the correct element(s).

# Incorrect: Overly specific absolute XPath
"/html/body/div[1]/section/div[2]/div/table/tr[1]/td[2]"

# Correct: More flexible relative XPath
"//section//table//tr[1]//td[2]"

# Incorrect: Absolute XPath that breaks easily if structure changes
"/html/body/div[1]/div[3]/div/button"

# Correct: Relative XPath using class that is less likely to change
"//button[@class='submit-button']"

# Incorrect: Exact matching which fails if additional text or spaces are added
"//a[text()='Click Here']"

# Correct: Using contains() to allow partial matches
"//a[contains(text(), 'Click Here')]"

# Incorrect: XPath not updated, no longer selects correct element
"//div[@class='old-class-name']"

# Correct: Regularly reviewed and updated XPath
"//div[@class='new-updated-class-name']"