Testing symfony applications with Cypress
Cypress.io is a powerful end-to-end testing tool that has gained popularity among developers for its ease of use and effectiveness in testing web applications. It provides a robust framework for writing, running, and managing tests that simulate real user interactions on your website.
In this blog post, we will explore how to set up Cypress for testing a Symfony demo application, covering setup, creating test specs, handling forms, and managing test data.
To begin testing the Symfony demo application, you’ll need to set up your development environment.
Start by setting up the Symfony demo application from its GitHub repository: Demo application. This application will serve as the basis for our testing examples.
Before you can start writing tests, you need to install Cypress as a development dependency in your project.
Once Cypress is installed, you can configure your package.json file to include scripts for running Cypress commands. Add the following script to your package.json:
We will be using the Symfony Server local proxy domain configuration, you can set the necessary environment variable in the script:
You can now open the Cypress Test Runner by running:
The first time we run Cypress, it will generate some default configuration for us.
Creating a spec
Cypress uses test specs to define the behavior of your tests. Let’s start by creating a new spec that will test the landing page of the Symfony demo application.
When we create the new spec using the interface, a new file will be created in our project. You can find this file in the
We will add the following example code:
In this spec, we use the beforeEach function to ensure that the landing page is loaded before each test. The first test checks if both frontend and backend options are displayed, while the second test simulates clicking the “Browse application” button and verifies that the URL includes ‘/blog’.```
Even without adding an assertion, we know that everything is okay! This is because many of Cypress’ commands are built to fail if they don’t find what they’re expecting to find. This is known as a Default Assertion.
Testing form interactions is a crucial aspect of end-to-end testing. Let’s create a spec that tests the login functionality of the Symfony demo application. In a new test file (e.g.,
login_spec.cy.js), write the following code:
To ensure that Cypress can identify the login button uniquely, we’ve added a data-cy attribute to the login button in the Symfony template (
When testing interactions that involve creating or modifying data, managing test data becomes essential. Let’s create a spec that tests the creation of a blog post by an admin.
In a new test file (e.g.,
blog_creation_spec.cy.js), write the following code:
This works fine! But if we try to run it again, we get an error.
We can fix this by making sure we reset our database before each test. In this case, we can easily do that by adding a cypress task in the cypress config.
We’ll modify the config to look like this:
This allows us to use the newly create
resetDB task in our tests.
Now every time our
blog_creation_spec test is ran, the database will be predictable.
In the interface, we can now see our test passing successfully!
Cypress provides us with an easy-to-use interface to run our tests, and allows for easy testing of an application. Due to the simple nature of the testing code, it will also be easier to maintain.
With Cypress in your testing toolkit, you can ensure that your web application functions correctly and delivers a smooth user experience.