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

停止了工作。我之前找到了（：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日的工作片段：

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正确找不到这个元素，它不存在很多次。没有元素的原因是因为有时条纹的iframe被渲染而没有正确的id，如下所示： element-with-dynamic-id

find_field按ID，名称或占位符进行搜索，在这种情况下，占位符是唯一在两种情况下都不会发生变化且属于capybara的属性（例如“类型”不会也不会改变，但我找不到按类型进行水豚搜索的方法，而且测试的可读性也会低得多。

为什么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

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

6 个答案: