Cucumber/Capybara - 如何使用 XPath 搜索特定按钮？答案

【问题标题】：Cucumber/Capybara - How to search for a specific button using XPath?Cucumber/Capybara - 如何使用 XPath 搜索特定按钮？
【发布时间】：2011-04-22 09:40:06
【问题描述】：

我正在尝试弄清楚如何使用 Cucumber/Capybara 编写 oAuth/Twitter 登录功能。其中一部分包括访问页面：http://www.twitter.com/sessions/new 并填写用户名、密码，然后单击“登录”按钮。最后一步没有按预期工作，该页面的 html 代码如下所示（位于法语中）：

<fieldset class="textbox"> 
  <label class="username"> 
    <span>Nom d'utilisateur ou e-mail</span> 
    <input type="text" value="" name="session[username_or_email]" autocomplete="on" /> 
  </label> 
  <label class="password"> 
    <span>Mot de passe</span> 
    <input type="password" value="" name="session[password]" /> 
  </label> 
</fieldset> 
  <fieldset class="subchck"> 
  <button type="submit" class="submit button">Se connecter</button>

我在 web.steps 中定义了这样的步骤（请注意，我使用的不是默认的水豚驱动程序，而是capybara-mechanize）：

Given /^I sign in$/ do
    visit 'http://twitter.com/sessions/new'
    fill_in "Username or email", :with => 'xxx'
    fill_in "Password", :with => 'xxx'
    find(:xpath, 'button[@class="submit button"]')
    ....
end

find(:xpath,..) 行无法正常工作。我尝试输入“/s”（空格字符的正则表达式），但仍然收到此错误消息：

 Unable to find '//button[@class="submit\sbutton"]' (Capybara::ElementNotFound)

我也试过了：

xpath_for("submit button")

但是我得到一个堆栈级别太深的错误！

我对我的 regex/xpath 元素查找技能并不十分自信，所以请告诉我我的代码有什么问题以及如何找到该按钮？

非常感谢你帮助我！

[编辑]

原来默认选择器是 :css。我把它改成 :xpath:

Capybara.default_selector = :xpath

但它仍然没有解决我的问题。

【问题讨论】：

一个类不能包含空格，你有一个按钮元素，有两个类'submit'和'button'

标签： cucumber xpath capybara twitter-oauth

【解决方案1】：

如果你尝试怎么办

  click_on "Se connecter"

编辑：在 nokogiri 中尝试（因为水豚使用 nokogiri）当我按原样使用您的 HTML 时它对我不起作用（这意味着它甚至看不到文档中的元素）。但是，当我将所有内容都包含在一个根节点中时，它可以工作.. 不知道您的页面 HTML 是否有问题.. 对于格式良好的页面，它“应该”工作。不确定这有多大帮助

<html>
<fieldset class="textbox"> 
  <label class="username"> 
    <span>Nom d'utilisateur ou e-mail</span> 
    <input type="text" value="" name="session[username_or_email]" autocomplete="on" /> 
  </label> 
  <label class="password"> 
    <span>Mot de passe</span> 
    <input type="password" value="" name="session[password]" /> 
  </label> 
</fieldset> 
  <fieldset class="subchck"> 
  <button type="submit" class="submit button">Se connecter</button> 
</html>

有了这个 HTML，我可以使用 xpath

xpath('//button')

【讨论】：

谢谢。问题是页面上有很多按钮，但第一个是我想要点击的按钮。不知道在这种情况下会是什么行为。我试过了，我得到一个：堆栈级别太深（SystemStackError）错误。顺便说一句，我检查了一个格式良好的页面（访问 www.twitter.com/sessions/new 时得到的页面）。
我能建议的最后一件事是给你的按钮一个 id，然后按 id 搜索:(
我真希望我能 :) 但我必须向 Twitter 发送一张票 :)。
没有让你直接测试 twitter.. 看看这是否有帮助 selectorgadget.com
不错的工具。我得到了： //*[contains(concat( " ", @class, " " ), concat( " ", "button", " " ))] 并通过执行以下操作对其进行了测试： find(:xpath, "/ /*[包含（concat（\“\”，@class，\“\”），concat（\“\”，\“按钮\”，\“\”））]”）。它仍然没有找到它:(。这让我发疯了！无论如何，+1 寻求帮助，如果您对此有其他想法，请随时回来 :)。

【解决方案2】：

改为：

find(:xpath, 'button[@class="submit button"]')

你应该有：

find('button.submit.button')

上面是css，因为它是默认选择器。

如果您想要使用 XPath 的解决方案，请查看 https://stackoverflow.com/a/11752824/507018，但它更丑。

【讨论】：

【解决方案3】：

如果您与按钮类 <button class="submit button"> 完全匹配，则可以尝试以下操作：

find(:xpath, '//button[@class="submit button"]')

确保您没有忘记搜索字符串开头的双斜杠。

【讨论】：