Element dimensions and location in Selenium Java

Introduction

Knowing where an element is on the page and its size helps us check if it looks right and works well.

To verify a button is visible and clickable on the screen.

To check if an image is displayed at the correct size.

To confirm a popup appears in the expected position.

To test responsive design by comparing element sizes on different devices.

To debug layout issues by checking element coordinates.

Syntax

Selenium Java

WebElement element = driver.findElement(By.id("elementId"));

// Get element location
Point location = element.getLocation();
int x = location.getX();
int y = location.getY();

// Get element size
Dimension size = element.getSize();
int width = size.getWidth();
int height = size.getHeight();

getLocation() returns the top-left corner position of the element.

getSize() returns the width and height of the element.

Examples

Prints the X and Y coordinates of the element on the page.

Selenium Java

Point location = element.getLocation();
System.out.println("X: " + location.getX() + ", Y: " + location.getY());

Prints the width and height of the element.

Selenium Java

Dimension size = element.getSize();
System.out.println("Width: " + size.getWidth() + ", Height: " + size.getHeight());

Checks if the element is wider than 100 pixels and prints a message.

Selenium Java

if (element.getSize().getWidth() > 100) {
    System.out.println("Element is wide enough.");
}

Sample Program

This test opens a webpage, finds an element by its ID, prints its position and size, and checks if the element has a valid size.

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;

public class ElementDimensionsLocationTest {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("https://example.com");
            WebElement element = driver.findElement(By.id("exampleElement"));

            Point location = element.getLocation();
            Dimension size = element.getSize();

            System.out.println("Element location: X=" + location.getX() + ", Y=" + location.getY());
            System.out.println("Element size: Width=" + size.getWidth() + ", Height=" + size.getHeight());

            // Simple assertion
            if (size.getWidth() > 0 && size.getHeight() > 0) {
                System.out.println("Test Passed: Element has valid size.");
            } else {
                System.out.println("Test Failed: Element size is invalid.");
            }
        } finally {
            driver.quit();
        }
    }
}

Important Notes

Coordinates (X, Y) start from the top-left corner of the page.

Element size can be zero if the element is hidden or not rendered.

Always close the browser with driver.quit() to free resources.

Summary

Use getLocation() to find where an element is on the page.

Use getSize() to get the width and height of an element.

Checking element size and location helps verify page layout and visibility.

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