Modifying element attributes with JS in Selenium Python - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Selenium Python code snippet?

Consider the following Selenium Python code that modifies an element's attribute using JavaScript. What will be the value of the attribute data-test after execution?

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By

class DummyElement:
    def __init__(self):
        self.attrs = {"data-test": "old_value"}
    def get_attribute(self, name):
        return self.attrs.get(name, None)
    def set_attribute(self, name, value):
        self.attrs[name] = value

# Simulated element
element = DummyElement()

# JavaScript to modify attribute
js_script = "arguments[0].setAttribute('data-test', 'new_value')"

# Simulate JS execution
exec(js_script.replace('arguments[0].setAttribute', 'element.set_attribute'))

result = element.get_attribute('data-test')
print(result)

A old_value

B new_value

C None

D SyntaxError

💡 Hint

Think about what the JavaScript setAttribute method does to the element's attribute.

The JavaScript code sets the 'data-test' attribute to 'new_value'. The simulated Python code replaces the JS call with a method that updates the attribute dictionary. Therefore, the attribute value after execution is 'new_value'.

❓ assertion

intermediate

Which assertion correctly verifies the attribute change after JS execution?

You have modified an element's attribute class using JavaScript in Selenium Python. Which assertion correctly checks that the attribute was updated to active?

Selenium Python

element = driver.find_element(By.ID, 'my-element')
driver.execute_script("arguments[0].setAttribute('class', 'active')", element)

# Which assertion below is correct?

A assert element.get_attribute('class') == 'active'

B assert element.get_attribute('class') != 'active'

C assert element.get_attribute('class') is None

D assert element.get_attribute('class') == ''

💡 Hint

The attribute was set to 'active', so the assertion should confirm this exact value.

After executing the JavaScript to set the 'class' attribute to 'active', the element's attribute value should be exactly 'active'. Therefore, the assertion checking equality to 'active' is correct.

❓ locator

advanced

Which locator is best to find an element by a modified attribute using Selenium?

After modifying an element's data-status attribute to enabled using JavaScript, which Selenium locator will correctly find this element?

A driver.find_element(By.CSS_SELECTOR, '[data-status="enabled"]')

B driver.find_element(By.ID, 'data-status')

C driver.find_element(By.CLASS_NAME, 'enabled')

D driver.find_element(By.NAME, 'data-status')

💡 Hint

Attributes can be targeted using CSS selectors with square brackets.

The CSS selector '[data-status="enabled"]' selects elements with the attribute 'data-status' equal to 'enabled'. Other locators do not target attributes directly or use incorrect methods.

🔧 Debug

advanced

Why does this Selenium Python code fail to modify the attribute?

Review the code below. Why does the attribute title remain unchanged after execution?

Selenium Python

element = driver.find_element(By.ID, 'header')
driver.execute_script("arguments[0].title = 'New Title'", element)

# Check attribute
print(element.get_attribute('title'))

A The element ID 'header' does not exist, so code fails silently

B get_attribute('title') always returns None

C execute_script cannot modify element attributes

D Setting property 'title' does not update the attribute; setAttribute must be used

💡 Hint

Difference between DOM properties and HTML attributes matters here.

Setting the property 'title' changes the DOM property but does not update the HTML attribute. Selenium's get_attribute reads the attribute, so it remains unchanged. Using setAttribute updates the attribute correctly.

❓ framework

expert

In a Selenium test framework, which approach ensures attribute modification is verified reliably?

You want to modify an element's attribute using JavaScript and verify the change in a Selenium Python test. Which approach below is best practice to ensure the test is reliable and stable?

A Modify attribute with execute_script, then immediately assert attribute value without wait

B Modify attribute by sending keys to element, then assert attribute value

C Modify attribute with execute_script, then use WebDriverWait to wait until attribute value updates before asserting

D Modify attribute by refreshing the page, then assert attribute value

💡 Hint

Consider timing and synchronization in Selenium tests.

JavaScript execution may be asynchronous or the DOM may take time to update. Using WebDriverWait to wait for the attribute change ensures the test does not fail due to timing issues, making it reliable.

Practice

1. What does the following Selenium Python code do?
driver.execute_script("arguments[0].setAttribute('disabled', 'true')", element)

easy

A. It changes the element's text to 'true'.

B. It enables the web element by removing the 'disabled' attribute.

C. It disables the web element by setting its 'disabled' attribute to true.

D. It deletes the element from the page.

Solution

1. Step 1: Understand the JavaScript command

   The JavaScript code uses setAttribute to add or change the 'disabled' attribute of the element to 'true'.

2. Step 2: Effect on the web element

   Setting 'disabled' to 'true' makes the element disabled, meaning user interaction is blocked.

3. Final Answer:

   It disables the web element by setting its 'disabled' attribute to true. -> Option C

4. Quick Check:

   setAttribute('disabled', 'true') disables element [OK]

Hint: setAttribute('disabled', 'true') disables element [OK]

Common Mistakes:

