Testing authentication using real email addresses in Ruby with Capybara, Cucumber, and Selenium
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)[https://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)[https://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 let’s 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.