Rails + Capybara + Braintree—how to feature test BT's Hosted Fields?

Question

TL;DR— How do I access fields within Braintree's Hosted Fields' iframes?

I want to test a UX flow of paying a donation through Braintree. This is my code so far:

require "rails_helper"

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

  scenario "Public visitor creates a new donation" do
    #load page
    website = create(:website)
    Capybara.current_session.driver.header 'Referer', website.website
    visit "/donate?t=#{website.public_token}&frame=1"
    #verify page 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']").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: 'new_donor@email.com'

    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, email receipt
  end
end

Currently, it's breaking at the first within_frame saying Capybara::NotSupportedByDriverError: Capybara::Driver::Base#within_frame

How do I access fields inside BT's iframes?

Answer 1

Seems like you're using the rack_test driver? That doesn't support JS or frames so braintree isn't going to work with that. You need to switch to one of the real browser drivers like selenium, capybara-webkit, or poltergeist.

Answer 2

Well, I am writing here not exactly an answer to this question, but rather corrections to the question, as I was in the similar situation and was facing similar errors such as Selenium::WebDriver::Error::NoSuchFrameError: Unable to locate frame: #braintree-hosted-field-number and Test::Unit::Capybara::ElementNotFound: Unable to find field "#credit-card-number" .

The within_frame should have the following format (the #-sign for ID should be removed from both):

within_frame('braintree-hosted-field-number') do
  fill_in 'credit-card-number', :with => number
end

And in order to use the selenium driver in Test::Unit, I used the following helper:

def js
  Capybara.current_driver = Capybara.javascript_driver
  yield
  Capybara.current_driver = Capybara.use_default_driver
end

And then wrapped my tests in it:

class SomeTest < ActionDispatch::IntegrationTest
  test "should ..." do
    js do
      within_frame('braintree-hosted-field-number') do
        fill_in 'credit-card-number', :with => number
      end
      # ...
    end
  end

Hopefully, someone will find it useful while using Unit Tests.