XPath with attributes in Selenium Java - Build an Automation Script

Verify login button is clickable using XPath with attributes

Preconditions (1)

Step 1: Locate the login button using XPath with attribute 'id' equal to 'loginBtn'

Step 2: Click the login button

Step 3: Verify that the URL changes to 'https://example.com/dashboard'

✅ Expected Result: After clicking the login button located by XPath with attribute, the user is redirected to the dashboard page with URL 'https://example.com/dashboard'

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Verify the login button is found using XPath with attribute

Verify the login button is clickable

Verify the URL after clicking the button is 'https://example.com/dashboard'

Best Practices:

Use explicit waits to wait for the login button to be clickable

Use By.xpath locator with attribute syntax

Use assertions from TestNG or JUnit for validation

Close the browser after test execution

Automated Solution

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;
import java.time.Duration;

public class LoginButtonXPathTest {
    private WebDriver driver;
    private WebDriverWait wait;

    @BeforeClass
    public void setUp() {
        // Set path to chromedriver if needed
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
        driver.manage().window().maximize();
        driver.get("https://example.com/login");
    }

    @Test
    public void testLoginButtonClickableUsingXPathAttribute() {
        // Locate login button using XPath with attribute id='loginBtn'
        By loginButtonLocator = By.xpath("//button[@id='loginBtn']");

        // Wait until the login button is clickable
        WebElement loginButton = wait.until(ExpectedConditions.elementToBeClickable(loginButtonLocator));

        // Assert the button is displayed
        Assert.assertTrue(loginButton.isDisplayed(), "Login button should be visible");

        // Click the login button
        loginButton.click();

        // Wait for URL to change to dashboard
        wait.until(ExpectedConditions.urlToBe("https://example.com/dashboard"));

        // Assert the URL is correct
        String currentUrl = driver.getCurrentUrl();
        Assert.assertEquals(currentUrl, "https://example.com/dashboard", "URL should be dashboard after login");
    }

    @AfterClass
    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
}

This test uses Selenium WebDriver with Java and TestNG framework.

In setUp(), we open the Chrome browser and navigate to the login page.

In the test method, we locate the login button using XPath with an attribute id='loginBtn'. This is done with By.xpath("//button[@id='loginBtn']").

We use an explicit wait to wait until the button is clickable to avoid timing issues.

We assert the button is visible, then click it.

After clicking, we wait until the URL changes to the dashboard URL and assert it matches the expected URL.

Finally, in tearDown(), we close the browser to clean up.

This structure ensures the test is stable, readable, and follows best practices.

Common Mistakes - 4 Pitfalls

Using Thread.sleep() instead of explicit waits

{'mistake': "Using incorrect XPath syntax like //button[id='loginBtn']", 'why_bad': "This XPath is invalid because attribute selectors require '@' before the attribute name.", 'correct_approach': "Use correct XPath syntax: //button[@id='loginBtn']"}

Not verifying the element is visible before clicking

Hardcoding URLs without waiting for navigation

Bonus Challenge

Now add data-driven testing with 3 different login button IDs to verify the button is clickable for each.

Show Hint

Practice

1. What does the XPath expression //input[@type='submit'] select in a web page?

easy

A. All <input> elements with attribute type equal to 'submit'

B. All elements with tag name 'submit'

C. All elements with attribute 'input' equal to 'submit'

D. All <submit> elements inside <input> tags

Solution

1. Step 1: Understand XPath tag and attribute syntax

   The expression uses //input to select all <input> tags anywhere in the document.

2. Step 2: Analyze the attribute filter

   The filter [@type='submit'] selects only those <input> elements whose 'type' attribute exactly equals 'submit'.

3. Final Answer:

   All <input> elements with attribute type equal to 'submit' -> Option A

4. Quick Check:

   XPath //tag[@attr='value'] selects elements with that attribute value [OK]

Hint: Look for tag name then attribute filter in square brackets [OK]

Common Mistakes:

• Confusing tag name with attribute name
• Using wrong attribute syntax like @type=submit without quotes
• Thinking it selects elements named 'submit'

2. Which of the following is the correct XPath syntax to select a button element with id 'loginBtn'?

easy

A. //button[id='loginBtn']

B. //button[#id='loginBtn']

C. //button[id()='loginBtn']

D. //button[@id='loginBtn']

Solution

1. Step 1: Recall correct attribute syntax in XPath

   Attributes are selected using @attributeName='value' inside square brackets.

2. Step 2: Check each option

   //button[@id='loginBtn'] uses @id='loginBtn' correctly. Options A, B, and D use invalid syntax for attributes.

3. Final Answer:

   //button[@id='loginBtn'] -> Option D

4. Quick Check:

   Attributes need '@' before name in XPath [OK]

Hint: Always prefix attribute names with '@' in XPath [OK]

Common Mistakes:

• Omitting '@' before attribute name
• Using parentheses or '#' incorrectly
• Confusing XPath with CSS selector syntax

3. Given the HTML snippet:

<input type='checkbox' name='subscribe' checked>

What will the XPath //input[@checked] select?

medium

A. All <input> elements with attribute 'checked' present

B. All <input> elements with attribute 'checked' equal to 'true'

C. All <input> elements with attribute 'checked' equal to 'checked'

D. No elements, because 'checked' has no value

Solution

1. Step 1: Understand attribute presence in XPath

   The XPath //input[@checked] selects all <input> elements that have the 'checked' attribute, regardless of its value.

2. Step 2: Analyze the HTML snippet

   The <input> element has the 'checked' attribute present (without a value), so it matches the XPath.

3. Final Answer:

   All <input> elements with attribute 'checked' present -> Option A

4. Quick Check:

   XPath [@attr] checks attribute presence, not value [OK]

Hint: [@attr] means attribute exists, value not needed [OK]

Common Mistakes:

• Assuming attribute must have a value
• Confusing attribute presence with value equality
• Thinking empty attributes are ignored

4. You wrote the XPath //div[@class='container'] but it does not find the element. The element's class attribute is "container main". What is the issue?

medium

A. XPath cannot select elements by class attribute

B. XPath looks for exact match; 'container main' ≠ 'container'

C. The attribute name should be 'className' not 'class'

D. XPath requires double quotes inside single quotes

Solution

1. Step 1: Understand attribute matching in XPath

   Using @class='container' matches only if the class attribute is exactly 'container'.

2. Step 2: Analyze the actual class attribute

   The element's class is 'container main', which is not an exact match, so XPath does not select it.

3. Final Answer:

   XPath looks for exact match; 'container main' ≠ 'container' -> Option B

4. Quick Check:

   Attribute equality in XPath is exact, no partial match [OK]

Hint: Exact match fails if attribute has multiple values separated by spaces [OK]

Common Mistakes:

• Assuming XPath matches partial attribute values
• Using wrong attribute name like 'className'
• Thinking quotes style causes failure

5. You want to select all <input> elements that have a type attribute equal to 'text' or 'password' using XPath. Which expression is correct?

hard

A. //input[@type='text','password']

B. //input[@type='text' and @type='password']

C. //input[@type='text' or @type='password']

D. //input[@type=('text','password')]

Solution

1. Step 1: Understand logical operators in XPath

   To select elements matching either condition, use or between attribute tests.

2. Step 2: Analyze each option

   //input[@type='text' or @type='password'] correctly uses or to select inputs with type 'text' or 'password'. //input[@type='text' and @type='password'] uses and which is impossible for one attribute to have two values simultaneously. Options C and D use invalid syntax.

3. Final Answer:

   //input[@type='text' or @type='password'] -> Option C

4. Quick Check:

   Use 'or' to combine attribute conditions in XPath [OK]

Hint: Use 'or' to select elements matching either attribute value [OK]

Common Mistakes:

• Using 'and' instead of 'or' for multiple attribute values
• Trying to list values inside one attribute test
• Incorrect syntax with parentheses or commas