Getting and setting attributes in Selenium Java - Deep Dive

Overview - Getting and setting attributes

What is it?

Getting and setting attributes means reading or changing the properties of elements on a web page during automated testing. Attributes are like labels or settings on HTML elements, such as 'id', 'class', or 'value'. Selenium lets you check these attributes to verify the page state or change them to simulate user actions or test edge cases. This helps ensure the web page behaves correctly under different conditions.

Why it matters

Without the ability to get or set attributes, testers cannot verify if elements have the right properties or simulate changes that users might cause. This limits test coverage and can let bugs slip through, causing broken features or poor user experience. Being able to manipulate attributes helps catch hidden issues and makes tests more powerful and realistic.

Where it fits

Before learning this, you should understand basic Selenium commands like finding elements and interacting with them. After mastering attributes, you can move on to advanced topics like JavaScript execution in Selenium, handling dynamic elements, and building robust test frameworks.

Mental Model

Core Idea

Attributes are the settings of web elements that you can read or change to understand or control how the page behaves during tests.

Think of it like...

It's like checking and adjusting the knobs and switches on a machine to see if it works right or to make it do something different.

┌───────────────┐
│ Web Element   │
│ ┌───────────┐ │
│ │ Attributes│ │
│ │ id: btn1  │ │
│ │ value: OK │ │
│ │ class: red│ │
│ └───────────┘ │
└──────┬────────┘
       │
  ┌────▼─────┐       ┌───────────────┐
  │ Get attr │       │ Set attr      │
  └──────────┘       └───────────────┘
       │                   │
  Read value          Change value
  to verify          to simulate
  or check           user action
  state

Build-Up - 7 Steps

1

Foundation

What are HTML attributes

Concept: Introduce what attributes are in HTML elements and why they matter.

HTML elements have attributes that store extra information. For example, has a 'value' attribute holding the text inside. Attributes define element behavior or appearance.

Result

Learner understands attributes as key-value pairs attached to elements.

Knowing attributes are like element settings helps you see why reading or changing them affects tests.

2

Foundation

Finding elements in Selenium

Concept: Learn how to locate elements to access their attributes.

Use Selenium's findElement method with locators like By.id, By.name, or By.cssSelector to get a WebElement object representing the page element.

Result

You can now target specific elements to inspect or modify.

Without finding elements first, you cannot get or set their attributes.

3

Intermediate

Getting attribute values in Selenium

🤔Before reading on: do you think getAttribute returns the current live value or the original HTML value? Commit to your answer.

Concept: Learn how to read an element's attribute value using Selenium's getAttribute method.

Call element.getAttribute("attributeName") to get the value. For example, element.getAttribute("value") returns the current text in an input box, even if changed by the user or script.

Result

You can verify element states or properties during tests.

Understanding getAttribute returns the current attribute value helps avoid confusion when testing dynamic pages.

4

Intermediate

Setting attributes via JavaScript

🤔Before reading on: do you think Selenium has a direct method to set attributes? Commit to yes or no.

Concept: Selenium does not provide a direct setAttribute method, so you use JavaScript execution to change attributes.

Use JavascriptExecutor in Selenium to run JavaScript code like element.setAttribute('attr', 'value'). For example: JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("arguments[0].setAttribute('value', 'new text')", element);

Result

You can simulate attribute changes that affect element behavior or appearance.

Knowing how to use JavaScript to set attributes expands your ability to test complex scenarios.

5

Intermediate

Common attributes to get and set

Concept: Identify frequently used attributes in tests and their effects.

Attributes like 'value', 'checked', 'disabled', 'class', and 'style' are often checked or changed. For example, checking 'disabled' tells if a button is clickable; setting 'class' can change styling.

Result

You can target meaningful attributes to verify or manipulate test conditions.

Focusing on key attributes makes tests more effective and easier to maintain.

6

Advanced

Handling dynamic attribute changes

🤔Before reading on: do you think getAttribute always reflects the latest attribute value after page scripts run? Commit to yes or no.

Concept: Learn how to handle attributes that change dynamically after page load.

