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 into it.

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

Add dependencies

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

Our Gemfile should now look something like this:

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.

The features directory will contain our 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 .

Add Capybara support

Next we can enable Capybara by editing and adding this code:

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

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 and add methods for each , , and statement in our feature file.

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 statement and turn that into code. We will use MailSlurp to create a real email address.

Configure MailSlurp

In our we can require the 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:

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

Generate test inboxes

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

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

Notice we assigned the inbox to a global variable that we can use later. When we run the tests with we should see one passing test.

The and 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.

Here we find elements using CSS selectors for 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 . 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 to wait for the latest unread email in the user's inbox.

Extract content

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

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.

And voila: running we see 3 passed tests.

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.