Coder Social home page Coder Social logo

rikkun-1 / cypress-har-generator Goto Github PK

View Code? Open in Web Editor NEW
0.0 0.0 0.0 941 KB

HAR generator for Cypress.io framework

Home Page: https://www.npmjs.com/package/@neuralegion/cypress-har-generator

License: MIT License

Shell 0.23% JavaScript 18.93% TypeScript 77.34% Handlebars 3.50%

cypress-har-generator's Introduction

cypress-har-generator

Generate HTTP Archive (HAR) while running tests

Install

Run npm i --save-dev @neuralegion/cypress-har-generator to install the plugin.

✴ For details about changes between versions, and information about updates on previous releases, see the Releases tab on GitHub: https://github.com/NeuraLegion/cypress-har-generator/releases

Quick Start

First, install cypress-har-generator as development dependency:

npm i --save-dev @neuralegion/cypress-har-generator

Next, go to the cypress's directory and put this code is in your cypress/plugins/index.js file:

const {
  install,
  ensureBrowserFlags
} = require('@neuralegion/cypress-har-generator');

module.exports = (on, config) => {
  install(on, config);

  on('before:browser:launch', (browser = {}, launchOptions) => {
    ensureBrowserFlags(browser, launchOptions);
    return launchOptions;
  });
};

The plugins file is no longer supported as of Cypress version 10.0.0. Instead, you have to update your cypress.config.js as follows (for details see the migration guide):

const { defineConfig } = require('cypress');
const {
  install,
  ensureBrowserFlags
} = require('@neuralegion/cypress-har-generator');

module.exports = defineConfig({
  // setupNodeEvents can be defined in either
  // the e2e or component configuration
  e2e: {
    setupNodeEvents(on, config) {
      install(on, config);

      on('before:browser:launch', (browser = {}, launchOptions) => {
        ensureBrowserFlags(browser, launchOptions);

        return launchOptions;
      });
    }
  }
});

After then, you should register commands that perform the manipulation with the HAR file. For that add this module to your support file cypress/support/index.js:

require('@neuralegion/cypress-har-generator/commands');

Starting from Cypress 10 version 10.0.0, supportFile is set to look for the following file: cypress/support/e2e.js by default.

Once the configuration is completed, add the following code into each test:

// cypress/integration/users.spec.js

describe('my tests', () => {
  before(() => {
    // start recording
    cy.recordHar();
  });

  after(() => {
    // HAR will be saved as users.spec.har
    // at the root of the project
    cy.saveHar();
  });
});

After then, you can start the tests with:

cypress run --browser chrome

✴ Now only Chrome family browsers are supported.

When the cypress finished executing tests, the plugin will save a new archive at the root of the project.

You can override the destination folder by setting CYPRESS_HARS_FOLDERS environment variable or in env object in Cypress config file like this:

{
  "env": {
    "hars_folders": "cypress/hars"
  }
}

You can also pass it in the CLI using the --env option to set the hars_folder environment variable:

cypress run --browser chrome --env hars_folders=cypress/hars

By default, a HAR is saved to a file with a name including the current spec’s name: {specName}.har

Commands

recordHar

Starts recording network logs. The plugin records all network requests so long as the browser session is open.

cy.recordHar();

You can set content flag to false to skip loading content fields in the HAR.

cy.recordHar({ content: false });

To include only requests on specific hosts, you can specify a list of hosts using includeHosts.

cy.recordHar({ includeHosts: ['.*.execute-api.eu-west-1.amazonaws.com'] });

To exclude some requests, you can specify a list of paths to be excluded using excludePaths.

cy.recordHar({ excludePaths: ['^/login', 'logout$'] });

saveHar

Stops recording and save all requests that have occurred since you run recording to the HAR file.

cy.saveHar();

Pass a filename to change the default naming behavior.

cy.saveHar({ fileName: 'example.com.har' });

Pass an output directory to change the destination folder overriding any previous settings:

cy.saveHar({ outDir: './hars' });

Generate HAR file only for chrome, if it is not interactive run, and if test failed.

beforeEach(() => {
  const isInteractive = Cypress.config('isInteractive');
  const isChrome = Cypress.browser.name === 'chrome';
  if (!isInteractive && isChrome) {
    cy.recordHar();
  }
});

afterEach(() => {
  const { state } = this.currentTest;
  const isInteractive = Cypress.config('isInteractive');
  const isChrome = Cypress.browser.name === 'chrome';
  if (!isInteractive && isChrome && state !== 'passed') {
    cy.saveHar();
  }
});

License

Copyright © 2022 Bright Security.

This project is licensed under the MIT License - see the LICENSE file for details.

cypress-har-generator's People

Contributors

azuruce avatar dependabot[bot] avatar derevnjuk avatar jennifer-shehane avatar millerjames avatar navinseth avatar semantic-release-bot avatar tmieulet avatar trentrand avatar

cypress-har-generator's Issues

Plugin crashes on write if another response comes

If application receives a new response after/during execution of then cy.saveHar command, then plugin crashes with the following error:

Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

TypeError: Cannot read properties of undefined (reading 'write')
    at t.Plugin.<anonymous> (/home/torohov/projects/smsc/frontend/node_modules/@neuralegion/cypress-har-generator/dist/index.js:1:2252)
    at Generator.next (<anonymous>)
    at fulfilled (/home/torohov/projects/smsc/frontend/node_modules/tslib/tslib.js:115:62)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.