How to get your Cypress code coverage

By Alex Luque

How to get your Cypress code coverage

START

About me

Alex Luque

· University of Córdoba· SalmorejoTech organizer· QA Automation Engineer at Genially

What is code coverage?

INDEX

How does it work?

How to instrument your code

Getting your Cypress code coverage

Merging coverage reports from parallel tests

CI code coverage at Genially

Obtaining value from code coverage

Code coverage:

???%

What is code coverage?

100%

· Code coverage is a metric that helps you understand how much of your source is tested.

· Several ways to calculate it depending on the coverage criteria: · Statements. · Branches. · Functions. · Lines.

But...

How does it work?

In just one word...

Instrument

But...

How does it work?

· Inserting additional counters into your source code before running it.

How does it work?

INSTRUMENT

So, the next question is...

So, the next question is...

How to instrument your code

How to instrument your code

Some testing libraries/frameworks do it automatically.

How to instrument your code

Cypress test code runs separately from the aplication code.

Some testing libraries/frameworks do it automatically.

How to instrument your code

Cypress test code runs separately from the aplication code.

Some testing libraries/frameworks do it automatically.

We have to instrument it by hand.

How to instrument your code

Cypress test code runs separately from the aplication code.

Some testing libraries/frameworks do it automatically.

We have to instrument it by hand.

Oh, shit!

nyc

The command-line interface for the Istanbul library.

A babel plugin that adds istanbul instrumentation to ES6 code.

babel-plugin-istanbul

nyc

The command-line interface for the Istanbul library.

nyc

The command-line interface for the Istanbul library.

A babel plugin that adds istanbul instrumentation to ES6 code.

babel-plugin-istanbul

A babel plugin that adds istanbul instrumentation to ES6 code.

babel-plugin-istanbul

coverage-istanbul-loader

Istanbul code coverage loader for Webpack.

Adding coverage-istanbul-loader to your project

Installation

Adding coverage-istanbul-loader to your project

Usage

Installation

· Example extracted from Cypress documentation.

Getting your Cypress code coverage

@cypress/code-coverage · Official Cypress plugin for code coverage.

Adding @cypress/code-coverage to your project

Installation

Adding @cypress/code-coverage to your project

Usage

Installation

Adding @cypress/code-coverage to your project

Usage

Adding @cypress/code-coverage to your project

· .nyc_output/out.json

Contains the window.__coverage__ object.

After running your tests

.nyc_output

· coverage/lcov-report/index.html

You'll have two new folders:

Html coverage report. Generated by default by @cypress/code-coverage plugin.

coverage

· Example extracted from Cypress documentation.

Running tests on parallel

Running tests on parallel

Merging coverage reports from parallel tests

Merging coverage reports from parallel tests

.nyc_output/out.json

<FOLDER_CONTAINING_ALL_INDIVIDUAL_REPORTS>

Merging coverage reports from parallel tests

.nyc_output/out.json

<FOLDER_CONTAINING_ALL_INDIVIDUAL_REPORTS>

coverage

Merging coverage reports from parallel tests

nyc merge vs nyc report

· nyc merge only can generate json type reports.

coverage

Merging coverage reports from parallel tests

coverage

What are we missing?

· Backend coverage. · Unit test coverage.

CI code coverage at Genially

Time to do what programmers like the most: spending double the time automating it than manually doing it

CI code coverage at Genially

Run tests in parallel

CI code coverage at Genially

Run tests in parallel

Get each machine coverage

CI code coverage at Genially

Run tests in parallel

Get each machine coverage

Merge all of them into html report

CI code coverage at Genially

Run tests in parallel

Get each machine coverage

Merge all of them into html report

Build docker image with the report

CI code coverage at Genially

Run tests in parallel

Get each machine coverage

Merge all of them into html report

Build docker image with the report

Serve the image

For QAs

· Knowing what isn't covered is useful to prioritize and decide the next tests to be developed.

Obtaining value from code coverae

For devs

· Knowing what is covered by tests gives them the confidence to code without fear of breaking something.

Thanks!

@Alex_Magnus_

AlexTheMagnus

malejandrolule