Author: Mao TAKAHASHI
Published in: June 21, 2023
Set up cypress
This article explains how to create automated E2E tests using Cypress.
You can download Cypress from the "Direct Download" on the following URL.
However, using "Direct Download" can cause a slow performance after Cypress starts, so it is recommended to install it using npm.
Even if you install it with npm, the operation method from the screen after starting it with
open cypress is almost the same.
When you execute the above command, the following screen will appear. Follow the steps without any changes.
Click E2E Testing
Select Chrome and Click Start E2E Testing in Chrome
- This screen shows the browser installed on your PC.
Click Create new spec
Click Create Spec
Click Open run the spec
If it works correctly up to this point, the basic setup is complete! That's easy.
The Cypress installation folder will look like this:
Writing Test Code
Next, write tests in spec.cy.js.
For detailed writing, please refer to the official website documentation.
Here's a simple example code. Since Cypress runs the test every time you change the test case, you can run the test just by changing spec.cy.js.
Run Cypress from the command line
When you run Cypress from CI/CD, you'll often use the command line to run it. You can run the test you created with the following command line in Cypress. Also, when you run it from the command line, a recording of the execution is created in the video folder. You can't see the screen while it's running, but you can check the results later.
The following is an example of running multiple tests or running all tests under the folder.
For details, see the official documentation.
Differences between Cypress and Selenium
I often write automated tests with Selenium. So, I'll explain the differences between Cypress and Selenium. Since each has different advantages, it seems best to select the right tool for the purpose of use.
css selector only
css selector, class name, id, name, xpath ,etc. https://www.selenium.dev/documentation/webdriver/elements/locators/#traditional-locators
Chrome, Edge, Electron, Firefox
Chrome, Edge, Firefox, IE, Safari
a little difficult.
During implementation, it is executed each time it is saved.
Have to hit the command every time.
This article explains how to use Cypress. Since the environment setup is very easy with Cypress, it should be easy to start automatic testing. Also, since the test is executed every time it is run, it is possible to reduce the time and effort required for operation checks during development.