Getting started with Cypress on Laravel

As developers, we usually do test our code by writing unit tests, right? Unit tests are great for deploying applications and ensuring they work as they should. But writing them, we usually do so from a developer’s perspective.

How can we cover the user’s perspective? Can we even do it, without relying on manual testing? Yes, we can! We use End-to-End testing (or E2E) where we try to simulate real user scenarios from start to finish.

End-to-End testing?
E2E (or chain testing) refers to a software testing method that tests the entire product from beginning to end, taking actions as an actual user would do, to ensure the application flow behaves as expected.

Cypress?
Cypress is a JavaScript-based all-in-one framework for end-to-end testing that comes with all the built-in features you may need.

Most of the time, complex applications depends on a lot of other applications (which might be complex too). With E2E testing, we want to make sure that everything is integrated and with no bugs (hopefully). If there are any failures on any subsystems, we’ll know right away! So writing the unit/features tests as well as the End-to-end testing is a great way to increase our product quality!

Setting up our project
Before we being, we need to have an application to test. So let’s create a laravel project.

composer create-project laravel/laravel --prefer-dist laravel-cypress

Then we need something tangible to test, so we will use Laravel Breeze.

Laravel Breeze?
Laravel Breeze is a minimal, simple implementation of all of Laravel’s authentication features, including login, registration, password reset, email verification, and password confirmation. Laravel Breeze’s default view layer is made up of simple Blade templates styled with Tailwind CSS.

Let’s fetch it.

composer require laravel/breeze --dev

Now, we need to install it. Let’s run

php artisan breeze:install
npm install
npm run dev
php artisan migrate

You can access your routes on /login or /register and test your authentication system!

Installing Cypress

Ok, to install Cypress, run:

npm install cypress --save-dev

Then, you can run it using

npx cypress open

Cypress Gui mode

Seeding your database

Let’s add a User so we have some data to work with.

First, let’s create a seeder with

php artisan make:seeder UserSeeder

After you run this command you should see your new seeder on database/seeders folder.

Now, let’s add some users

Then, let’s add this seeder to DatabaseSeeder.php

Now, we just need to run

php artisan db:seed

And done, we can finally start writing our tests.

Writing your first tests

let’s start by deleting our example tests and start working on the tests for our application.

It’s time for us to create the tests. Create a new folder, let’s name it Authentication inside the Cypress/integration folder. And create a new file register.spec.js inside the folder.

All of our test files should be included in the integration folder, and they can be organized into as many folders as you would like, keeping things easy to find when your tests scale.

Add this code to it

These tests aim to test our Register feature use cases such as:

• What happens when a user tries to register with an already registered email?
• What happens when they try to register without filling all the fields?
• What happens if the user tries to login with the wrong password?

If this functionality breaks, it will show up on the tests.

Running your tests

You can check them running

npx cypress open

And then click on register.spec.js to see it running

Cypress running Register tests

Now, let’s add some tests to test another feature. Let’s test our login!

Let’s run it

That’s it! That’s how we create an End-to-end test with Cypress in our Laravel project. Of course, you can always add more if the need for it arises. For example, you can try adding tests to check if the “Remember me” functionality is working.

Conclusion

Testing is very important to the long-term success of an application, and end-to-end tests help us achieve that by ensuring our software works as expected from the beginning. The more quality tests you have, the better your application will be.

With Cypress, E2E is easier than ever and very easy to integrate in your pipeline. I use it a lot to do Regression Testing (Software testing practice that ensures an application still function as expected after code changes). But this is just the start. If you want to learn more, you can check the docs here. Hopefully you will like it.

Feel free to reach me out if you have any questions or run into any issues while following this tutorial.

L. Marquezzini