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

Practice

1. Which Selenium WebDriver method is used to get the position of a web element on the page?

easy

A. getAttribute()

B. getSize()

C. getText()

D. getLocation()

Solution

1. Step 1: Understand the purpose of getLocation()

   This method returns the coordinates (x, y) of the element on the page.

2. Step 2: Compare with other methods

   getSize() returns width and height, getText() returns visible text, and getAttribute() returns attribute values.

3. Final Answer:

   getLocation() -> Option D

4. Quick Check:

   Position = getLocation() [OK]

Hint: Position = getLocation(), size = getSize() [OK]

Common Mistakes:

• Confusing getLocation() with getSize()
• Using getText() to find position
• Expecting getAttribute() to return coordinates

2. Which of the following is the correct Java syntax to get the width of a WebElement named element?

easy

A. int width = element.getLocation().getX();

B. int width = element.getSize().getHeight();

C. int width = element.getSize().getWidth();

D. int width = element.getLocation().getY();

Solution

1. Step 1: Identify method to get size

   getSize() returns a Dimension object with width and height.

2. Step 2: Get width from Dimension

   Use getWidth() on the Dimension object to get the width.

3. Final Answer:

   int width = element.getSize().getWidth(); -> Option C

4. Quick Check:

   Width = getSize().getWidth() [OK]

Hint: Width is from getSize().getWidth(), not getLocation() [OK]

Common Mistakes:

• Using getLocation() to get width
• Mixing width and height methods
• Calling getHeight() when width is needed

3. Given the following code snippet, what will be printed if the element's location is (50, 100) and size is width=200, height=150?

Point location = element.getLocation();
Dimension size = element.getSize();
System.out.println("X: " + location.getX() + ", Y: " + location.getY());
System.out.println("Width: " + size.getWidth() + ", Height: " + size.getHeight());

medium

A. X: 50, Y: 100
Width: 200, Height: 150

B. X: 100, Y: 50
Width: 150, Height: 200

C. X: 0, Y: 0
Width: 200, Height: 150

D. X: 50, Y: 100
Width: 150, Height: 200

Solution

1. Step 1: Understand getLocation() output

   It returns a Point with x=50 and y=100 as given.

2. Step 2: Understand getSize() output

   It returns Dimension with width=200 and height=150 as given.

3. Final Answer:

   X: 50, Y: 100 Width: 200, Height: 150 -> Option A

4. Quick Check:

   Location and size match output [OK]

Hint: Print location x,y then size width,height directly [OK]

Common Mistakes:

• Swapping x and y values
• Swapping width and height values
• Assuming default (0,0) location

4. Identify the error in the following code snippet that tries to get the height of a WebElement named element:

int height = element.getLocation().getHeight();

medium

A. getLocation() does not have getHeight() method

B. getHeight() should be getWidth()

C. element should be cast to Dimension first

D. No error, code is correct

Solution

1. Step 1: Check getLocation() return type

   It returns a Point object which has getX() and getY(), but no getHeight().

2. Step 2: Correct method to get height

   Height is obtained from element.getSize().getHeight(), not from getLocation().

3. Final Answer:

   getLocation() does not have getHeight() method -> Option A

4. Quick Check:

   Height = getSize().getHeight() [OK]

Hint: Height comes from getSize(), not getLocation() [OK]

Common Mistakes:

• Calling getHeight() on Point object
• Confusing getWidth() and getHeight()
• Assuming getLocation() returns size info

5. You want to verify that a button is fully visible on the page by checking its location and size. The viewport width is 1024 and height is 768. Which condition correctly checks that the button is fully inside the viewport using Selenium Java methods on button element?

hard

A. button.getLocation().getX() < 0 || button.getLocation().getY() < 0

B. button.getLocation().getX() >= 0 && button.getLocation().getY() >= 0 && button.getLocation().getX() + button.getSize().getWidth() <= 1024 && button.getLocation().getY() + button.getSize().getHeight() <= 768

C. button.getSize().getWidth() > 1024 && button.getSize().getHeight() > 768

D. button.getSize().getWidth() == 0 || button.getSize().getHeight() == 0

Solution

1. Step 1: Check button's top-left corner inside viewport

   Ensure X and Y coordinates are >= 0.

2. Step 2: Check button's bottom-right corner inside viewport

   Sum of X + width must be <= viewport width (1024), and Y + height <= viewport height (768).

3. Final Answer:

   button.getLocation().getX() >= 0 && button.getLocation().getY() >= 0 && button.getLocation().getX() + button.getSize().getWidth() <= 1024 && button.getLocation().getY() + button.getSize().getHeight() <= 768 -> Option B

4. Quick Check:

   Check corners inside viewport using location + size [OK]

Hint: Check top-left ≥0 and bottom-right ≤ viewport size [OK]

Common Mistakes:

• Checking only size without location
• Using OR instead of AND in conditions
• Ignoring viewport boundaries