Setting/clearing AngularJS 带 Watir 的 md-checkbox

Question

我正在尝试使用 Watir gem 执行自动化测试。我需要通过设置和清除来测试复选框是否有效。

复选框的 HTML 是：

<md-checkbox aria-label="Remove" aria-invalid="false" aria-checked="false" tabindex="0" class="ng-pristine ng-valid md-default-theme ng-touched" role="checkbox" ng-model="user.remove_photo" style="margin-top: 0px;">
  <div class="md-container" md-ink-ripple="" md-ink-ripple-checkbox="">
    <div class="md-icon"></div>
    <div class="md-ripple-container"></div>
  </div>
  <div ng-transclude="" class="md-label">
    <span class="ng-scope">Remove</span>
  </div>
</md-checkbox>

我的测试脚本：

require 'watir'
require 'watir-webdriver/wait'  

browser =  Watir::Browser.new :firefox 
browser.goto 'https://54.69.254.137/webui#/landing'
browser.driver.manage.window.maximize
browser.button(:class =>'sign-in md-button md-default-theme').click
browser.text_field(:id =>'input_001').set('abcadmin@example.com')
browser.text_field(:id =>'input_002').set('password')
browser.button(:class =>'md-primary md-raised md-button md-default-theme').click                  
browser.button(:class =>'md-icon-button md-primary main-menu-toggle md-button md-default-theme').when_present.click
browser.link(:text =>'Edit Profile').when_present.click
browser.checkbox(:class => 'ng-pristine ng-valid md-default-theme-ng-touched').set
browser.button(:class => 'md-primary md-raised md-button md-default-theme').click

给出以下错误：

unable to locate element using checkbox(:class => 'ng-pristine ng-valid md-default-theme- ng-touched').

Answer 1

复选框的问题在于它不是 HTML 复选框 - 即 <input type="checkbox">。相反，它是 md-checkbox，我相信它来自 Angular Material 库。结果，Watir 的 checkbox 方法将看不到它。

您需要将 md-checkbox 视为通用元素并使用点击方法 set/clear 它：

browser.element(class: 'ng-pristine ng-valid md-default-theme-ng-touched').click

class 属性看起来并不独特。您可能想改用其他属性之一。例如：

browser.element(aria_label: 'Remove').click

Setting/clearing AngularJS 带 Watir 的 md-checkbox

Setting/clearing AngularJS md-checkbox with Watir

ruby

watir

watir-webdriver