Separating Hit and Map

Collecting initial coverage source files generated by babel compilation in CI

Reasons

1. Collecting Complete Compiled Files: During the post-compilation process, the babel-plugin-canyon plugin analyzes and parses the initial coverage file for each compiled file and saves it to the .canyon_out folder.

2. Early Collection, Reduced Pressure: When you don’t report initial coverage files, these coverage files will be reported in UI automation testing, which creates enormous transmission pressure. Early collection can reduce transmission pressure by more than 90%.

Reporting Initial Coverage Data

The babel-plugin-canyon plugin generates original coverage files for compiled files during compilation and saves them to the .canyon_output folder. We provide the canyon-uploader command-line tool, which you can use to report to the Canyon server in CI.

name: Report Canyon Output
 
jobs:
  report:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18" # Node.js version can be modified according to project requirements
      - name: Install dependencies
        run: npm install
      - name: Generate output
        run: npm run build
 
      # Report .canyon_output file content
      - name: Report output
        run: canyon-uploader map --dsn=https://canyonjs.org

Update Babel Plugin

Configure the keepMap option to false

module.exports = {
  plugins: [
    "istanbul",
    [
      "canyon",
      {
        keepMap: false,
      },
    ],
  ],
};

Ready

Now check the window.coverage object of the page, as shown in the screenshot. The map data is no longer present in window.coverage, which can greatly reduce the transmission costs during the UI automation coverage collection process.