jquery ui datepicker 的 xpath 选择器

发布于 2024-10-02 12:29:29 字数 1197 浏览 3 评论 0原文

我的页面在输入字段 #graph_start_date 上有一个 jquery ui datepicker

我正在尝试编写以下 Cucumber 步骤

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

以下是我对步骤定义的内容：

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

jquery ui datepicker 最初插入 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>

当它弹出时，dom 包含

<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;">

在其之后驳回了 dom 包含的内容

<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;">

原文

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;">

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半葬歌 2024-10-09 12:29:29

有 :visible =>; true 选项记录在 Capybara::Node::Matchers#has_xpath? 中，所以：

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

但是，这可能是一个不同的问题，但对我来说，当水豚时，日期选择器根本不会出现驱动浏览器没有焦点，所以我的测试失败（有时）！

编辑：

首先，日期选择器实际上并不希望单击该字段来触发，而是希望触发一个焦点，不幸的是，水豚的硒驱动程序不支持该焦点，并且当您触发单击时它不会触发，但是浏览器没有焦点。

触发焦点的正确方法是：

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

但这会引发 Capybara::NotSupportedByDriverError :(

要解决此问题，您可以使用hackish：

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

（感谢：< a href="http://groups.google.com/group/ruby-capybara/msg/af6caeef01d978b0" rel="nofollow">http://groups.google.com/group/ruby-capybara/msg/af6caeef01d978b0< /a>)

Google 网上论坛对此有各种讨论和相关问题：

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:

回复收藏 0 原文

尤怨 2024-10-09 12:29:29

我只需运行一些 javascript，#focuses 字段，单击 1 个锚点...然后让水豚确保字段中的值正确。

回复收藏 0 原文

ら栖息 2024-10-09 12:29:29

今天早上我遇到了同样的问题，这就是我解决它的方法。

在我的功能文件中

@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

在我的步骤定义中：

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

希望这有帮助

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

回复收藏 0 原文

~没有更多了~