Capybara Webkit + Braintree—"Unable to locate frame"

Question

I'm trying to access Braintree's hosted fields with the following code:

within_frame('braintree-hosted-field-number') do
  fill_in 'Credit card number', with: '4111-1111-1111-1111'
end

The frame's name is correct, I copied it from the inspect panel on Chrome. But I get this error

Capybara::Webkit::InvalidResponseError:
   Unable to locate frame.

What am I doing wrong? Or, more importantly, how do I debug this/see what's going on?

---

Edit

Here is my code, as requested. Note that the whole system works fine if I go through and manually fill out the fields and submit the form.

Slim

= f.fields_for :user do |u|
    .control-group.col-24.payment-details
      label.half
        .field-title First Name
        = u.text_field :first_name
      label.half
        .field-title Last Name
        = u.text_field :last_name
      label.full
        .field-title Email for receipt
        = u.email_field :email
      label.full
        .field-title Credit card number
        .bt-field#credit-card
      label.half
        .field-title Expiry date
        .bt-field#exp-card
      label.half
        .field-title CVC
        .bt-field#cvv-card

script src="https://js.braintreegateway.com/js/braintree-2.24.0.min.js"

CoffeeScript

braintree.setup(clientToken, "custom", {
          id: "donate-form",
          onPaymentMethodReceived: (obj)->
            formdata = donationForm.getFormData()
            formdata.set "payment_method_nonce", obj.nonce
            donationForm.send(formdata)
          onError: (obj)->
            errors = []
            switch obj.type
              when "VALIDATION"
                errors.push "Invalid payment details. Please correct your payment details."
              else
                errors.push "Something went wrong. Please check your payment details and try again."
            donationForm.printErrors("donation-errors", errors)
          hostedFields: {
            styles: {
            "input": {
              "font-size": "14px",
              "font-weight": "bold",
              "font-family": "Lato, Helvetica, Arial, Geneva, sans-serif",
              "color": "#464646;",
              "transition": colorTransition,
              "-webkit-transition": colorTransition
              },
            ".invalid": { color: "#DD0000"} },
            number: {selector: "#credit-card"},
            cvv: {selector: "#cvv-card"},
            expirationDate: {selector: "#exp-card", "placeholder": "dd/mm"}
          }
        })

Edit 2

donation_module_spec.rb

require "rails_helper"

RSpec.feature "Donation Module", type: :feature do

  scenario "Wrong public token" do
    visit "/donate?t=BAD_URL&frame=1"
    expect(page).to have_content("Are you sure you're installing this on the correct website?")
  end

  scenario "Public visitor creates a new donation", driver: :webkit do

    #load page
    website = create(:website)
    page.driver.header 'Referer', website.website
    visit "/donate?t=#{website.public_token}&frame=1"

    #verify page 1 loaded
    expect(page).not_to have_content("Are you sure you're installing this on the correct website?")

    #fill page 1
    find("input[value='20'] ~ div").click

    #go to page 2
    find("#credit-details").click

    #verify page 2 content is loaded
    expect(find(".total-cost-text")).to be_visible

    #fill page 2
    fill_in 'First Name', with: 'Leeroy'
    fill_in 'Last Name', with: 'Jenkins'
    fill_in 'Email for receipt', with: '[email protected]'

    sleep 5
    within_frame('braintree-hosted-field-number') do
      fill_in 'Credit card number', with: '4111-1111-1111-1111'
    end

    within_frame('#braintree-hosted-field-expirationDate') do
      fill_in '#expiration', with: '09/19'
    end

    within_frame('#braintree-hosted-field-cvv') do
      fill_in '#cvv', with: '123'
    end
    find('Make payment').click


    # expect to make a new user, new donation, new receipt, emailed receipt
  end
end

rails_helper.rb Modified to show only the related parts:

require 'capybara/rails'
require 'capybara/rspec'

Capybara::Webkit.configure do |config|
  config.allow_url("js.braintreegateway.com")
  config.allow_url("fonts.googleapis.com")
  config.allow_unknown_urls
  config.debug = true
end

RSpec.configure do |config|
  config.fixture_path = "#{::Rails.root}/spec/fixtures"
  config.use_transactional_fixtures = false

Answer 1

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

I don't have an answer for you as to why this might be happening, copying your setup I'm able to get it to work. I do have a couple of additional thoughts that may help.

1) Take a look at the debug output (looks like you already have this enabled with config.debug = true) and make sure there are no errors. Here are the relevant parts of my output -

"Visit(http:/localhost:3000/hostedfields_payment)" started page load 
Started request to "http://localhost:3000/hostedfields_payment" 
Finished "Visit(http:/localhost:3000/hostedfields_payment)" with response "Success()" 
Started request to "https://js.braintreegateway.com/js/braintree-2.17.5.js" 
Started request to "https://api.sandbox.braintreegateway.com/merchants/-/client_api/v1/configuration?-
Received 200 from "https://api.sandbox.braintreegateway.com/merchants/-/client_api/v1/configuration?- 
Received "FrameFocus(braintree-hosted-field-number)" 
Load started 
Started request to "https://assets.braintreegateway.com/hosted-fields/2.17.5/hosted-fields-frame.html#91586a91-c55f-4e51-80e6-7cd750f9c750" 
Started request to "https://assets.braintreegateway.com/hosted-fields/2.17.5/hosted-fields-frame.html#91586a91-c55f-4e51-80e6-7cd750f9c750" 
Started request to "https://assets.braintreegateway.com/hosted-fields/2.17.5/hosted-fields-frame.html#91586a91-c55f-4e51-80e6-7cd750f9c750" 
"TimeoutCommand" waiting for load to finish  
Started request to "https://assets.braintreegateway.com/hosted-fields/2.17.5/braintree-hosted-fields-internal.min.js" 
Received 200 from "https://assets.braintreegateway.com/hosted-fields/2.17.5/hosted-fields-frame.html#91586a91-c55f-4e51-80e6-7cd750f9c750" 
Received 200 from "https://assets.braintreegateway.com/hosted-fields/2.17.5/hosted-fields-frame.html#91586a91-c55f-4e51-80e6-7cd750f9c750" 
Received 200 from "https://assets.braintreegateway.com/hosted-fields/2.17.5/hosted-fields-frame.html#91586a91-c55f-4e51-80e6-7cd750f9c750" 
Received 200 from "https://assets.braintreegateway.com/hosted-fields/2.17.5/braintree-hosted-fields-internal.min.js" 
Page finished with true 
Load finished 
Started "FrameFocus(braintree-hosted-field-number)"
Finished "FrameFocus(braintree-hosted-field-number)" with response "Success()" 
Wrote response true "" 
Received "FindCss(input#credit-card-number)" 
Started "FindCss(input#credit-card-number)" 
Finished "FindCss(input#credit-card-number)" with response "Success()" 

2) A gnarly way you could check is at the end your sleep 5, print the body to a file and open it up. You can check that the iframes exist.

File.open("looking_for_iframes.html", "w") do |file|
  file.print(page.body)
end

Otherwise feel free to reach out to Braintree Support.