xpath selector of jquery ui datepicker

StackOverflow https://stackoverflow.com/questions/4159019

  •  08-10-2019
  •  | 
  •  

Question

My page has a jquery ui datepicker on an input field #graph_start_date

I'm trying to write the following Cucumber steps

When I click the graph start date
Then I should see a datepicker

Here's what I have for the step definitions:

When /I click the graph start date/ do
  find(".//*[@id='graph_start_date']").click
end

Then /^I should see a datepicker$/ do
  page.should have_xpath(".//div[@id='ui-datepicker-div' and ?????????]")
end

The jquery ui datepicker initially inserts into the dom

<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" id="ui-datepicker-div"></div>

When its popped up the dom contains

<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" id="ui-datepicker-div" style="position: absolute; top: 523px; left: 167.5px; z-index: 1;">

After its dismissed the dom contains

<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" id="ui-datepicker-div" style="position: absolute; top: 523px; left: 167.5px; z-index: 1; display: none;">
Was it helpful?

Solution

There is the :visible => true option which is documented in Capybara::Node::Matchers#has_xpath? so:

Then /^I should see a datepicker$/ do
  page.should have_xpath(".//div[@id='ui-datepicker-div']", :visible => true)
end

However, this may be a different problem but for me the datepicker does not appear at all when the capybara driven browser does not have focus, and so my test fails (sometimes)!

EDIT:

First of all it seems that the datepicker does not actually want a click on the field to trigger but a focus which unfortunately is unsupported by capybara's selenium driver and it does not trigger when you trigger a click but the browser has no focus.

The correct way to trigger the focus would be:

find(".//div[@id='ui-datepicker-div']").trigger('focus')

but that raises a Capybara::NotSupportedByDriverError :(

To workaround you can use the hackish:

When /I focus the graph start date/ do
  page.execute_script("$('#graph_start_date').focus()")
end

(thanks to: http://groups.google.com/group/ruby-capybara/msg/af6caeef01d978b0)

There are various discussions and relevant issues on this in Google Groups:

OTHER TIPS

I would just run some javascript which #focuses the field, clicks 1 of the anchors... then let capybara make sure the right value is in the field.

I was running into the same problem this morning, and here's how I fixed it.

In my feature file

@javascript # You need this javascript tag 
Scenario:Adding a date to a job 
  When I go to enter a date 
  Then I should see a date picker appear

In my step definitions:

When /^ I go to enter a date$/ do 
  element = find_by_id("you_date_field_id") 
  element.click 
end

The /^I should see a date picker appear$/ do 
  date = find(:xpath, "//div[@id='ui-datepicker-div']") 
end

Hope this helps

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top