How to change the value of the class attribute of an element using Python and Selenium

Question

I want to change the class name, but it doesn't work for me.

<div class="vcp-controls-panel vcp-playing hide">

FullXpath:

/html/body/div[1]/div/div/div/div[2]/div/div/div[1]/div[1]/div[1]/div/div[1]/div[3]/div/div[1]/div/div[1]/div[9]/div[4]

I want to change vcp-playing hide to vcp-playing show but it doesn't work

selects = driver.find_element_by_class_name("vcp-playing hide")
 for select in selects:
 driver.execute_script("arguments[0].setAttribute('class', 'vcp-playing show')", select)

Answer 1

As the existing element already have the classname attribute set:

<div class="vcp-controls-panel vcp-playing hide">

You can remove the existing attributes through removeAttribute() set the new attributes using setAttribute() as follows:

selects = driver.find_elements(By.CSS_SELECTOR, "div.vcp-controls-panel.vcp-playing.hide")
for select in selects:
 driver.execute_script("arguments[0].removeAttribute('class')", select);
 driver.execute_script("arguments[0].setAttribute('class','vcp-controls-panel vcp-playing show')", select)

Note : You have to add the following imports :

from selenium.webdriver.common.by import By

Answer 2

how about do it completely in javascript

driver.execute_script("""
 selects = document.querySelectorAll('.vcp-playing.hide')
 selects.forEach(e => e.setAttribute('class', 'vcp-playing show'))
""")

• jesusay: No errors occur, but nothing changes.
• SinaMobasheri: @jesusay is it possible to try Javascript part in directly in Brower console... and see what's happened
• jesusay: >selects = document.querySelectorAll('.vcp-playing.hide') NodeList [div.vcp-controls-panel.vcp-playing.hide]0: div.vcp-controls-panel.vcp-playing.hidelength: 1[[Prototype]]: NodeList 181570b651df4cd8c51d.js?max_age=31536000:1 predict: 226.85693359375 ms >selects.forEach(e => e.setAttribute('class', 'vcp-playing show') VM26872:1 Uncaught SyntaxError: missing ) after argument list