Modifying element attributes with JS in Selenium Python - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to change the 'value' attribute of an input element using JavaScript.

Selenium Python

driver.execute_script("arguments[0].setAttribute('value', [1])", element)

Drag options to blanks, or click blank then click option'

A"new text"

Bnew text

C'new text'

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the new value string.

Passing the value without quotes causing JavaScript errors.

The JavaScript code requires the new value as a string literal, so it must be enclosed in quotes inside the script string. Option A correctly provides a quoted string.

2fill in blank

medium

Complete the code to remove the 'disabled' attribute from a button element using JavaScript.

Selenium Python

driver.execute_script("arguments[0].[1]('disabled')", button)

Drag options to blanks, or click blank then click option'

AgetAttribute

BsetAttribute

CremoveAttribute

DhasAttribute

Attempts:

3 left

💡 Hint

Common Mistakes

Using setAttribute instead of removeAttribute.

Trying to get or check the attribute instead of removing it.

To remove an attribute in JavaScript, use removeAttribute. This deletes the attribute from the element.

3fill in blank

hard

Fix the error in the code to correctly change the 'class' attribute of an element using JavaScript.

Selenium Python

driver.execute_script("arguments[0].setAttribute('class', [1])", elem)

Drag options to blanks, or click blank then click option'

A"new-class"

Bnew_class

C'new-class'

Dnew-class

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the class name without quotes causing JavaScript syntax errors.

Using underscores instead of hyphens in class names.

The value passed to setAttribute must be a JavaScript string literal, so it needs quotes inside the script string. Option A correctly provides a quoted string.

4fill in blank

hard

Fill both blanks to set the 'title' attribute of an element to 'Hello World' using JavaScript.

Selenium Python

driver.execute_script("arguments[0].[1]([2], 'Hello World')", elem)

Drag options to blanks, or click blank then click option'

AsetAttribute

BgetAttribute

C'title'

D'value'

Attempts:

3 left

💡 Hint

Common Mistakes

Using getAttribute instead of setAttribute.

Passing the attribute name without quotes.

The method to set an attribute is setAttribute and the attribute name must be the string 'title'.

5fill in blank

hard

Fill all three blanks to toggle the 'hidden' attribute on an element using JavaScript.

Selenium Python

driver.execute_script("if (arguments[0].hasAttribute([1])) { arguments[0].[2]([3]); } else { arguments[0].setAttribute([1], '') }", elem)

Drag options to blanks, or click blank then click option'

A'hidden'

BremoveAttribute

DsetAttribute

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hidden' without quotes causing syntax errors.

Confusing setAttribute and removeAttribute methods.

To toggle the 'hidden' attribute, first check if it exists with hasAttribute('hidden'). If it does, remove it with removeAttribute('hidden'). Otherwise, set it with setAttribute('hidden', ''). The blanks correspond to these strings and method names.

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