Testing Authentication with Capybara and Real Email Addresses

Capybara is a popular acceptance testing framework for Ruby and Rails. It can be used to test applications end-to-end with BDD (behavior driven design) frameworks such as Cucumber. When used with MailSlurp one can test applications using real email addresses. This can allow us to test user sign-up, email verification, authentication and more. In this post we'll show you how to set up Capybara tests with Selenium for a demo app hosted at playground.mailslurp.com.

View full example project code on Github

Demo app authentication

To test a real application we will use a simple React app deployed to playground.mailslurp.com. The app let's users sign up using an email address and password. Once the details are submitted an email is sent to the user contain a verification code. This code must be extracted and submitted to the app to confirm the user's account. Upon confirmation the user may then login and see a picture of a happy dog.

Setting up Capybara and Cucumber

Let's get started. First creata a new directory and cd into it.

mkdir capybara_tests && cd $_

Next we will scaffold the project using bundler. Install bundler by running gem install bundler.

Add dependencies

Run bundle init to create a Gemfile for our project. Next we can add dependencies.

bundle add capybara
bundle add cucumber
bundle add mailslurp_client
bundle add selenium-webdriver
bundle add rspec
bundle add typhoeus

Our Gemfile should now look something like this:

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

# gem "rails"

gem "mailslurp_client", "~> 11.5"

gem "capybara", "~> 3.35"

gem "selenium-webdriver", "~> 3.142"

gem "cucumber", "~> 5.3"

gem "typhoeus", "~> 1.4"

gem "rspec", "~> 3.10"

Create cucumber features

In order to test our application sign-up flow we will write Cucumber features and run them with Capybara. We can use bundle to setup our features.

$ bundle exec cucumber --init
> create   features
> create   features/step_definitions
> create   features/support
> create   features/support/env.rb

The features directory will contain our .feature files and the step_definitions folder will contain Capybara Ruby code. Let's create a feature describing the sign-up process in a BDD way. Let's call our file sign_up.feature.

@selenium
Feature: User authentication with verification

Testing an application with real email addresses

  Scenario: Sign up and confirm account
    Given a user has an email address and loads the app
    When user signs up with email address and password
		Then they receive a confirmation code and can confirm their account

Add Capybara support

Next we can enable Capybara by editing features/support/env.rb and adding this code:

require 'capybara' 
require 'capybara/dsl' 
require 'capybara/cucumber'
require 'selenium-webdriver'

Capybara.configure do |config|
  config.default_driver = :selenium
  config.app_host   = 'https://playground.mailslurp.com'
end

World(Capybara)

While we are at it, create a cucumber.yml file in the root directory and add:

default: --publish-quiet

This will result in nicer output when we run out tests. Speaking of which let's write the step definitions to link our feature statements with actual code.

Create step definitions

Create a new file at features/step_definitions/sign_up_steps.rb and add methods for each When, Given, and Then statement in our feature file.

Given /a user has an email address and loads the app/ do
  pending 
end

When /user signs up with email address and password/ do
  pending 
end

Then /they receive a confirmation code and can confirm their account/ do
  pending 
end

See how each method matches a line in our feature scenario? Inside the functions is where we will write the test logic.

Creating test email accounts

Let's take our Given a user has an email address and loads the app statement and turn that into code. We will use MailSlurp to create a real email address.

Configure MailSlurp

In our sign_up_steps.rb we can require the mailslurp_client gem and configure the client. MailSlurp is free to use but we need an API Key to call it. Create a free account to obtain an API Key.

Now we can configure MailSlurp in our step definitions like so:

require 'mailslurp_client'

# configure the mailslurp client with an API Key
MailSlurpClient.configure do |config|
  api_key = ENV['API_KEY']
  if api_key == "" or api_key == nil then
    raise "No API_KEY environment variable set for MailSlurp API KEY"
  end
  config.api_key['x-api-key'] = api_key
end

# have a nil inbox ready for later
inbox = nil

Now when we run our tests we can pass our MailSlurp API key as an environment variable.

API_KEY=your-api-key bundle exec cucumber

Generate test inboxes

Now for the first Given statement of our feature we want to create an email address. In MailSlurp one can create inboxes on demand that have an id and an email_address. Emails received by these inboxes can be fetched later using the client. Here is how we create one:

inbox_controller = MailSlurpClient::InboxControllerApi.new
inbox = inbox_controller.create_inbox

Putting this together for the first step we can then load the application using Capybara.

Given /a user has an email address and loads the app/ do
  # create a test email account for the user
  inbox_controller = MailSlurpClient::InboxControllerApi.new
  inbox = inbox_controller.create_inbox

  # load the playground application
  visit '/'
  expect(page).to have_title 'React App'
end

Notice we assigned the inbox to a global variable that we can use later. When we run the tests with API_KEY=your-mailslurp-key bundle exec cucumber we should see one passing test.

