Geb -如何删除Geb中的属性

Question

我想为一个数据报警器设置值，它有属性“readonly”。我尝试removeAttr()删除该属性，但得到了如下错误：

捕捉: groovy.lang.MissingMethodException:没有方法的签名: geb.navigator.NonEmptyNavigator.removeAttr()适用于参数类型：(java.lang.String)值: readonly

如何删除Geb中的属性？

南方代码：

<input ng-show="!date" class="ui-form-control ng-isolate-scope" name="date" placeholder="StartTime" ui-datepicker-trigger="" selected-date="date" readonly="readonly" type="text">

我的geb代码：

$('input', placeholder: 'StartTime').removeAttr('readonly')

谢谢大家

Answer 1

因为OP说它是一个AngularJS数据报警器，我从来没有任何接触过角，我自己不是一个前端的家伙，我想学习一些东西，现在我与你分享，因为它是值得的。

这里是一个Geb测试，它不使用任何JS，而是纯粹通过Geb或Selenium从角数据采集器收集信息并与之交互。测试显示了如何

1. 通过myNavigator.singleElement().getAttribute("value")从datepicker的文本字段获取当前选定的日期(也适用于非活动控件)，
2. 通过打开“数据报警器”并在日历中找到突出显示的日期来获取当前选定的日期(当然，仅适用于活动控件)，
3. 通过选择当前的圣诞日(12月25日)，与数据报警器进行比较乏味的交互
   • 打开数据录音机，
   • 单击当前月份以打开年份选择器，
   • 单击12月，有效地再次关闭月份选择器，
   • 点击第25天，有效地关闭数据报警器，
   • 最后，通过读取文本标签来检查是否设置了正确的日期，就像在示例1中一样。

​

页面：

package de.scrum_master.stackoverflow

import geb.Page
import geb.navigator.Navigator

import java.time.Month
import java.time.format.TextStyle

import static java.util.Calendar.*

class DatePickerPage extends Page {
  static url = "https://material.angularjs.org/1.1.2/demo/datepicker"
  static at = { heading == "Datepicker" }
  static now = new GregorianCalendar()

  static content = {
    heading { $("h2 > span.md-breadcrumb-page.ng-binding").text() }
    datePickerButtons { $("md-datepicker > button") }
    datePickerInputFields { $(".md-datepicker-input") }
    activeDatePicker(required: false) { $(".md-datepicker-calendar-pane.md-pane-open") }
    selectedDate { activeDatePicker.$(".md-calendar-selected-date") }
    currentMonthLabel {
      activeDatePicker
        .$("td.md-calendar-month-label", text: "${getMonthShort(now)} ${now.get(YEAR)}")
    }
    selectedMonth(required: false) { $("td.md-calendar-selected-date") }
  }

  String getDatePickerValue(Navigator datePickerInputField) {
    datePickerInputField.singleElement().getAttribute("value")
  }

  Navigator getMonthLabel(Calendar calendar) {
    $(".md-calendar-month-label", text: "${calendar.get(YEAR)}").closest("tbody")
      .$("span", text: getMonthShort(calendar)).closest("td")
  }

  Navigator getDayOfMonthLabel(Calendar calendar) {
    activeDatePicker
      .$(".md-calendar-month-label", text: "${getMonthShort(calendar)} ${calendar.get(YEAR)}")
      .closest("tbody")
      .$("span", text: "${calendar.get(DAY_OF_MONTH)}")
      .closest("td")
  }

  String getMonthShort(Calendar calendar) {
    Month
      .of(calendar.get(MONTH) + 1)
      .getDisplayName(TextStyle.FULL, new Locale("en"))
      .substring(0, 3)
  }
}

测试：

package de.scrum_master.stackoverflow

import geb.module.FormElement
import geb.spock.GebReportingSpec
import spock.lang.Unroll

import static java.util.Calendar.*

