Skip to Content
DocumentationGetting StartedFirst Coverage Data

First Coverage Data

Note

Canyon provides installation guides for common frameworks to help you get started quickly.

Follow these steps to complete your first coverage data report:

Start as a New Project

Installation

In frontend engineering and modular development, Babel is indispensable. For Babel projects, you only need to install two Babel plugins to get started quickly.

npm install babel-plugin-istanbul babel-plugin-canyon -D

Add the istanbul and canyon plugins to your Babel configuration file :

babel.config.js
module.exports = {
  plugins: [
    'istanbul',
    'canyon'
    // Note the plugin order, canyon plugin should be after istanbul plugin
    ],
};

Verification

After configuration, start your project and print window.__coverage__ in the console. If the output matches the image below, it indicates successful code instrumentation.

coverage-canyon-console

Configure CI Environment Variables

In the CI environment, we need to configure some environment variables for reporting coverage data.

💡
Tip

Canyon detects pipeline variables during compilation. We support multiple pipeline providers.
Don’t see your pipeline provider? Try explicit configuration.

  1. DSN and REPORTER
  • DSN: Coverage data reporting service address, url/coverage/client, where url is the Canyon service address.
  • REPORTER: User token, which can be viewed in the Canyon user settings page.
  1. Configure CI Platform Variables

gitlab

ℹ️

Note that project ID, branch, and SHA don’t need manual configuration - the Canyon plugin automatically detects pipeline environment variables.

Update Babel Plugin Activation Conditions

In the CI phase, we need to control when plugins are active to prevent instrumentation on production branches.

module.exports = {
  plugins: (process.env.CI &&
            process.env.CI_COMMIT_REF_NAME !== 'release')
            ? [
              'canyon',
              'istanbul'
            ]:[],
};

Report Coverage Data

After CI completes, the page is deployed to the test environment.

At this point, coverage data is stored in the browser. As users operate or UI automation tests execute, the window.coverage_ data continuously accumulates.

By accurately reporting this data to the Canyon server, you can achieve real-time coverage data visualization.

Here are several ways to report coverage data:

UI Automation TestingManual Testing
IntroductionPage