Using the default profile...
@selenium
Feature: User authentication with verification
Testing an application with real email addresses

  Scenario: Sign up and confirm account                                 # features/sign_up.feature:6
    Given a user has an email address and loads the app                 # features/step_definitions/sign_up_steps.rb:14
    When user signs up with email address and password                  # features/step_definitions/sign_up_steps.rb:24
    Then they receive a confirmation code and can confirm their account # features/step_definitions/sign_up_steps.rb:28

1 scenario (1 pending)
3 steps (1 skipped, 1 pending, 1 passed)
0m4.189s

The When and Then statements are still pending so let's write those now.

Testing user signup

To test the user sign up process we can implement the second feature statement.

When /user signs up with email address and password/ do
  # click the sign up link
  find('[data-test="sign-in-create-account-link"]').click

  # fill out the form
  within('[data-test="sign-up-body-section"]') do
    fill_in 'email', with: inbox.email_address
    fill_in 'password', with: 'test-password'
  end

  # click submit and wait for confirm page to load
  find('[data-test="sign-up-create-account-button"]').click
  find('[data-test="confirm-sign-up-body-section"]').visible?
end

Here we find elements using CSS selectors for data-test attributes we placed on elements of our React App - you can query the page however you wish. Next we fill out the sign up form uusing the email address we created with our inbox and a test password. Lastly we submit the form and wait for the confirmation page to load.

Our next step will be to receive the verification code to the user's email address and extract the code. We will do that in the following section.

Receive email in Ruby tests and read contents

The final statement in our feature file says Then they receive a confirmation code and can confirm their account. This means we need to receive the email in code and parse the contents for the verification code. The email looks like this:

The body of the email contains a 6 digit code we want to extract.

Waiting for latest email

Use MailSlurp's WaitForControllerApi to wait for the latest unread email in the user's inbox.

# wait for first unread email to arrive in user's inbox
wait_controller = MailSlurpClient::WaitForControllerApi.new
email = wait_controller.wait_for_latest_email({ inbox_id: inbox.id, unread_only: true, timeout: 30_000 })

# assert the email is a confirmation 
expect(email.subject).to include("Please confirm your email address")

Extract content

We can use a regular expression to match for the confirmation code like this:

# extract a 6 digit code from the email body
match = email.body.match(/code is ([0-9]{6})/)
if match == nil then
  raise "Could not find match in body #{email.body}"
end
code, * = match.captures

expect(code).to be_truthy

Let's put these methods to use in our last feature statement.

Confirming a user account and logging in

The final step for our test is to receive the confirmation code, extract and submit it, then login to the app and see a dog.

Then /they receive a confirmation code and can confirm their account/ do
  # wait for first unread email to arrive in user's inbox
  wait_controller = MailSlurpClient::WaitForControllerApi.new
  email = wait_controller.wait_for_latest_email({ inbox_id: inbox.id, unread_only: true, timeout: 30_000 })

  # assert the email is a confirmation 
  expect(email.subject).to include("Please confirm your email address")

  # extract a 6 digit code from the email body
  match = email.body.match(/code is ([0-9]{6})/)
  if match == nil then
    raise "Could not find match in body #{email.body}"
  end
  code, * = match.captures

  expect(code).to be_truthy

  # submit confirmation code
  within('[data-test="confirm-sign-up-body-section"]') do
    fill_in 'code', with: code
  end
  find('[data-test="confirm-sign-up-confirm-button"]').click

  # load the main page again
  visit '/'

  # login and see a welcome
  fill_in 'username', with: inbox.email_address
  fill_in 'password', with: "test-password"
  find('[data-test="sign-in-sign-in-button"]').click

  # wait for welcome to load
  expect(find('h1', wait: 30).text).to include("Welcome")
end

And voila: running API_KEY=your-mailslurp-api-key bundle exec cucumber we see 3 passed tests.

Using the default profile...
@selenium
Feature: User authentication with verification
Testing an application with real email addresses

  Scenario: Sign up and confirm account                                 # features/sign_up.feature:6
    Given a user has an email address and loads the app                 # features/step_definitions/sign_up_steps.rb:14
    When user signs up with email address and password                  # features/step_definitions/sign_up_steps.rb:24
    Then they receive a confirmation code and can confirm their account # features/step_definitions/sign_up_steps.rb:39

1 scenario (1 passed)
3 steps (3 passed)
0m13.214s

The end result is a friendly dog welcoming the signed up user.

Conclusion

Capybara, Rspec, Selenium, and Cucumber are great tools for testing applications end to end. With MailSlurp you can add real test email accounts to your test suites. This lets you test features like user sign-up, login, password reset, and newsletters with confidence. Create a free account to give it a try or see the developer pages for documentation.

As always, the code for this example is available on GitHub.