Understanding Element Type with getTagName()

Verify the HTML tag of an element to ensure you found the right one.

Concept

getTagName() helps you confirm what type of HTML element you actually found.

It returns the element's tag name in lowercase (e.g. "input", "button", "a", "div").
This is useful when different elements look similar (e.g. a link styled like a button).
It's also helpful for debugging locators and writing tag-sensitive XPath/CSS.

getTagName()

What it does

Returns the HTML tag of a WebElement as a String.
Example: For <input name="email" />, getTagName() returns "input".

When to use it

When you want to verify you matched the correct element type (button vs link vs div).
When writing locators like //button[...] or //a[...] and you want to assert the tag.
During debugging when Selenium clicks the wrong thing.

Best-practice notes

Use it in assertions to ensure a locator still points to the same element type after UI changes.
Combine with other checks (like attributes, text) for stronger validation.

Tag Name vs `name` Attribute

Don't mix these up:

Tag Name — The kind of element: input, button, a, div, etc. Returned by getTagName().
name Attribute — A specific attribute on some elements, e.g. name="emailAddress". Accessed via getAttribute("name").

Key idea: Tag name = element type. name attribute = metadata on that element.

Interactive Practice

Imagine a small "tag guessing" area with three elements that look similar but are different HTML types.

Visible UI Elements

You see three clickable blocks:

I am a Link

I look like a Box

Under the hood (for you as a tester):

element-1 is a button element.
element-2 is an anchor/link element.
element-3 is a div element.

Click each element and see what tag type it really is. Then use getTagName() in Selenium to verify!

How a Student Would Interact Manually

Click each element and guess: "Is this really a button, a link, or just a div styled nicely?"
The page shows a small message under each one revealing its true tag type.
Then, you run the Selenium code to see what getTagName() returns and confirm your guesses.

The goal: Connect what you see in the UI with what Selenium actually sees in the DOM.

Java Code Example

GetTagName.java

1
2
3
4
5
6
7
8
9
10
11
12
WebElement el1 = driver.findElement(By.id("element-1"));
System.out.println("Element 1 is a: " + el1.getTagName());

WebElement el2 = driver.findElement(By.id("element-2"));
System.out.println("Element 2 is a: " + el2.getTagName());

WebElement el3 = driver.findElement(By.id("element-3"));
System.out.println("Element 3 is a: " + el3.getTagName());

if (!"button".equals(el1.getTagName())) {
    System.out.println("Error: Element 1 should be a button!");
}

Code Breakdown

driver.findElement(By.id("element-1")): Finds the element with id="element-1" (the one that looks like a button).
el1.getTagName(): Returns the underlying HTML tag of el1 (e.g. "button").
System.out.println("Element 1 is a: " + el1.getTagName()): Prints the detected tag name so you can compare UI vs DOM.
driver.findElement(By.id("element-2")) / driver.findElement(By.id("element-3")): Locates the elements that look like a link and a box, so you can also inspect their tag types.
"button".equals(el1.getTagName()): Compares the expected tag to the actual tag from Selenium. This is a simple assertion style you can later replace with a proper test assertion.
System.out.println("Error: Element 1 should be a button!"): Acts as a basic validation message if the element type is not what you expect.

Pro Tip

Debug locator issues

Use getTagName() when debugging "Why is my locator not working?" It quickly tells you if you targeted the wrong type of element.

Returns lowercase

Remember: getTagName() returns lowercase (e.g. "button", not "BUTTON"), so compare with lowercase strings.

Validate element type

