Test scenario

The environment is ready to start testing! We use Cypress for component testing so, to mount the scenario follow the next steps:

Add Cypress Command to open component sandbox:

Since our component is mounted and isolated by the angular playground server, we need to access this space with Cypress before starting the test cases. Once accessed is enough, but this varies according to the needs of the test plan.m

You can get component sandbox URL from playground instance in the browser

Add spec file and component commands for selectors:

For reasons of order, the test files must be created in the Cypress component folder, inside this, create a folder with the name of the component to test.

We must also create the necessary commands to facilitate access to the playground and the selectors of the component elements, if you want to know more about Cypress, check Cypress Docs.

Component test folder

Commands

Spec

Cypress run options

We have two options to run the tests in Cypress, the first is by opening the dashboard and selecting the test there. This is the preferred option since component tests have a focus on the interface from the perspective of the end user, because it must be verified that if what is happening is happening visually.

The second option is to run in the background, this option is mainly for the job that is responsible for executing the tests in the TFS pipeline. But if you need to do a quick test check, it's a good option to save some time.

You need cy:run, cy:opendashboard and playground scripts to run tests

If you want see Cypress UI Dashboard run:

npm run cy:open

To run test without browser:

npm run cy:test