Web pages often update attributes via JavaScript after loading. Use waits like WebDriverWait to pause until attributes reach expected values before asserting. Example: new WebDriverWait(driver, Duration.ofSeconds(10)) .until(ExpectedConditions.attributeToBe(element, "class", "active"));

Result

Tests become stable and reliable even with dynamic content.

Understanding dynamic changes prevents flaky tests caused by timing issues.

7

Expert

Limitations and side effects of setting attributes

🤔Before reading on: do you think setting an attribute via JavaScript always triggers the same browser events as user actions? Commit to yes or no.

Concept: Explore the risks and limits of changing attributes directly in tests.

Setting attributes via JavaScript does not always trigger events like 'change' or 'input'. This can cause tests to miss side effects or validations. To handle this, you may need to trigger events manually or use user-like actions instead.

Result

You avoid false positives and ensure tests reflect real user behavior.

Knowing the difference between attribute changes and user events helps write more accurate tests.

Under the Hood

Selenium's getAttribute method queries the browser's DOM to retrieve the current value of an element's attribute. When you set attributes via JavaScript, the browser updates the DOM directly, but Selenium itself does not provide a native method to set attributes. Instead, it uses the JavaScript engine inside the browser to execute code that modifies the DOM. This separation means attribute changes via JavaScript may not trigger all browser events or internal state updates that happen during real user interactions.

Why designed this way?

Selenium was designed to simulate user interactions at a high level, like clicking or typing, rather than low-level DOM manipulations. Direct attribute setting was left to JavaScript execution to keep the API simple and browser-agnostic. This design balances ease of use with flexibility, allowing testers to choose between user-like actions and direct DOM changes depending on their needs.

┌───────────────┐
│ Selenium Test │
└──────┬────────┘
       │ calls
┌──────▼────────┐
│ WebDriver API │
└──────┬────────┘
       │ calls
┌──────▼─────────────┐
│ Browser DOM Engine  │
│ getAttribute reads  │
│ setAttribute via JS │
└─────────┬───────────┘
          │ updates
┌─────────▼───────────┐
│ Browser Rendering   │
│ and Event System    │
└────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does getAttribute always return the original HTML attribute value or the current live value? Commit to your answer.

Common Belief: getAttribute returns the original HTML attribute value as written in the page source.

Reality: getAttribute returns the current live value of the attribute, which may have changed after page load.

Why it matters: Tests that expect original values may fail or pass incorrectly if the attribute has changed dynamically.

Quick: Can you set an attribute directly using a Selenium WebElement method? Commit yes or no.

Common Belief: Selenium WebElement has a method to set attributes directly.

Reality: Selenium does not provide a direct setAttribute method; you must use JavaScript execution.

Why it matters: Trying to set attributes without JavaScript leads to confusion and failed test attempts.

Quick: Does changing an attribute via JavaScript always trigger browser events like a user action? Commit your answer.

Common Belief: Changing attributes via JavaScript triggers the same events as user interactions.

Reality: JavaScript attribute changes do not automatically trigger events like 'change' or 'input'.

Why it matters: Tests may miss important side effects or validations if they rely only on attribute changes.

Quick: Is it safe to rely on getAttribute("value") to get the text inside all elements? Commit yes or no.

Common Belief: getAttribute("value") always returns the visible text inside any element.

Reality: Only some elements like inputs have a 'value' attribute; others require different methods like getText().

Why it matters: Using getAttribute incorrectly can cause tests to read wrong or empty values.

Expert Zone

1

Some attributes reflect properties that can be different from the attribute value, requiring use of WebElement methods like isSelected() or getText() for accurate state.

2

Setting attributes via JavaScript can bypass browser security or validation, so tests must consider if this simulates real user behavior correctly.

3

Dynamic web frameworks often update attributes asynchronously, so combining attribute checks with explicit waits is essential for stable tests.

When NOT to use

Directly setting attributes is not suitable when you need to simulate real user interactions fully, such as triggering event handlers or validations. Instead, use Selenium actions like sendKeys() or click() to mimic user behavior. For verifying visible text, prefer getText() over getAttribute("value") unless dealing with input elements.

