如何识别是否单击了 Angular 切换开关切换？答案

【问题标题】：How to identify if Angular toggle-switch toggle is clicked?如何识别是否单击了 Angular 切换开关切换？
【发布时间】：2021-10-27 12:42:35
【问题描述】：

我正在尝试使用 Selenium 和 Python 工具来定义是否单击了 Angular 的切换开关。当打开一个新表单时，我的输入 id 的类为 ng-untouched ng-pristine ng-valid。

点击后变为ng-valid ng-dirty ng-touched。但第三次点击后没有任何变化。在我单击它并保存表单后，该类始终保持ng-valid ng-dirty ng-touched 并在任何更改后保持不变（即使在禁用切换和保存之后）。这不是错误，因为更改保存在服务器端。

我应该查看哪个 CSS 属性来定义更改的内容？这是html代码示例：

<div _ngcontent-c26="" class="form-group">
    <label _ngcontent-c26="" for="checked">Checked</label>
    <div _ngcontent-c26="" class="toggle-switch">
        <input _ngcontent-c26="" id="opened" name="checked" type="checkbox" class="ng-valid ng-dirty ng-touched">
            <label _ngcontent-c26="" for="checked"></label>
        </div>
        <span _ngcontent-c26="" class="form-control-helper"></span>
    </div>

【问题讨论】：

标签： python angular selenium selenium-webdriver try-catch

【解决方案1】：

表单状态和输入状态

AngularJS constantly updates<form> 和 <input> 字段的状态。

输入字段有以下状态：

$untouched: 字段还没有被触及
$touched: 领域被触动了
$pristine：该字段尚未修改
$dirty: 字段已修改
$invalid: 字段内容无效
$valid：字段内容有效

这些是 <input> 字段的属性，可以是 true 或 false。

表单也有以下状态：

$pristine：尚未修改任何字段
$dirty：一处或多处已修改
$invalid: 表单内容无效
$valid: 表单内容有效
$submitted: 表单提交

这个用例

要使用Selenium 和python 验证Angular 拨动开关状态，您必须为visibility_of_element_located 诱导WebDriverWait，您可以使用以下任一Locator Strategies：

探测ng-touched：

try:
    WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//input[@id='opened' and @name='checked'][contains(@class, 'ng-touched')]")))
    print("Toggle Switch has been touched")
except TimeoutException:
    print("Toggle Switch has not been touched")

探测ng-dirty：

try:
    WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//input[@id='opened' and @name='checked'][contains(@class, 'ng-dirty')]")))
    print("Toggle Switch has been touched")
except TimeoutException:
    print("Toggle Switch has not been touched")

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

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

【讨论】：

感谢您提供如此详细的答案。我明天会尝试这些选项。
@vitaliis 听起来不错，让我知道状态。
谢谢，我尝试了您的建议，在研究过程中发现了一些更好的解决方案。

【解决方案2】：

在尝试了几个选项并进行了更多研究后，我发现两个测试解决方案是选中切换/复选框。首先，通过使用 .is_selected() Selenium 的方法：

driver.find_element_by_css_selector("input[type=checkbox]").is_selected()

如果切换为 ON，则返回 True，如果为 OFF，则返回 False。

第二，我仔细查看了 CSS 设置，发现当切换为 ON 时，会添加 :checked。因此，您可以为此定位器使用布尔表达式。选中切换的定位器如下所示：

input[type=checkbox]:checked

对于未选中的：

input[type=checkbox]

此外，还有一个适用于许多情况的第三个选项。例如，如果一个切换器改变了它的颜色，它的属性也会改变。所以你可以使用：

driver.find_element_by_css_selector("input[type=checkbox]").value_of_css_property("background-color") == "some color"

例如，如果您希望此 CSS 属性为白色，请放置 "#fff"（白色）。

【讨论】：