使用Selenium修改span的data-checked属性报错求助

问题场景 #

有19个带data-checked属性的span元素，示例代码如下：

<span id="u25-accordion-panel--61" data-type="checkbox" data-checked style="display: none;"></span>

尝试用Selenium修改单个元素的该属性时触发语法错误，原代码及报错信息如下：

原Selenium代码 #

options = webdriver.EdgeOptions()
options.add_argument("start-maximized")
driver = webdriver.Edge(options=options)
driver.implicitly_wait(20)
driver.get(
    'https://www.udemy.com/course/angular-10-fundamentos-8-app/')


elem = driver.find_element(By.CSS_SELECTOR,
                           '#udemy > div.ud-main-content-wrapper > div.ud-main-content > div > div > div.paid-course-landing-page__container > div.paid-course-landing-page__body > div > div:nth-child(3) > div > button')
elem.click()

elems = driver.find_elements(By.CSS_SELECTOR,
                             'div.accordion-panel--panel--24beS > span')

driver.execute_script("arguments[0].data-checked = 'checked';", elems[1])

报错信息 #

driver.execute_script("arguments[0].data-checked = 'checked';", elems[1])
selenium.common.exceptions.JavascriptException: Message: javascript error: Invalid left-hand side in assignment
  (Session info: MicrosoftEdge=109.0.1518.78)

错误原因 #

在JavaScript中，带连字符的属性（如data-checked）无法直接通过.运算符访问赋值，连字符会被解析为减法运算符，导致语法错误。必须使用setAttribute()方法操作这类属性。

解决方法 #

1. 修正单个元素的修改代码 #

将原执行脚本的代码替换为：

driver.execute_script("arguments[0].setAttribute('data-checked', 'checked');", elems[1])

2. 批量修改所有目标元素（Python遍历实现） #

遍历找到的所有元素，逐个执行属性修改：

options = webdriver.EdgeOptions()
options.add_argument("start-maximized")
driver = webdriver.Edge(options=options)
driver.implicitly_wait(20)
driver.get(
    'https://www.udemy.com/course/angular-10-fundamentos-8-app/')


elem = driver.find_element(By.CSS_SELECTOR,
                           '#udemy > div.ud-main-content-wrapper > div.ud-main-content > div > div > div.paid-course-landing-page__container > div.paid-course-landing-page__body > div > div:nth-child(3) > div > button')
elem.click()

elems = driver.find_elements(By.CSS_SELECTOR,
                             'div.accordion-panel--panel--24beS > span')

# 批量修改所有元素的data-checked属性
for elem in elems:
    driver.execute_script("arguments[0].setAttribute('data-checked', 'checked');", elem)

3. 优化方案：JavaScript一次性批量处理（更高效） #

直接在JavaScript中完成遍历修改，减少Python与JS的交互次数：

options = webdriver.EdgeOptions()
options.add_argument("start-maximized")
driver = webdriver.Edge(options=options)
driver.implicitly_wait(20)
driver.get(
    'https://www.udemy.com/course/angular-10-fundamentos-8-app/')


elem = driver.find_element(By.CSS_SELECTOR,
                           '#udemy > div.ud-main-content-wrapper > div.ud-main-content > div > div > div.paid-course-landing-page__container > div.paid-course-landing-page__body > div > div:nth-child(3) > div > button')
elem.click()

# 直接用JS批量修改所有目标元素
driver.execute_script("""
    const elements = document.querySelectorAll('div.accordion-panel--panel--24beS > span');
    elements.forEach(el => el.setAttribute('data-checked', 'checked'));
""")

内容的提问来源于stack exchange，提问作者Frank Romero Morales