Production Patterns

In real-world tests, getting attributes is commonly used to verify element states like 'disabled' or 'checked'. Setting attributes via JavaScript is used sparingly to test edge cases or manipulate elements that are otherwise hard to interact with. Combining attribute checks with waits and event triggers ensures robust and reliable test suites.

Connections

DOM Manipulation

builds-on

Understanding how Selenium gets and sets attributes deepens knowledge of DOM manipulation, which is fundamental for web automation and testing.

Event-driven Programming

related concept

Knowing that setting attributes via JavaScript may not trigger events highlights the importance of event-driven programming in web behavior and testing.

Control Systems Engineering

analogous pattern

Just like adjusting control parameters affects system behavior, changing attributes controls element behavior; understanding feedback loops in control systems helps grasp dynamic attribute changes.

Common Pitfalls

#1 Trying to set an attribute using a non-existent Selenium method.

Wrong approach:

element.setAttribute("value", "new")

Correct approach:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].setAttribute('value', 'new')", element);

Root cause:

Misunderstanding Selenium API capabilities and expecting WebElement to have all DOM methods.

#2 Assuming getAttribute("value") returns visible text for all elements.

Wrong approach:

String text = element.getAttribute("value"); // for a elementCorrect approach: String text = element.getText(); // for non-input elementsRoot cause: Confusing attribute values with visible text content.

#3 Setting attribute via JavaScript but not triggering necessary events.

Wrong approach:

js.executeScript("arguments[0].setAttribute('value', 'new')", element); // without event trigger

Correct approach:

js.executeScript("arguments[0].setAttribute('value', 'new'); arguments[0].dispatchEvent(new Event('change'));", element);

Root cause:

Not realizing that attribute changes do not automatically fire browser events.

Key Takeaways

Attributes are key-value pairs on HTML elements that define their properties and behavior.

Selenium's getAttribute method reads the current live value of an element's attribute, not just the original HTML.

Selenium does not have a direct method to set attributes; JavaScript execution is required to modify them.

Changing attributes via JavaScript may not trigger browser events, so tests must handle event firing explicitly.

Combining attribute access with waits and event handling leads to more reliable and realistic automated tests.

Practice

1. What is the primary method to get an attribute value of a web element in Selenium Java?

easy

A. Using driver.getAttribute("attributeName")

B. Using element.setAttribute("attributeName")

C. Using element.getText()

D. Using element.getAttribute("attributeName")

Solution

1. Step 1: Understand the method to retrieve attribute

   In Selenium Java, getAttribute is used on a WebElement to fetch the value of an attribute.

2. Step 2: Identify correct usage

   The syntax is element.getAttribute("attributeName"), which returns the attribute's value as a string.

3. Final Answer:

   Using element.getAttribute("attributeName") -> Option D

4. Quick Check:

   Get attribute = element.getAttribute("attributeName") [OK]

Hint: Remember: getAttribute reads, setAttribute does not exist directly [OK]

Common Mistakes:

• Confusing getAttribute with setAttribute
• Trying to use driver.getAttribute instead of element.getAttribute
• Using getText() to get attribute values

2. Which of the following is the correct way to set an attribute value of a web element in Selenium Java?

easy

A. Using JavaScriptExecutor to run arguments[0].setAttribute('value', 'newValue')

B. element.setAttribute("value", "newValue")

C. element.getAttribute("value") = "newValue"

D. element.setValue("newValue")

Solution

1. Step 1: Understand Selenium's limitation on setting attributes

   Selenium WebElement does not have a direct setAttribute method.

2. Step 2: Use JavaScriptExecutor to set attribute

   We use JavaScriptExecutor to run JavaScript code that sets the attribute, e.g., arguments[0].setAttribute('value', 'newValue').

3. Final Answer:

   Using JavaScriptExecutor to run arguments[0].setAttribute('value', 'newValue') -> Option A

