Как выбрать DatePicker с помощью страницы-объекта-Gem и jqueryui_widgets

Question

Я пытаюсь использовать jqueryui_widgets в сочетании с page-object-gem для проверки средства выбора даты, но мне не удается выполнить первый шаг.

  on(HasADatepickerPage).the_datepicker = date

Я получаю эту ошибку:

Watir::Exception::ObjectReadOnlyException: object is read only {:id=>"datepicker", :tag_name=>"input or textarea", :type=>"(any text type)"}
./features/step_definitions/datepicker_steps.rb:8:in `/^I enter the date "([^\"]*)"$/'
./features/has_a_datepicker.feature:8:in `When I enter the date "10/05/2015"'

has_a_date_picker_page.rb (пример jqueryui_widgets datepicker_page.rb)

class HasADatepickerPage
  include PageObject

  jqueryui_datepicker(:the_datepicker, :id => 'datepicker')

end

Вопросы:

1. Что мне нужно сделать до этого (HasADatepickerPage).the_datepicker = date?
2. Что мне нужно сделать до (HasADatepickerPage).the_datepicker_select_day день?

Я клонировал проект jqueryui_widgets, запустил тестирование функции datepicker, работает отлично. Я смоделировал свое решение как можно ближе к нему.

Я включил фрагменты со своей html-страницы и остальные детали славы, о которых я мог подумать ниже.

Спасибо Тим

Гори Детали

html vs моего сайта (пример jqueryui_widgets datepicker.html)

<div class="forms">
<div class="ajaxformitem" rel="Please select the number of passengers traveling">
<div class="ajaxformitem" rel="Please Enter the Date of Travel" style="background: transparent none repeat scroll 0% 0%;">
<div class="ajaxformitemleft">
<div class="ajaxformitemright">
<input id="datepicker" class="corner required hasDatepicker" type="text" placeholder="Pick Up Date" value="" readonly="true" name="PickUpTime[Date]"/>
<select id="hour" class="corner required" name="PickUpTime_Hour">
<select id="minute" class="corner required" name="PickUpTime[Mnute]">
</div>
</div>

щ-DatePicker-ДИВ:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 199px; left: 635.5px; z-index: 12; display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<a class="ui-datepicker-prev ui-corner-all" title="Prev" onclick="DP_jQuery_1440799766008.datepicker._adjustDate('#datepicker', -1, 'M');">
<a class="ui-datepicker-next ui-corner-all" title="Next" onclick="DP_jQuery_1440799766008.datepicker._adjustDate('#datepicker', +1, 'M');">
<div class="ui-datepicker-title">
</div>
<table class="ui-datepicker-calendar">
<thead>
<tbody>
</table>
</div>

has_a_datepicker.feature - так же, как пример

Feature: Using the JQueryUI Datepicker widget

  Background:
    Given I am on the has datepicker page


  Scenario: Testing datepicker jqueryui_widgets
    When I enter the date "10/05/2015"
    And I select day "25"
    Then the date should be "10/25/2015"

datepicker_steps.rb - the_datepicker против (datepicker_one и datepicker_two)

Given(/^I am on the has datepicker page$/) do
  visit(HomePage)
  on(HomePage).select_radio_for 'From'
  on(HomePage).select_service 'Airport'
end

When(/^I enter the date "([^\"]*)"$/) do |date|
  on(HasADatepickerPage).the_datepicker = date
end

And(/^I select day "(\d+)"$/) do |day|
  on(HasADatepickerPage).the_datepicker_select_day day
end

Then(/^the date should be "([^\"]*)"$/) do |day|
  #on(DatepickerPage).datepicker_one.should == day
  expect(on(HasADatepickerPage).the_datepicker).to eql day
end

Answer 1

Выбор даты

Если вы посмотрите на методы выбора даты, все взаимодействия с календарем предполагают, что календарь уже отображается. Если вы посмотрите на тест (особенности) драгоценного камня, вы увидите, что он всегда вводил текстовое поле первым, что открывает календарь. Только после этого тесты пытаются взаимодействовать с календарем.

Однако, так как ваше текстовое поле доступно только для чтения, вы не можете ввести текстовое поле, чтобы вызвать всплывающее окно. В результате вам нужно нажать на текстовое поле. Аксессор DatePicker создает {name}_element метод доступа к текстовому полю. Поэтому вы можете сделать:

page.the_datepicker_element.click
page.the_datepicker_select_day('15')

Установка даты

{name}= метод для прямой установки даты не будет работать для вашего контроля. Метод просто вводит текстовое поле, которое только для чтения недопустимо.

Похоже, у вас есть 2 варианта:

1. Нажимайте на элементы управления "Следующий / предыдущий месяц", пока не получите правильный месяц, а затем выберите день.
2. Используйте JavaScript для непосредственного ввода текстового поля.

Если только нет событий, которые приложение вызывает при вводе даты, я бы предложил использовать вариант 2. Это быстрее и менее подвержено ошибкам. Хотя это не имитирует пользователя, тестирование взаимодействий внутри виджета jQuery не должно быть вашей обязанностью.

date = '08/13/2015'
page.execute_script("arguments[0].value='#{date}';", page.the_datepicker_element)

Если вы действительно хотите ввести значение как пользователь:

# These libraries are added to help with doing date comparisons
require 'date'
require 'active_support/time'

# The date you want to set
date = '12/13/2015'

# Open the calender
page.the_datepicker_element.click

# Determine if we need to navigate to a prior or future month
final_date = Date.strptime(date, '%m/%d/%Y')
current_date = Date.strptime(
    "#{page.the_datepicker_month} #{page.the_datepicker_year}",
    '%B %Y'
)
difference = (final_date.year * 12 + final_date.month) - (current_date.year * 12 + current_date.month)

# Navigate to the required month/year
if difference < 0
    difference.abs.times { page.the_datepicker_previous_month }
else
    difference.abs.times { page.the_datepicker_next_month }
end

# Select the day
page.the_datepicker_select_day(final_date.day.to_s)

Как вы можете видеть, необходимость нажимать следующий / предыдущий элемент управления добавляет много сложности.

Answer 2

Ваш UI-DatePicker-DIV имеет: <input id="datepicker" readonly="true">Watir не позволит вам отправить текст на элемент, который установлен только для чтения. Удалите этот атрибут, и это должно работать.