Nothing Precedes Matter

    cypress-time
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    cypress-time

    Record timings in Cypress

    Why?

    Sometimes you want to record how long a series of tasks/actions take. When developing, you might use browser-based time spans to give you feedback. This Cypress plugin will give you a nice way to do timings right in your test! This library uses the User Timings API, so the time span will show up if you run a performance profile while the test is active (can only be done using cypress open which is dev mode).

    Installation

    To install the module:

    npm install cypress-time --save-dev
    

    To get the plugin working with Cypress:

    // cypress/support/index.js or cypress/support/index.ts
    import 'cypress-time'

    Use

    In your spec files, cy.time(label) will start a time span while cy.timeEnd(label) will end a time span. cy.timeEnd will return a PerformanceEntry.

    // start the 'test' time span
    cy.time('test')
     
    cy.contains('button', 'Submit').click()
     
    // wait until submit is complete - assume a backend is involved
    cy.get('Loading').should('not.exist')
     
    // ends the 'test' time span, printing the duration
    cy.timeEnd('test')

    If you want to do something with the time output, the PerformanceEntry is returned. You can save this to a file, send it off to a service, or whatever you'd like. startTime and duration may be of the most interest.

    cy.time('test')
     
    // do something
     
    cy.timeEnd('test').then(entry => {
      console.log(entry.startTime) // start in ms elapsed since page loaded
      console.log(entry.duration) // duration between `time` and `timeEnd`
    })

    Here's a screenshot of what the command log will look like: Cypress Command Log

    Here's a screenshot of the Performance tools with the 'test' time span: Performance Tab of Time Span

    Typescript support

    This plugin comes with its own type definitions. If you're using Typescript already and your support index file is a Typescript file and your tsconfig.json is configured to include *.ts files in the support directory, nothing more needs to be done. If you don't have your project set up this way, add the following to your tsconfig (ideally in cypress/tsconfig.json):

    {
      "types": ["cypress", "cypress-time"]
    }

    Install

    npm i cypress-time

    DownloadsWeekly Downloads

    2,659

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    294 kB

    Total Files

    12

    Last publish

    Collaborators

    • nicholasboll