Automation Framework made with TS + Cypress
The goal of this project was to put into practice my knowledge using this amazing tool for automation testing.
Do you want to create a framework based on this project? Check this branch!
The project π»
The SWAG Labs/Sauce Demo store, from Sauce Labs, was automated using TS + Cypress. It generates an HTML report for passed and failed tests. Also, this project has GitHub Actions and Docker.
Tools βοΈ
- Cypress v10.3.1.
- cypress-mochawesome-reporter v3.2.0.
- TypeScript v4.7.4.
- GitHub Actions.
- Docker.
Main project structure ποΈ
.
βββ .github/
β βββ workflow/
β βββ main.yml
βββ cypress/
β βββ e2e/
β β βββ login.spec.cy.ts
β β βββ logout.spec.cy.ts
β β βββ shoppingCart.spec.cy.ts
β βββ fixtures/
β β βββ products.json
β βββ support/
β β βββ commands.ts
β β βββ e2e.ts
β β βββ index.ts
β βββ tsconfig.json
βββ cypress.config.ts
βββ cypress.env.json
βββ Dockerfile
βββ package.json
Setup π οΈ
The following steps can be executed using a terminal (I use hyper), or using the terminal provided by VS Code.
- Clone the repo on your computer at any path you want.-
> git clone https://github.com/ArCiGo/JS-Automation-Framework.git
> git checkout AutomationFrameworkSample_TS
- In the path you cloned the repo, open the project folder and install the packages.-
> cd TS-Automation-Framework
> npm i
- There is a cypress.env.json file without values. For demo purposes, you can fill it with these values.-
{
"valid_user": {
"username": "standard_user",
"password": "secret_sauce"
},
"locked_user": {
"username": "locked_out_user"
},
"invalid_user": {
"username": "wrong_username",
"password": "wrong_password"
}
}
Run the tests β‘
# If you don't want to open the Cypress GUI, you can execute the following commands:
> npm run cypress:open:cli
# or
> npm run html-report
# If you want to open the GUI:
> npm run cypress:open
When you run the tests, a new folder is generated inside the cypress
folder (reports
). This folder contains the report for the executed tests. If a test fails, the report will include a screenshot to see what the failure was.
Docker π
If you want to execute the tests using Docker, you can do the following in your terminal at the workspace project.-
# Without a Dockerfile
# Pull the Cypress Docker image you need to run the tests. You can use the latest one
> docker pull cypress/included:9.4.1
# Execute the following command to see the info of the image
> docker run -it --entrypoint=cypress cypress/included:9.4.1 info
# Then, execute the following command to run the tests inside of the container
> docker run -it -v $(pwd):/e2e -w /e2e cypress/included:9.4.1 --spec cypress/e2e --browser electron
# With a Dockerfile
# Execute the following command to compile the file. <YourVersionTag> may be any value you want
> docker build -t my-cypress-image:<YourVersionTag> .
# Then, execute the following command to run the tests inside of the container
> docker run -i -v $(pwd):/my-cypress-project -t my-cypress-image:<YourVersionTag> --spec cypress/e2e