Element dimensions and location in Selenium Java - Build an Automation Script

Verify element dimensions and location on the login page

Preconditions (2)

Step 1: Open the login page URL in the browser

Step 2: Locate the username input field by its id 'username'

Step 3: Locate the password input field by its id 'password'

Step 4: Locate the login button by its id 'loginBtn'

Step 5: Get the width and height of the username input field

Step 6: Get the x and y coordinates of the login button

Step 7: Verify the username input field width is 250 pixels

Step 8: Verify the username input field height is 40 pixels

Step 9: Verify the login button x coordinate is greater than 100

Step 10: Verify the login button y coordinate is greater than 200

✅ Expected Result: The username input field has width 250px and height 40px. The login button is positioned with x > 100 and y > 200.

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Assert username input width equals 250

Assert username input height equals 40

Assert login button x coordinate > 100

Assert login button y coordinate > 200

Best Practices:

Use By.id locator strategy for stable element selection

Use explicit waits to ensure elements are visible before interaction

Use WebDriver's getSize() and getLocation() methods for dimensions and position

Use JUnit or TestNG assertions for validation

Automated Solution

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.Point;
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.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.*;
import java.time.Duration;

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

    @BeforeEach
    public void setUp() {
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    }

    @Test
    public void testElementDimensionsAndLocation() {
        driver.get("https://example.com/login");

        // Wait for username input to be visible
        WebElement usernameInput = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("username")));
        WebElement passwordInput = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("password")));
        WebElement loginButton = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("loginBtn")));

        // Get dimensions of username input
        Dimension usernameSize = usernameInput.getSize();
        int width = usernameSize.getWidth();
        int height = usernameSize.getHeight();

        // Get location of login button
        Point loginLocation = loginButton.getLocation();
        int x = loginLocation.getX();
        int y = loginLocation.getY();

        // Assertions
        assertEquals(250, width, "Username input width should be 250 pixels");
        assertEquals(40, height, "Username input height should be 40 pixels");
        assertTrue(x > 100, "Login button x coordinate should be greater than 100");
        assertTrue(y > 200, "Login button y coordinate should be greater than 200");
    }

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

This test opens the login page URL using ChromeDriver.

It waits explicitly for the username input, password input, and login button to be visible to avoid timing issues.

Then it gets the size (width and height) of the username input field using getSize() and the location (x and y coordinates) of the login button using getLocation().

Assertions check that the username input width is exactly 250 pixels and height is 40 pixels, matching the expected design.

It also asserts that the login button's x coordinate is greater than 100 and y coordinate is greater than 200, ensuring it is positioned correctly on the page.

The test uses JUnit 5 assertions for clear pass/fail results.

Finally, the @AfterEach method closes the browser to clean up.

Common Mistakes - 4 Pitfalls

Using Thread.sleep() instead of explicit waits

Using XPath with absolute paths for locating elements

Not checking element visibility before getting size or location

Hardcoding dimension values without verifying actual UI design

Bonus Challenge

Now add data-driven testing with 3 different login page URLs to verify element dimensions and location on each.

Show Hint