4. Quick Check:

   Set attribute = JavaScriptExecutor + setAttribute() [OK]

Hint: Set attributes via JavaScriptExecutor, not WebElement methods [OK]

Common Mistakes:

• Trying to call setAttribute directly on WebElement
• Assigning value to getAttribute() result
• Using non-existent setValue() method

3. Consider the following Selenium Java code snippet:

WebElement input = driver.findElement(By.id("username"));
String value = input.getAttribute("value");
System.out.println(value);

If the input field has value="testUser", what will be printed?

medium

A. testUser

B. null

C. value

D. username

Solution

1. Step 1: Identify the attribute being fetched

   The code calls getAttribute("value") on the input element, which returns the current value attribute.

2. Step 2: Match attribute value with output

   The input field has value="testUser", so value variable will be "testUser" and printed.

3. Final Answer:

   testUser -> Option A

4. Quick Check:

   getAttribute("value") = "testUser" [OK]

Hint: getAttribute returns actual attribute value, not element text [OK]

Common Mistakes:

• Confusing getAttribute("value") with getText()
• Expecting attribute name instead of value
• Assuming null if attribute exists

4. You want to set the attribute placeholder of an input element to "Enter name" using Selenium Java. Which code snippet fixes the error below?

// Current code
WebElement input = driver.findElement(By.id("name"));
input.setAttribute("placeholder", "Enter name"); // Error: cannot find symbol

medium

A. Use input.sendKeys("Enter name")

B. Replace with input.getAttribute("placeholder") = "Enter name";

C. Use JavaScriptExecutor: js.executeScript("arguments[0].setAttribute('placeholder', 'Enter name')", input);

D. Use input.setValue("Enter name")

Solution

1. Step 1: Identify why error occurs

   WebElement does not have a setAttribute method, so calling it causes a compile error.

2. Step 2: Use JavaScriptExecutor to set attribute

   JavaScriptExecutor can run JavaScript to set attributes on elements, e.g., arguments[0].setAttribute('placeholder', 'Enter name').

3. Final Answer:

   Use JavaScriptExecutor: js.executeScript("arguments[0].setAttribute('placeholder', 'Enter name')", input); -> Option C

4. Quick Check:

   Set attribute via JSExecutor = Use JavaScriptExecutor: js.executeScript("arguments[0].setAttribute('placeholder', 'Enter name')", input); [OK]

Hint: Set attributes only via JavaScriptExecutor, not WebElement methods [OK]

Common Mistakes:

• Trying to assign value to getAttribute()
• Using non-existent setValue() method
• Using sendKeys() which inputs text, not sets attribute

5. You want to verify if a checkbox is checked by reading its checked attribute using Selenium Java. Which approach correctly checks this and sets it checked if not already?

WebElement checkbox = driver.findElement(By.id("agree"));
String checked = checkbox.getAttribute("checked");
if (checked == null) {
    // Set checked attribute here
}

hard

A. Use checkbox.setAttribute("checked", "true")

B. Use JavaScriptExecutor: js.executeScript("arguments[0].setAttribute('checked', 'true')", checkbox);

C. Use checkbox.click() to check the box

D. Use checkbox.getAttribute("checked") = "true"

Solution

1. Step 1: Check if checkbox is checked by reading 'checked' attribute

   If getAttribute("checked") returns null, checkbox is not checked.

2. Step 2: Set 'checked' attribute using JavaScriptExecutor

   Since WebElement has no setAttribute, use JavaScriptExecutor to set checked attribute to "true".

3. Final Answer:

   Use JavaScriptExecutor: js.executeScript("arguments[0].setAttribute('checked', 'true')", checkbox); -> Option B

4. Quick Check:

   Set attribute via JSExecutor = Use JavaScriptExecutor: js.executeScript("arguments[0].setAttribute('checked', 'true')", checkbox); [OK]

Hint: Check attribute with getAttribute; set with JSExecutor [OK]

Common Mistakes:

• Trying to call setAttribute directly on WebElement
• Using assignment on getAttribute() result
• Using click() which toggles but does not set attribute directly