在 Capybara-webkit 中进行条纹结帐填写表格

Question

我正在使用capybara-webkit 驱动程序进行启用 JS 的测试。但是，当我尝试填写条带结帐 iframe 的表单字段时，我无法在两个驱动程序中使用 capybara fill_in 助手来完成。 Selenium 驱动程序提供了有助于完成此任务的方法。

4.times {page.driver.browser.find_element(:id, 'card_number').send_keys('4242')}         
page.driver.browser.find_element(:id, 'cc-exp').send_keys '5'
page.driver.browser.find_element(:id, 'cc-exp').send_keys '18'
page.driver.browser.find_element(:id, 'cc-csc').send_keys '123'
page.driver.browser.find_element(:id,'billing-zip').send_keys '600004'

如果我使用fill_in 助手，我将无法完全输入详细信息。例如，对于 16 位卡号，输入字段仅填充 4 位数字，而在日期字段中，我只能输入月份而不是年份。

我想知道 webkit 驱动程序中是否有帮助我填写 Stripe 结帐表单中的表单。任何对此的注意都会很棒！提前致谢。

Answer 1

我在使用 Selenium 时遇到了类似的问题

find(:css, "input[id$='card_number']").set("4242 4242 4242 4242")
fill_in('card_number', with: "4242 4242 4242 4242")

停止工作。我之前有 find(:css, ...) ，几个月前它仍然有效，但我猜 checkout.js 的变化使它不再有效。在Capybara cannot fill Stripe Checkout.js fields 的帮助下，我设法让它工作了。这不是一个漂亮的（或真正的行为驱动的）解决方案，但它可以完成工作：

stripe_iframe = all('iframe[name=stripe_checkout_app]').last
Capybara.within_frame stripe_iframe do
  page.execute_script(%Q{ $('input#card_number').val('4242 4242 4242 4242'); })
  page.execute_script(%Q{ $('input#cc-exp').val('12/16'); })
  #rest of the Stripe-capybara
end

我不确定它是否适用于 Webkit。

Answer 2

Stripe 似乎更改了结帐元素上的 ID。许多具有与此处的其他一些示例不匹配的动态 ID。

对我有用的是通过占位符文本匹配元素。这是截至 2016 年 6 月 12 日的有效 sn-p：

stripe_card_number = '4242424242424242'

within_frame 'stripe_checkout_app' do
  find_field('Card number').send_keys(stripe_card_number)
  find_field('MM / YY').send_keys "01#{DateTime.now.year + 1}"
  find_field('CVC').send_keys '123'

  find('button[type="submit"]').click
end

page.has_content?('Success!', wait: 30)

Answer 3

为了完整起见，这里是工作代码。

    Capybara.within_frame stripe_iframe do
      page.find_field('Email').set 'foo@bar.com'
      page.find_field('Card number').set '4242 4242 4242 4242'
      page.find_field('MM / YY').set '12/42'
      page.find_field('CVC').set '123'
      find('button[type="submit"]').click
    end

您始终可以在 https://github.com/dblock/slack-gamebot/blob/master/spec/integration/update_cc_spec.rb

Answer 4

我遇到了完全相同的问题，发现以下解决方案适用于 capybara-webkit 以及 selenium-chrome：

page.find_field('Email').set "test@gmail.com"
page.find_field('Card number').set ('4242424242424242')

这里的“电子邮件”和“卡号”是占位符。它以这种方式工作并且不适用于find('#email') 的原因是因为页面上没有 id='email' 的元素。 Capybara 正确地找不到这个元素，它不存在很多次。没有元素的原因是因为有时会在没有正确 id 的情况下渲染条带的 iframe，如下所示： element-with-dynamic-id

find_field 按 id、name 或 placeholder 搜索，在这种情况下，placeholder 是唯一在两种情况下都不会改变的属性，并且可以被 capybara 找到（例如，“type”不会也可以更改，但我找不到按类型进行水豚搜索的方法，而且测试的可读性也会大大降低）。

为什么 Stripe 的 iframe 有时会错过这些正确的 id 并用动态 id 替换它们？不知道。

Answer 5

如果您在 iframe 中使用 Stripe（可能是 https://www.paymentiframe.com/？），您应该能够使用 Capybara 的 within_frame 方法将测试范围更改为框架：

within_frame('stripe-iframe') do
    fill_in 'card_number', :with => '4242'
end

如果你给你的 iframe 一个名字（在那个例子中是stripe-iframe），那么应该这样做。

希望对您有所帮助！

Answer 6

我使它类似于@humpah，但没有邪恶的 JS 代码。

form_iframe = all('iframe.wysihtml5-sandbox').last
within_frame form_iframe do
  page.find('body').set('SomeContent')
end