class DatePickerIT extends GebReportingSpec {
  def now = new GregorianCalendar()
  def xmas = new GregorianCalendar(now.get(YEAR), 12 - 1, 25)

  @Unroll
  def "Get selected date from Angular date label"() {
    when: "a date picker on the Angular demo page is chosen"
    DatePickerPage page = to DatePickerPage
    def datePickerInputField = page.datePickerInputFields[datePickerIndex]

    then: "that date picker instance is (in-)active as expected"
    datePickerInputField.module(FormElement).enabled == isEnabled

    when: "the active date is read from the date picker's text input field"
    String activeDateString = page.getDatePickerValue(datePickerInputField)
    String todayString = "${now.get(MONTH) + 1}/${now.get(DAY_OF_MONTH)}/${now.get(YEAR)}"

    then: "it is today"
    todayString == activeDateString

    where:
    datePickerIndex << [0, 1, 2, 3, 4, 5, 6, 7, 8]
    isEnabled << [true, false, true, true, true, true, true, true, true]
  }

  @Unroll
  def "Get selected date from opened Angular date picker"() {
    when: "a date picker on the Angular demo page is chosen"
    DatePickerPage page = to DatePickerPage
    def datePickerButton = page.datePickerButtons[datePickerIndex]

    then: "that date picker instance is active (not greyed out)"
    datePickerButton.module(FormElement).enabled

    when: "the calendar button for the date picker is clicked"
    datePickerButton.click()

    then: "the date picker pop-up opens, displaying the current month"
    waitFor 3, { page.activeDatePicker.displayed }

    when: "the active date's timestamp is read from the highlighted day in the calendar"
    def selectedDateMillis = page.selectedDate.attr("data-timestamp") as long
    def sinceMidnightMillis = now.getTimeInMillis() - selectedDateMillis

    then: "it is today"
    sinceMidnightMillis >= 0
    sinceMidnightMillis < 24 * 60 * 60 * 1000

    where:
    datePickerIndex << [0, 2, 4, 5, 6, 7, 8]
  }

  def "Set date in Angular date picker"() {
    when: "the first date picker's calendar button on the Angular demo page is clicked"
    DatePickerPage page = to DatePickerPage
    page.datePickerButtons[0].click()

    then: "the date picker pop-up opens, displaying the current month"
    waitFor 3, { page.activeDatePicker.displayed }

    when: "the current month label is clicked"
    page.currentMonthLabel.click()

    then: "the month selection page opens"
    waitFor 3, { page.selectedMonth.displayed }
    page.selectedMonth.text() == page.getMonthShort(now)

    when: "December for the current year is selected"
    page.getMonthLabel(xmas).click()

    then: "the month selection page closes again"
    waitFor 3, { !page.selectedMonth.displayed }

    when: "Xmas Day (25) is selected on the month calendar"
    page.getDayOfMonthLabel(xmas).click()

    then: "the date picker pop-up closes again"
    waitFor 3, { !page.activeDatePicker.displayed }

    when: "the active date is read from the date picker's text input field"
    String activeDateString = page.getDatePickerValue(page.datePickerInputFields[0])
    String xmasDayString = "${xmas.get(MONTH) + 1}/${xmas.get(DAY_OF_MONTH)}/${xmas.get(YEAR)}"

    then: "it is Xmas Day of the current year"
    xmasDayString == activeDateString
  }

}

这种方法的优点是显而易见的:您只能以用户也可以这样做的方式与页面交互，从而避免以用户无法操作的方式操作页面(这将导致错误的测试)。

更新：I将代码重构为使用页面对象。

Answer 2

WebDriver和Geb不允许直接修改DOM。

您需要通过js对象使用javascript来完成这一任务，如果您的页面加载了jQuery，这将更加容易，这要归功于Geb的jQuery集成。

Answer 3

使用以下代码解决问题：

js.exec(
  "document.getElementsByClassName('ui-form-control ng-isolate-scope')[0]" + 
  ".removeAttribute('readonly')"
)