• Confusing 'disabled' attribute with changing text content
• Thinking it removes the element
• Assuming it enables the element instead

2. Which of the following is the correct syntax to change an element's attribute 'class' to 'active' using Selenium Python's execute_script?

easy

A. driver.execute_script("arguments[0].setAttribute('class', 'active')", element)

B. driver.execute_script("element.setAttribute('class', 'active')")

C. driver.execute_script("arguments.setAttribute('class', 'active')", element)

D. driver.execute_script("arguments[0].setAttribute('class' = 'active')", element)

Solution

1. Step 1: Identify correct use of arguments in execute_script

   In Selenium, arguments[0] refers to the first argument passed after the script string, which is the element.

2. Step 2: Check JavaScript syntax for setAttribute

   The correct syntax is setAttribute('attributeName', 'value'). driver.execute_script("arguments[0].setAttribute('class', 'active')", element) uses this correctly with arguments[0].

3. Final Answer:

   driver.execute_script("arguments[0].setAttribute('class', 'active')", element) -> Option A

4. Quick Check:

   Use arguments[0].setAttribute('class', 'active') [OK]

Hint: Use arguments[0] for element in execute_script [OK]

Common Mistakes:

• Using 'element' directly inside the script string
• Wrong JavaScript syntax like '=' inside setAttribute
• Using 'arguments' without index

3. What will be the output of the following code snippet?

element = driver.find_element(By.ID, 'submit-btn')
driver.execute_script("arguments[0].setAttribute('data-test', 'passed')", element)
attr_value = element.get_attribute('data-test')
print(attr_value)

medium

A. SyntaxError

B. data-test

C. None

D. passed

Solution

1. Step 1: Modify attribute using JavaScript

   The script sets the 'data-test' attribute of the element to 'passed'.

2. Step 2: Retrieve the attribute value

   Calling get_attribute('data-test') fetches the updated value, which is 'passed'.

3. Final Answer:

   passed -> Option D

4. Quick Check:

   setAttribute then get_attribute returns new value [OK]

Hint: get_attribute returns updated attribute after JS change [OK]

Common Mistakes:

• Expecting None because attribute was not originally present
• Confusing attribute name with value
• Thinking JavaScript changes don't reflect in Selenium

4. Identify the error in the following code snippet that tries to change an element's 'title' attribute:

element = driver.find_element(By.CSS_SELECTOR, '.btn')
driver.execute_script("arguments[0].setAttribute('title', title)", element)

medium

A. The variable 'title' is not defined in the JavaScript context.

B. The element locator is incorrect.

C. The setAttribute method is misspelled.

D. execute_script cannot modify attributes.

Solution

1. Step 1: Analyze JavaScript string in execute_script

   The script uses 'title' as a variable inside the string, but it is not defined in JavaScript context.

2. Step 2: Understand variable passing in execute_script

   To pass a Python variable, it must be included as an argument and referenced via arguments[1] or similar.

3. Final Answer:

   The variable 'title' is not defined in the JavaScript context. -> Option A

4. Quick Check:

   JS variables must be passed explicitly [OK]

Hint: Pass variables as arguments, not inline strings [OK]

Common Mistakes:

• Using Python variables directly inside JS string
• Ignoring need for arguments[n] in execute_script
• Assuming locator error without checking script

5. You want to toggle a checkbox's 'checked' attribute using Selenium Python and JavaScript. Which code snippet correctly toggles the checkbox state?

hard

A. driver.execute_script("arguments[0].setAttribute('checked', !arguments[0].checked)", checkbox_element)

B. driver.execute_script("arguments[0].checked = !arguments[0].checked", checkbox_element)

C. driver.execute_script("arguments[0].checked = 'false'", checkbox_element)

D. driver.execute_script("arguments[0].removeAttribute('checked')", checkbox_element)

Solution

1. Step 1: Understand checkbox 'checked' property vs attribute

   The 'checked' property is a boolean that controls checkbox state; toggling it flips the state.

2. Step 2: Evaluate each option's effect

   driver.execute_script("arguments[0].checked = !arguments[0].checked", checkbox_element) uses JavaScript to toggle the boolean property correctly. driver.execute_script("arguments[0].setAttribute('checked', !arguments[0].checked)", checkbox_element) tries to set attribute with a boolean, which converts to string and may not work as expected. driver.execute_script("arguments[0].checked = 'false'", checkbox_element) sets 'checked' to string 'false', which does not uncheck. driver.execute_script("arguments[0].removeAttribute('checked')", checkbox_element) removes 'checked' attribute but does not toggle back on.

3. Final Answer:

   driver.execute_script("arguments[0].checked = !arguments[0].checked", checkbox_element) -> Option B

4. Quick Check:

   Toggle boolean property 'checked' to flip checkbox [OK]

Hint: Toggle checkbox by flipping 'checked' boolean property [OK]

Common Mistakes:

• Using setAttribute with boolean values
• Setting 'checked' to string 'false' instead of boolean
• Removing attribute without toggling back