When writing XPath or CSS that depends on the tag (//button[...], a[href*='login']), validate the element type with getTagName() to catch UI changes early.

Concept

getTagName() helps you confirm what type of HTML element you actually found.

It returns the element's tag name in lowercase (e.g. "input", "button", "a", "div").

This is useful when different elements look similar (e.g. a link styled like a button).

It's also helpful for debugging locators and writing tag-sensitive XPath/CSS.

getTagName()

What it does

Returns the HTML tag of a WebElement as a String.
Example: For <input name="email" />, getTagName() returns "input".

When to use it

When you want to verify you matched the correct element type (button vs link vs div).
When writing locators like //button[...] or //a[...] and you want to assert the tag.
During debugging when Selenium clicks the wrong thing.

Best-practice notes

Use it in assertions to ensure a locator still points to the same element type after UI changes.
Combine with other checks (like attributes, text) for stronger validation.

Tag Name vs `name` Attribute

Don't mix these up:

Tag Name — The kind of element: input, button, a, div, etc. Returned by getTagName().
name Attribute — A specific attribute on some elements, e.g. name="emailAddress". Accessed via getAttribute("name").

Key idea: Tag name = element type. name attribute = metadata on that element.

Interactive Practice

Imagine a small "tag guessing" area with three elements that look similar but are different HTML types.

Visible UI Elements

You see three clickable blocks:

I am a Link

I look like a Box

Under the hood (for you as a tester):

element-1 is a button element.
element-2 is an anchor/link element.
element-3 is a div element.

Click each element and see what tag type it really is. Then use getTagName() in Selenium to verify!

How a Student Would Interact Manually

Click each element and guess: "Is this really a button, a link, or just a div styled nicely?"
The page shows a small message under each one revealing its true tag type.
Then, you run the Selenium code to see what getTagName() returns and confirm your guesses.

The goal: Connect what you see in the UI with what Selenium actually sees in the DOM.

Java Code Example

GetTagName.java

1
2
3
4
5
6
7
8
9
10
11
12
WebElement el1 = driver.findElement(By.id("element-1"));
System.out.println("Element 1 is a: " + el1.getTagName());

WebElement el2 = driver.findElement(By.id("element-2"));
System.out.println("Element 2 is a: " + el2.getTagName());

WebElement el3 = driver.findElement(By.id("element-3"));
System.out.println("Element 3 is a: " + el3.getTagName());

if (!"button".equals(el1.getTagName())) {
    System.out.println("Error: Element 1 should be a button!");
}

Code Breakdown

driver.findElement(By.id("element-1")): Finds the element with id="element-1" (the one that looks like a button).
el1.getTagName(): Returns the underlying HTML tag of el1 (e.g. "button").
System.out.println("Element 1 is a: " + el1.getTagName()): Prints the detected tag name so you can compare UI vs DOM.
driver.findElement(By.id("element-2")) / driver.findElement(By.id("element-3")): Locates the elements that look like a link and a box, so you can also inspect their tag types.
"button".equals(el1.getTagName()): Compares the expected tag to the actual tag from Selenium. This is a simple assertion style you can later replace with a proper test assertion.
System.out.println("Error: Element 1 should be a button!"): Acts as a basic validation message if the element type is not what you expect.

Pro Tip

Debug locator issues

Use getTagName() when debugging "Why is my locator not working?" It quickly tells you if you targeted the wrong type of element.

Returns lowercase

Remember: getTagName() returns lowercase (e.g. "button", not "BUTTON"), so compare with lowercase strings.

Validate element type

When writing XPath or CSS that depends on the tag (//button[...], a[href*='login']), validate the element type with getTagName() to catch UI changes early.

Understanding Element Type with getTagName()

Concept

getTagName()

What it does

When to use it

Best-practice notes

Tag Name vs name Attribute

Interactive Practice

Visible UI Elements

How a Student Would Interact Manually

Java Code Example

Code Breakdown

Pro Tip

Debug locator issues

Returns lowercase

Validate element type

Understanding Element Type with getTagName()

Concept

getTagName()

What it does

When to use it

Best-practice notes

Tag Name vs name Attribute

Interactive Practice

Visible UI Elements

How a Student Would Interact Manually

Java Code Example

Code Breakdown

Pro Tip

Debug locator issues

Returns lowercase

Validate element type

Tag Name vs `name` Attribute

Tag Name vs `name` Attribute