Skip to content

CONTRIBUTE.md

Latest commit

 

History

History
155 lines (105 loc) · 6.41 KB

CONTRIBUTE.md

File metadata and controls

155 lines (105 loc) · 6.41 KB

Contribution Guide

Project Structure

  • packages/cypress-debugger - the entry point. It exports debuggerSupport and debuggerPlugin functions, required for plugin installation and a set of types used in the web application.

  • packages/support - Cypress Events handlers that are responsible for collecting events:

  • packages/plugin - exports a function that attaches Cypress Plugin Events handlers used inside the setupNodeEvents function of the cypress configuration.

Here are collected the browser logs, and created the files with the collected information. The browser logs are accessed using the Chrome DevTools Protocol by connecting to the cypress browser using the remote debugging port. The result files are created in the dump folder relative to the cypress config file.

  • meta - RunContextData an object with the following fields:

    {
  spec: string; // spec filename
  test: string[]; // test title
  retryAttempt: number; // https://docs.cypress.io/guides/guides/test-retries
}

  • browserLogs - the browser logs at a moment in time. The data is collected using chrome-remote-interface.

  • pluginMeta - the data passed down to the optional meta field of the debuggerPlugin options argument.

Folder structure

  • packages/cypress-debugger - the plugin entry point. It exports the debuggerSupport and debuggerPlugin functions, required for plugin installation and a set of types used in the web application.

  • packages/support - exports the function that attaches handlers to Cypress Events. Here are made the following actions: - collect cypress events - collect rrweb events and match them with rrweb events - recording network events (using the HAR generator cypress plugin)

  • packages/plugin - exports a function that attaches Cypress Plugin Events handlers used inside the setupNodeEvents function of the cypress configuration. Here are collected the browser logs, and created the files with the collected information. The browser logs are accessed using the Chrome DevTools Protocol by connecting to the cypress browser using the remote debugging port. The result files are created in the dump folder relative to the cypress config file.

  • apps/web - the web application. The Web application is a basic UI created with Vite, React and Typescript. It is a tool that helps to analyze the information from the files generated by the plugin. It also serves as an example for plugin integration.

  • packages/eslint-config-custom - shared eslint configuration.

  • packages/tsconfig - shared tsconfig.

Development

Start the packages in development mode

npm install
npm run dev

Runs a few tests

cd apps/web
npx cypress run --browser chrome

Data Structure

The plugin generates a json file for each test into the dump folder inside the working directory. Each file contains the following fields:

  • cy - a list of cypress events. The data is collected from the cypress log:added event.

  • rr - a list of rrweb records, which represents the mutations in the DOM. The entries are linked to cy events on cypress log:added and log:changed events.

  • har - an HTTPArchive(HAR) object, recorded by the HttpArchive Generator.

  • meta - RunContextData an object with the following fields:

    {
  spec: string; // spec filename
  test: string[]; // test title
  retryAttempt: number; // https://docs.cypress.io/guides/guides/test-retries
}

  • browserLogs - the browser logs collected using chrome-remote-interface.

  • pluginMeta - the data passed down to the optional meta field of the debuggerPlugin options argument.

Releasing

The project uses Changesets to manage releases.

Beta channel

When you want to do a prerelease, you need to enter prerelease mode. You can do that with the pre enter <tag>. The tag that you need to pass is used in versions (e.g. 1.0.0-beta.0) and for the npm dist tag.

Please check Changesets Prereleases for reference.

Enter prerelease mode and made the first prerelease

npx changeset pre enter beta
npx changeset version
git add .
git commit -m "chore: release vX.X.X-beta.X"

npm run publish -- -- beta

git tag "vX.X.X-beta.X"
git push --follow-tags

To add another prerelease, run:

npx changeset version
git add .
git commit -m "Version packages"
npm run publish-npm -- -- beta --otp=XXXXXX

git tag "x.x.x-beta.x"
git push --follow-tags

To exit the prerelease mode:

npx changeset pre exit

Latest channel

npx changeset
# follow screen instructions
npx changeset version
# review the updated files
git add .
git commit -m "chore: release vX.X.X"

npm run publish-npm -- -- latest --otp=XXXXX

git tag "vX.X.X"
git push --follow-tags
# create a new release on github

Localhost

docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio
npm adduser --registry http://localhost:4873
npm login --registry http://localhost:4873
npm_config_registry=http://localhost:4873 npm run publish-npm -- -- latest

# use the new package
npm_config_registry=http://localhost:4873 npm i cypress-debugger  --@currents:registry=http://localhost:4873