Αngular, Cypress, Code coverage, Allure report. Как настроить e2e тесты для Αngular приложения.

Опубликовано: 16 Март 2026
на канале: Korolev Alexander

394

Пошаговая инструкция:
1. ng new my-awesome-app --skip-git
2. open in vscode my-awesome-app
3. in terminal "ng generate component stepper"
4. put code to stepper:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'

@Component({
selector: 'app-stepper',
template: `
"угл скобка"div"угл скобка"
"угл скобка"button data-cy="decrement" (click)="decrement()""угл скобка"-"угл скобка"/button"угл скобка"
"угл скобка"span data-cy="counter""угл скобка"{{ count }}"угл скобка"/span"угл скобка"
"угл скобка"button data-cy="increment" (click)="increment()""угл скобка"+"угл скобка"/button"угл скобка"
"угл скобка"/div"угл скобка"
`,
})
export class StepperComponent {
constructor() {}
ngOnInit(): void {}
@Input() count = 0
@Output() change = new EventEmitter()

increment(): void {
this.count++
this.change.emit(this.count)
}
decrement(): void {
this.count--
this.change.emit(this.count)
}
}

5. app.component.html remove all and add "угл скобка"app-stepper"угл скобка""угл скобка"/app-stepper"угл скобка"
6. in terminal yarn run start

cypress-e2e-tests

https://basarat.gitbook.io/typescript...
1. yarn add --dev typescript
2. npx tsc --init
3. yarn add cypress --dev
4.
"scripts": {
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
5. yarn run cypress:open
6. configure e2e
7. run tests in chrome
8. create new spec
9. open e2e/spec.cy.ts in vscode
10. write http://localhost:4200/
11. go to cupress/support/commands.ts and add:
export {};
declare global {
namespace Cypress {
interface Chainable {
dataCy(value: string): Chainable"угл скобка"any"угл скобка";
}
}
}
Cypress.Commands.add('dataCy', (value) ="угл скобка" {
return cy.get('[data-test="' + value + '"]', { timeout: 10000 });
});
12. go to my-awesome-app and add to buttons data-test="btn-minus" and data-test="btn-plus"
13. add to span data-test="span-counter"
14. in cypress project in e2e/spec.cy.ts add
it('clicks plus button', () ="угл скобка" {
cy.visit('http://localhost:4200/')
cy.dataCy('btn-minus').click()
cy.dataCy('span-counter').should('have.text','-1');
})

it('clicks minus button', () ="угл скобка" {
cy.visit('http://localhost:4200/')
cy.dataCy('btn-plus').click()
cy.dataCy('span-counter').should('have.text','1');
})

Add code coverage

https://docs.cypress.io/guides/toolin...

1. in cypress test app "yarn add -D @cypress/code-coverage"
2. in cypress/support/e2e.ts
import '@cypress/code-coverage/support'
3. in cypress.config.ts
import { defineConfig } from 'cypress'

export default defineConfig({
// setupNodeEvents can be defined in either
// the e2e or component configuration
e2e: {
setupNodeEvents(on, config) {
require('@cypress/code-coverage/task')(on, config)
// include any other plugin code...

// It's IMPORTANT to return the config object
// with any changed environment variables
return config
},
},
})
4. go to angular client
5. yarn add -D @ephesoft/webpack.istanbul.loader
6. create coverage.webpack.js in root folder
7. add in coverage.webpack.js:
module.exports = {
module: {
rules: [
{
test: /\.(js|ts)$/,
loader: '@ephesoft/webpack.istanbul.loader',
options: { esModules: true },
enforce: 'post',
include: require('path').join(__dirname, '.', 'src'),
exclude: [
/node_modules|\.spec\.ts$/
]
}
]
}
};
8. yarn add [email protected] (version should be the same as angular version)
9. go to angular.json and change "serve" block, instead of "builder": ....
"builder": "ngx-build-plus:dev-server",
"options": {
"extraWebpackConfig": "coverage.webpack.js"
},
10. go to ..\cypress-e2e-tests\coverage\lcov-report and open index.html

Add Allure plugin:

https://github.com/Shelex/cypress-all...

1. yarn add -D @shelex/cypress-allure-plugin in cypress test app
2. create file cypress/plugins/index.ts and add code below:

import allureWriter from "@shelex/cypress-allure-plugin/writer";

export default (on: any, config: any) ="угл скобка" {
allureWriter(on, config);
return config;
};
3. add to root cypress.config.ts:
require('./cypress/plugins/index.ts').default(on, config);
4. add to ../cypress/support/e2e.ts:
import '@shelex/cypress-allure-plugin';
5. add to package.json in scripts:
"cy:run": "cypress run --env allure=true",
"e2e:show-report": "node allure-show-report.js"
6. yarn add -D allure-commandline
7. create file in the root dir allure-show-report.js
8. add to this file code:
var allure = require('allure-commandline');

var generation = allure([
'generate',
'allure-results',
'-o',
'allure-report',
'--clean',
]);

generation.on('exit', function (exitCode) {
allure(['open', './allure-report']);
});
9. run
yarn run cy:run
yarn run e2e:show-report