Cypress is an end-to-end testing framework for web test automation. It enables front-end developers and test automation engineers to write automated web tests in JavaScript, the main language used for developing websites.

Laracasts comes up with a package that provides the necessary boilerplate to quickly begin testing your Laravel applications using Cypress.

Installation

If you haven’t already installed Cypress that’s your first step.

npm install cypress --save-dev && npx cypress open

As part of the initial npx cypress open command, Cypress will instantly create a ./cypress directory in your project root, as well as a cypress.json configuration file.

Now you’re ready to install this package through Composer. Pull it in as a development-only dependency.

composer require laracasts/cypress --dev

Finally, run the cypress:boilerplate command to copy over the initial boilerplate files for your Cypress tests.

php artisan cypress:boilerplate

That’s it! You’re ready to go. We’ve declared some initial settings in your project’s cypress.json file. Have a look real quick and make sure everything is in order. In particular, please ensure that the baseUrl property is set correctly (we default to your app’s APP_URL environment setting).

Environment Handling

After running the php artisan cypress:boilerplate command, you’ll now have a .env.cypress file in your project root. To get you started, this file is a duplicate of .env. Feel free to update it as needed to prepare your application for your Cypress tests.

Likely, you’ll want to use a special database to ensure that your Cypress acceptance tests are isolated from your development database.

DB_CONNECTION=mysql
DB_DATABASE=cypress

When running your Cypress tests, this package will automatically back up your primary .env file, and swap it out with env.cypress. Once complete, of course, the environment files will be reset to how they originally were.

All Cypress tests run according to the environment specified in .env.cypress.

However, when your Cypress tests fail, it can often be useful to manually browse your application in the exact state that triggered the test failure. You can’t do this if your environment is automatically reverted after each test run. To solve this, temporarily disable the Cypress task that resets the environment. Visit cypress/support/index.js and comment on this portion.

after(() => {
  // cy.task("activateLocalEnvFile", {}, { log: false });
});

That should do it!

API

This package will add a variety of commands to your Cypress workflow to make for a more familiar Laravel testing environment.

We allow for this by exposing a handful of Cypress-specific endpoints in your application. Don’t worry: these endpoints will never be accessible in production.

• cy.login()
• cy.currentUser()
• cy.logout()
• cy.create()
• cy.refreshRoutes()
• cy.refreshDatabase()
• cy.seed()
• cy.artisan()
• cy.php()

This package has the details of the above commands with code examples. If you want to learn more you can visit its complete documentation and source code on Github.