Sketching from zero
Before starting with useful tips and comments is highly recommended that you always check the official documentation
You can find the documentation here.
Getting started
Installing
(if you don’t have initiated the project) Open your folder on VSCode, open the terminal, and type
npm init --y or yarn init (it depends on which package manager you’re using)
Npm
Open your folder on VSCode, open the terminal, and type
npm i cypress --save-devto install cypress as dev dependencies
b. Yarn
i. Open your folder on VSCode, open the terminal, and type yarn add cypress --dev to install cypress as dev dependencies
c. After initializing and installing the cypress you should check and confirm that the cypress is on dependencies and it’s on the version that you want
2. Running cypress
a. Npm
i. Open the terminal and type npx cypress open
b. Yarn
i. Open the terminal and type yarn cypress open
3 After this you should be able to see that folders and files were created
a. cypress.json
i. Here you’ll change configurations regarding cypress, for example:
Environment base url
Height and width of viewport
b. Integration folder
i. Here you’ll create the file where your code will be written, to run it on cypress, the file's name must finish with .spec.js
c. Support folder
i. Here you should see the commands.js file that you will create customized methods
{
The commands.js should always have all the most common and used methods in terms of avoiding repetitive code, this way you write once and use the methods whenever needed without having to write it again
For example: assert text, is a simple method, but writing it several times is not a good coding practice, so for that, you could write it on commands.js and call the method when it’s needed
Remember that you can read the official documentation to study what’s the best approach to code your methods
You can find it here.
}
Building your tests
Create your spec.js file with an intuitive name for the task
Running your tests
If you don’t have opened cypress
i. open the terminal on VSCode
ii. type npx cypress open or yarn cypress open (it depends on which package manager you are using)
iii. this tab will open
iv. just click on the spec file that you want to run
