如何在 webdriverIO 中单击切换开关答案

【问题标题】：How to click toggle switch in webdriverIO如何在 webdriverIO 中单击切换开关
【发布时间】：2017-07-05 11:01:17
【问题描述】：

HTML 元素看起来像 <div class="toggleButton" ng-class="{checked: settings.$storage.enabledApps[app.name]}" ng-click="settings.apps.toggleApp(app.name)"><input class="workplayEnabled switch" type="checkbox" ng-checked="settings.$storage.enabledApps[app.name]"></div>

我试过browser.click('.toggleButton .switch'),browser.click('.toggleButton'), browser.click(' .switch')

但它不起作用它抛出错误，因为元素不可见而如果我尝试browser.isSelected('.toggleButton .switch'),browser.isSelected('.toggleButton'), browser.isSelected(' .switch') 它返回false

【问题讨论】：

标签： node.js webdriver-io

【解决方案1】：

就目前而言，确实很难准确指出您的EXACT问题，因为您做错了很多事情。

HTML 细分：

即通过 AngularJS 生成的 HTML；
如果您分析 Angular 属性 (ng-attributes/directives)，您会注意到只有您的 <div> 添加了点击触发功能（通过 ng-click="settings.apps.toggleApp(app.name)"），因此您只需定位 <div>元素；
<input> 仅具有反应行为（如果选中切换按钮，则它会在ng-checked 触发器上填充）；

您的问题：现在我们缩小了点击您的<div> 的解决方案，我们需要确保您的选择器返回正确的元素。

打开您的 Angular 应用程序，打开浏览器控制台并尝试查看您的选择器是否正常工作（例如：$(div.toggleButton)）。如果 CSS 选择器返回的元素不止一个 ($(div.toggleButton).length > 1)，这意味着您有多个 <div>s 与该类，因此您必须找到更具体的定位器；
在您找到 <div> 的正确定位器后，我会在您单击 WebdriverIO 脚本之前添加一个 .debug()（更多信息 here），这样我可以轻松调试场景；
一旦进入调试模式，我会尝试使用在浏览器控制台中找到我的元素的相同选择器。

！！！注意： .isSelected() 将始终在您的场景中返回false，因为您提到您未能单击切换开关，这满足ng-checked 条件。您可以通过在调试模式下手动选择切换开关然后在您的<input> 上执行.isSelected() 命令来验证这一点。然后它应该返回true。

【讨论】：