This blog post demonstrates steps to setup Cypress with Angular. Cypress can be initialized using @briebug/cypress-schematic or manually. See the source code uploaded to Github
Automatic Initialization @briebug/cypress-schematic
- First, Install Cypress using the following command in Angular project
npm i -D cypress
2. Initialize and Configure the Cypress with @briebug/cypress-schematic plugin. This will generate cypress directory, cypress.json, and updates package.json file
ng add @briebug/cypress-schematic
This will ask to remove Protractor from project with prompt “Would you like to remove Protractor from the project?”, enter Y if want to do so.
4. Create new test under cypress/integration directory
describe('Home Page Test', () =>{
beforeEach(function () {
cy.visit('/');
});it('Show Error If failed to show Welcome message', () =>
{
// Check if the word Welcome exists
cy.contains('Welcome');
// Visit Angular Website and Angular Blog
cy.contains('Learn Angular').click();
cy.contains('Angular Blog').click();
});
});
3. Now run tests created under cypress/integration using the following command
ng e2e
Home Page e2e Test
Manual Initialization
- First, Install Cypress using the following command in Angular project
npm i -D cypress
2. Create minimal cypress.json file under project home directory as shown below
{
"integrationFolder": "cypress/integration",
"baseUrl": "http://localhost:4200",
"env": {
"username": "username",
"password": "password"
}
}
3. Create cypress, cypress/integration directories in the project directory. And create tsconfig.json file under cypress directory
{
"extends": "../tsconfig.json",
"include": \["../node\_modules/cypress", "\*\*/\*.ts"\],
"compilerOptions": {
"sourceMap": false
}
}
4. Create new test under cypress/integration directory
describe('Home Page Test', () =>{
beforeEach(function () {
cy.visit('/');
});it('Show Error If failed to show Welcome message', () =>
{
// Check if the word Welcome exists
cy.contains('Welcome');
// Visit Angular Website and Angular Blog
cy.contains('Learn Angular').click();
cy.contains('Angular Blog').click();
});
});
5. Now run tests created under cypress/integration using the following command
ng e2e
Code uploaded to Github for reference
Top comments (0)