Unit Recap: Inspecting WebElements

Master the art of querying element state, content, and styling without modifying them.

What You Learned

In this unit, you learned how to inspect WebElements to gather information about their state, content, and styling. Unlike interaction commands (click, sendKeys, etc.), inspection methods are read-only — they query the element without changing it.

The 7 Core Inspection Methods

1. isDisplayed()

Purpose: Check if an element is visible to the user

element.isDisplayed()

Returns true if visible, false if hidden by CSS

2. isEnabled()

Purpose: Check if an element is interactive

button.isEnabled()

Returns false if element has disabled attribute

3. isSelected()

Purpose: Check if checkbox/radio is selected

checkbox.isSelected()

Only for checkboxes, radios, and <option> elements

4. getTagName()

Purpose: Get the HTML tag type

element.getTagName()

Returns lowercase tag name: "button", "a", "div"

5. getRect()

Purpose: Get position and dimensions

element.getRect()

Returns Rectangle with x, y, width, height

6. getText()

Purpose: Get visible text content

element.getText()

For <input>, use getAttribute("value")

7. getCssValue()

Purpose: Get computed CSS properties

element.getCssValue("color")

Colors return as rgba() format

Bonus: Attributes & Properties

Purpose: Get HTML attributes or DOM properties

getAttribute("value")

getDomAttribute("value")

getDomProperty("value")

Key Insight: Inspection vs Interaction

Inspection methods (this unit) are read-only — they query without changing.
Interaction methods (Unit 4) modify state — click, type, clear, submit.
Always inspect before interacting to ensure the element is in the expected state.

Comprehensive Code Example

Here's a complete example demonstrating all 7+ inspection methods in a real-world scenario:

InspectElementDemo.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// Find the element
WebElement submitButton = driver.findElement(By.id("submit-btn"));

// 1. Check visibility
boolean isVisible = submitButton.isDisplayed();
System.out.println("Visible: " + isVisible);

// 2. Check if enabled
boolean isEnabled = submitButton.isEnabled();
System.out.println("Enabled: " + isEnabled);

// 3. Get tag name
String tagName = submitButton.getTagName();
System.out.println("Tag: " + tagName); // "button"

// 4. Get position and size
Rectangle rect = submitButton.getRect();
System.out.println("Position: (" + rect.getX() + ", " + rect.getY() + ")");
System.out.println("Size: " + rect.getWidth() + "x" + rect.getHeight());

// 5. Get text content
String buttonText = submitButton.getText();
System.out.println("Text: " + buttonText); // "Submit"

// 6. Get CSS styling
String bgColor = submitButton.getCssValue("background-color");
String fontSize = submitButton.getCssValue("font-size");
System.out.println("Background: " + bgColor); // "rgba(37, 99, 235, 1)"
System.out.println("Font Size: " + fontSize); // "16px"

// 7. Get attributes
String idAttr = submitButton.getAttribute("id");
String typeAttr = submitButton.getDomAttribute("type");
System.out.println("ID: " + idAttr);
System.out.println("Type: " + typeAttr);

// For checkboxes
WebElement checkbox = driver.findElement(By.id("terms"));
boolean isChecked = checkbox.isSelected();
System.out.println("Checkbox selected: " + isChecked);

// For input fields
WebElement input = driver.findElement(By.id("username"));
String inputValue = input.getAttribute("value");
System.out.println("Input value: " + inputValue);

When to Use Each Method

Before clicking or typing: Use isDisplayed() and isEnabled() to ensure the element is ready for interaction.
For assertions: Use getText(), getAttribute(), and getCssValue() to verify content and state.
For debugging: Use getTagName() and getRect() to understand why locators aren't working as expected.
For layout validation: Use getRect() to verify element positioning and sizing.

Best Practices & Common Pitfalls

✅ DO: Inspect Before Interact

Always verify element state before attempting interactions:

if (button.isDisplayed() && 
    button.isEnabled()) {
    button.click();
}

⚠️ DON'T: Confuse Existence with Visibility

findElement() finds elements even if hidden. Always use isDisplayed() to check visibility.

✅ DO: Use Right Method for Inputs

getText() for labels, buttons, headings
getAttribute("value") for input fields

⚠️ DON'T: Use isSelected() on Regular Elements

isSelected() only works for checkboxes, radios, and <option> elements.

✅ DO: Expect RGBA for Colors

Even if CSS uses hex colors, getCssValue() returns rgba() format.

⚠️ DON'T: Forget Case Sensitivity

getTagName() returns lowercase. Compare with "button", not "BUTTON".

Quick Reference Table

Method	Returns	Use Case
isDisplayed()	boolean	Is element visible?
isEnabled()	boolean	Can user interact?
isSelected()	boolean	Is checkbox/radio selected?
getTagName()	String	Verify element type
getRect()	Rectangle	Get position & size
getText()	String	Get visible text
getCssValue(prop)	String	Get computed CSS
getAttribute(name)	String	Get attribute/property

🎯 Next Steps

You now have a complete toolkit for inspecting WebElements! Practice combining these methods with:

Waits (explicit, implicit, fluent) — coming in the next unit
Assertions in your test framework (TestNG, JUnit)
Page Object Model patterns for cleaner test code