npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cypress-duration-metrics

v1.1.2

Published

Measure duration of commands and different stages of cypress lifecycle.

Downloads

7,824

Readme

Cypress duration metrics Downloads Version

InstallPreprocessor durationMetrics explainedRelease Notes

Plugin for measuring total duration of the different commands and some stages of the cypress run lifecycle. Helps to identify where tests spend a lot of time and potentially come up with performance improvements.

demo

NOTE: Some stage totals and their labels are based on certain assumptions that might not be correct. These should improve over time as more insight is gained.

NOTE: Metrics are displayed properly only on cypress run. This plugin is meant for measuring performance on pipelines.

Install

Requirements

  • requires cypress >=10.0.0
  1. Install npm package.
    npm i --save-dev cypress-duration-metrics
  2. If using typescript and esm imports ensure esModuleInterop is enabled.
  3. Register the output plugin in cypress.config.{js|ts}
    import registerDurationMetricsPlugin from 'cypress-duration-metrics/plugin';
      
    export default defineConfig({
      e2e: {
        setupNodeEvents(on, config) {
          registerDurationMetricsPlugin(on);
        }
      }
    });
  4. Register the collector support in cypress/support/e2e.{js|ts}
    import registerDurationMetricsSupport from 'cypress-duration-metrics/support';
    registerDurationMetricsSupport();

Preprocessor duration

Tracking preprocessor time is currently only supported if you are using custom preprocessor. If you are using the builtin default one of cypress it won't work. To enable the measurement you need to warp your preprocessor callback.

The tracking should work with any kind of preprocessor, but the example below uses webpack. Your plugin file should look something like this:

import {registerDurationMetricsPlugin} from 'cypress-duration-metrics/plugin';

export default defineConfig({
   e2e: {
      setupNodeEvents(on, config) {
         const {measurePreprocessorDuration} = registerDurationMetricsPlugin(on);
         // .. webpackProcessor initiated here
         on('file:preprocessor', measurePreprocessorDuration(webpackProcessor));
      }
   }
});

Metrics explained

Total exec time

Time spent between the plugins require time and after:run dispatch. This is the current best approximation of the absolute total duration of the cypress run command. But it is not entirely correct, as there is still time that can be spent by cypress before loading in the plugin and after after:run on shutdown.

Test retries

Time spent on tests from all specs that failed and retried. Time is measured only from the retries and not the first try, which is considered the main execution.

Total run time

Time spent between before:run and after:run dispatch.

Cypress boot time

This is the difference between Total exec time and Total run time. Current assumption is that this time is taken up by cypress to prepare everything to start the run, like plugins, events and servers.

Specs

Total time spent on each spec. A specs time is measured between before:spec and after:spec dispatches.

Between specs

Total time spent in-between specs. This measurement is always 0 when there is only 1 spec in the whole run. The time is measured between after:spec of previous and before:spec of current test.

Between tests

Same as Between specs, but for individual tests isolated per spec.

Between commands

Same as Between specs, but for commands isolated per tests.

Browser boot time

This is the equivalent of (Total run time - Between specs - Specs). The current assumption is that this time is spent on actually opening the browser. But most likely there are other things here.

File preprocessor

The total time spent on compiling your spec files and the support file. The count on this metric should be equal to the number of specs + 1 for the support file (e2e.js).

Tracked cy commands

This is the total time spent on executing cypress commands.

cy.*

Total duration for a specific cypress command. All runs of the command are measured and added together. You can see also the average duration for the command, the max duration and also how many times it was run. Only commands that were used during the run will appear.