如何选中并点击控制台中大量出现的指定role为button的div元素

你给出的元素class为前端框架自动生成的动态哈希类，稳定性差，优先使用role属性、样式特征等稳定标识定位，以下是不同场景的实现方法：

浏览器控制台原生JS实现 #

• 批量选中所有role为button的目标元素并点击：

// 定位所有符合条件的元素
const targetBtns = document.querySelectorAll('div[role="button"]');
// 遍历执行点击操作
targetBtns.forEach(btn => btn.click());

• 如果存在其他无关的role="button"元素，可叠加样式特征过滤：

const targetBtns = Array.from(document.querySelectorAll('div[role="button"]')).filter(btn => {
  const computedStyle = window.getComputedStyle(btn);
  // 匹配你给出的元素固定样式特征
  return computedStyle.width === '20px' && computedStyle.height === '20px' && computedStyle.display === 'inline-block';
});
targetBtns.forEach(btn => btn.click());

自动化测试工具实现（以Python Selenium为例） #

• 批量定位点击示例：

from selenium.webdriver.common.by import By

# 批量匹配目标元素
target_btns = driver.find_elements(By.CSS_SELECTOR, 'div[role="button"]')
# 逐个点击
for btn in target_btns:
    btn.click()

提示：如果需要更精准的定位，可以结合元素的父级固定结构、自定义属性等特征组合筛选，避免误选其他无关元素。

内容的提问来源于stack exchange，提问作者Jhon tech