Testing authentication using real email addresses in Ruby with Capybara, Cucumber, and Selenium
Cucumber example project using Capybara to test user authentication using 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.
Related content
Golang email library
Golang Email Library for sending and receiving emails in Go over SMTP or HTTP/S.
Ruby Mailer SDK - send and receive emails in Rails, Rspec an...
Receive email and attachments with Rails, Rspec, and Ruby without SMTP using MailSlurp Ruby Gem.
Email for testing
Test email accounts for email testing. Alternatives to Mailinator, MailTrap, Mailosaur and more.
How to wait for Selenium to start during Codeception tests
Example tutorial for how to wait until webdriver and Selenium have started during Codeception PHP tests
Email API for email marketing and more
APIs for email marketing and social campaign testing. Send, receive, validate and test emails in code and online.
How to test an email address
Test email accounts for testing email addresses in code or online. Create fake email accounts for testing.
How to start selenium in a background process and wait for i...
Spawn Selenium server process before tests start for easier acceptance testing.
Send and receive email in Cypress JS tests with MailSlurp
Test email sign-up. password verification and more with Cypress JS and MailSlurp.
Cypress Email Plugin - Test email accounts in Javascript (an...
Use real email accounts in CypressJS to test user sign-up, email verification, and more.
Golang mail Library (SMTP)
How to send and receive emails in Go (test email addresses).
Email APIs for Java and Kotlin projects
Test email sending and receive emails without a mail server.
Java TestNG Selenium user sign up testing with real email ad...
Testing user sign up in Java using TestNG and MailSlurp test email accounts
Codeception PHP acceptance testing using real email address ...
Write acceptance tests in PHP with real email addresses using Codeception and MailSlurp
PHP Email Test Plugins: send and receive email in PHPUnit (e...
How to send and receive emails in PHPUnit tests.
PyTest email testing
Send and receive email in Pytest Python tests.
Selenium test email plugins: send and receive email in tests...
Receive emails in Java test suites using MailSlurp, Junit, and Selenium.
Receive email in PHP: using MailSlurp to send and receive em...
Test email in PHP using real email addresses
Robotframework Python Testing using real email addresses
Python automation email testing Robotframework plugin
Testing authentication using real email addresses in Ruby wi...
Cucumber example project using Capybara to test user authentication using real email addresses.
Test applications with real emails using Serenity BDD, JBeha...
Email acceptance testing with Serenity and MailSlurp. Test applications with real email addresses.
.NET SpecFlow testing using MailSlurp email accounts and Sel...
How to test .NET authentication and sign-up using real email accounts with MailSlurp and SpecFlow.
Test email accounts with Jest and Puppeteer
Test email accounts in React with Jest and Puppeteer. Send and receive emails in Javascript.
Test Emails in Selenium with DotNet, CSharp and MailSlurp
Send and receive email in DotNET Nunit tests using Selenium and MailSlurp.
Test emails with Cucumber and Ruby
Generate test email accounts with Ruby and Cucumber. Test email sign-up, password verification and more.
Test user sign-up with NodeJS and WebDriver
Test email related processes like sign-up and verification using WDIO WebDriver and MailSlurp.
TestCafe end-to-end MFA testing for user sign-up and email v...
End-to-end testing with MailSlurp, NodeJS, and TestCafe.
How To Test Emails Before You Send
There are many free tools to test emails before sending. This can help prevent spam warnings and increase deliverability...
Testing OTP password link username and password for 2 factor...
Testing OTP password link username and password for 2 factor authentication (2FA)
Test email address
Free test email address for testing emails online with web dashboard or REST API.
Testing email-related functionality with MailSlurp
Use MailSlurp to test email related functionality using real email addresses.
Testing email with Cypress test email accounts
Test email accounts for CypressJS. End-to-end testing with real email addresses using MailSlurp Cypress plugin.
Testing Webhooks
How to test HTTP webhooks using MailSlurp test hooks.
Ruby send SMTP email
How to use Ruby SMTP client to send email with the MailSlurp mail servers
Testing Email with Cypress JS and MailSlurp
Email testing with Cypress JS