如何在 webdriverIO 中单击切换开关
How to click toggle switch in webdriverIO
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') 它 returns false
就目前而言，确实很难确定您的 EXACT 问题，因为您做错了很多事情。
HTML细分：
- 即HTML通过AngularJS生成；
- 如果您分析 Angular 属性 (
ng-attributes/directives)，您会注意到只有 <div> 添加了点击触发功能（通过 ng-click="settings.apps.toggleApp(app.name)")，因此您只需定位 <div> 元素；
<input> 仅具有反应性行为（如果选中切换按钮，则它会在 ng-checked 触发器上填充）；
您的问题： 既然我们缩小了单击您的 <div> 的解决方案，我们需要确保您的选择器 return 正确元素.
打开您的 Angular 应用程序，打开浏览器控制台并尝试查看您的选择器是否正常工作（例如：$(div.toggleButton)）。如果 CSS-选择器 return 多于一个元素（$(div.toggleButton).length > 1），这意味着你有多个 <div> 与那个 class 所以你将不得不查找更具体的定位器；
在您为 <div> 找到正确的定位器后，我会添加一个 .debug()（更多信息 here) 在你点击你的 WebdriverIO 脚本之前，这样我就可以轻松地调试场景；
进入调试模式后，我将尝试使用在浏览器控制台中找到我的元素的相同选择器。
！！！注意： .isSelected() 在你的场景中总是 return false 你提到你没有点击拨动开关，这满足 ng-checked 条件。您可以通过在调试模式下手动选择切换开关然后在 <input> 上执行 .isSelected() 命令来验证这一点。那么它应该 return true.
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') 它 returns false
就目前而言，确实很难确定您的 EXACT 问题，因为您做错了很多事情。
HTML细分：
- 即HTML通过AngularJS生成；
- 如果您分析 Angular 属性 (
ng-attributes/directives)，您会注意到只有<div>添加了点击触发功能（通过ng-click="settings.apps.toggleApp(app.name)")，因此您只需定位<div>元素； <input>仅具有反应性行为（如果选中切换按钮，则它会在ng-checked触发器上填充）；
您的问题： 既然我们缩小了单击您的 <div> 的解决方案，我们需要确保您的选择器 return 正确元素.
打开您的 Angular 应用程序，打开浏览器控制台并尝试查看您的选择器是否正常工作（例如：
$(div.toggleButton)）。如果 CSS-选择器 return 多于一个元素（$(div.toggleButton).length > 1），这意味着你有多个<div>与那个 class 所以你将不得不查找更具体的定位器；在您为
<div>找到正确的定位器后，我会添加一个.debug()（更多信息 here) 在你点击你的 WebdriverIO 脚本之前，这样我就可以轻松地调试场景；进入调试模式后，我将尝试使用在浏览器控制台中找到我的元素的相同选择器。
！！！注意： .isSelected() 在你的场景中总是 return false 你提到你没有点击拨动开关，这满足 ng-checked 条件。您可以通过在调试模式下手动选择切换开关然后在 <input> 上执行 .isSelected() 命令来验证这一点。那么它应该 return true.