如何使用 Selenium 和 python 检查 Chrome 中的复选框

Question

我正在尝试使用 python3 在 Chrome 中通过 selenium 检查一个复选框。 这是 HTML 代码：

 <header class="list-header">
    <aside class="list-header-bulk-selection">
       <input type="checkbox" class="sc-cSHVUG iAwiCZ">
           ::after   

我正在尝试通过以下方式选中该框：

check_mark = driver.find_element_by_xpath("//input[@class='sc-cSHVUG iAwiCZ']")
check_mark.click()

我能够找到该位置，但不幸的是我收到以下错误消息：

ElementNotInteractableException: Message: element not interactable
  (Session info: chrome=75.0.3770.142)

我想我必须访问::after 行，但我不知道该怎么做。

Answer 1

尝试以下选项以单击复选框。

选项1：

location_once_scrolled_into_view

check_mark = driver.find_element_by_xpath("//input[@class='sc-cSHVUG iAwiCZ']")
check_mark.location_once_scrolled_into_view
check_mark.click()

选项2：

WebDriverWait 和 element_to_be_clickable

check_mark =WebDriverWait(driver,20).until(EC.element_to_be_clickable((By.XPATH,"//input[@class='sc-cSHVUG iAwiCZ']")))
check_mark.click()

选项3：

Java 脚本执行器

check_mark =WebDriverWait(driver,20).until(EC.element_to_be_clickable((By.XPATH,"//input[@class='sc-cSHVUG iAwiCZ']")))
driver.execute_script("arguments[0].click();", check_mark)

您需要导入以下代码来执行上述代码。

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

Answer 2

这个sc-cSHVUG iAwiCZ 看起来很可疑，很可能它是在您每次刷新页面时自动生成的。我建议坚持使用更“静态”的内容，例如 checkbox 应该有一些 label 或其他说明其作用的文字，您可以坚持使用该文字。

根据您目前提供的内容，最好先找到这个<aside> tag，然后使用child 轴到达复选框，例如：

//aside[contains(@class, 'bulk-selection')]/child::input

更多信息：

• XPath Tutorial
• XPath Axes
• XPath Operators & Functions

Answer 3

所需的元素是动态元素，因此对于click()，您必须为element_to_be_clickable() 诱导WebDriverWait 元素，您可以使用以下任一解决方案：

• 使用CSS_SELECTOR：

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "header.list-header>aside.list-header-bulk-selection>input[type='checkbox']"))).click()
  

• 使用XPATH：

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//header[@class='list-header']/aside[@class='list-header-bulk-selection']/input[@type='checkbox' and @class]"))).click()
  

• 注意：您必须添加以下导入：

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC
  

Answer 4

非常感谢你们。问题是 ::after 是一个伪元素，它不能与 selenium 交互。

我实际上是通过访问复选框然后将鼠标悬停在它上面（只是一点点）来激活 HTML 对象来解决它。然后复选框是可交互的。

from selenium.webdriver import ActionChains

check_mark = driver.find_element_by_xpath("//input[@class='sc-cSHVUG iAwiCZ']")
ActionChains(driver).move_to_element_with_offset(check_mark,0.001,0.001).click().perform()

Answer 5

HTML 中的复选框是输入标签的属性之一。它们看起来像可以在前端动态勾选的方框。当我们想要从用户那里获取多个输入时，HTML 复选框被证明非常有用。当用户遇到复选框问题时，他们通过选中/勾选这些文本框从整个列表中选择他们想要的选项。然后在提交问题或表单并存储在后端时收集勾选的复选框的数据。

语法：

<input type = "checkbox"> This is my first checkbox

如何在 HTML 中创建复选框？

语法：

<form>
    <p>Add your veggies:</p>
    <input type="checkbox" name="veggies" id="veg1" value="tomato" onclick="return       ValidateSelection();">
    <label for="veg1">Tomato</label>
    <input form="myForm" type="checkbox" name="veggies" id="veg2"  value="onion" onclick="return ValidateSelection();"> 
    <label for="veg2">Onion</label>
    <input form="myForm" type="checkbox" name="veggies" id="veg3"  value="lettuce" onclick="return ValidateSelection();"> 
    <label for="veg3">Lettuce</label>
    <input type="checkbox" name="veggies" id="veg4" value="capsicum" disabled> 
    <label for="veg4">Capsicum</label>
<p><input type="submit" value="Submit"></p>
<form action="" target="result3" method="get" id="myForm">
</form>
<script type="text/javascript">  
    function ValidateSelection()  
    {  
        var cb = document.getElementsByName("veggies");  
        var CheckedItems = 0; 
        for(var i = 0; i < cb.length; i++)  
        {  
            if(cb[i].checked)  
                CheckedItems++;  
        }  
        if(CheckedItems > 2){  
            alert("You can't select more than three veggies!");  
            return false;}  
}  
 </script>

请参阅此article 以了解有关 HTML 中复选框的更多信息