feat: add browser logs

README.md

@@ -19,33 +19,72 @@ npm install
 npx cypress run --browser chrome
 ```
 
-You will see new `json` files created in `apps/web/dump`. Each file contains fields: `cy`, `rr`, and `har`.
+The plugin generates a `json` file for each test into `apps/web/dump`. Each file contains the following information about a specific test: 
 
-- `cy` - data from cypress events
-- `rr` - data from the [rrweb](https://www.npmjs.com/package/rrweb)
-- `har` - data from the [HttpArchive Generator](https://github.com/NeuraLegion/cypress-har-generator)
+- `cy` - a list of cypress events. The data is taken from the cypress `log:added` event, and pushed into an array, emptied at the `afterEach` hook.
 
-Run the local server at http://localhost:3000/ and upload some file from `apps/web/dump` using the UI.
+- `rr` - a list of [rrweb](https://www.npmjs.com/package/rrweb) entries, which represents the browser state at a moment in time. The entries are linked to `cy` events on cypress `log:added` and `log:changed` events.
+
+- `har` - network history recorded by the [HttpArchive Generator](https://github.com/NeuraLegion/cypress-har-generator). The recording is started at `beforeEach` hook, and stopped at `afterEach`. The data is saved in a temporary folder then read, and moved to the result file.
+
+- `meta` - an object which contains the following test data:
+ ```typescript
+ {
+ 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 by connecting to the browser using [chrome-remote-interface](https://www.npmjs.com/package/chrome-remote-interface), a [Chrome Debugging Protocol](https://chromedevtools.github.io/devtools-protocol/) interface. The Chrome Debugging Protocol is connecting to the browser at `before:browser:launch` event.
+
+- `pluginMeta` - an object containing the data passed down to the `meta` field of the install optional, second parameter:
+ ```js
+ // cypress.config.js
+
+ setupNodeEvents(on, config) {
+ require("@currents/cypress-debugger").install(on, {
+ // pluginMeta
+ meta: {
+ key: "value",
+ },
+ });
+
+ return config;
+ })
+ ```
+
+Run the local server at http://localhost:3000/ and upload some files from `apps/web/dump` using the UI.
 
 ### Notes
 
 A `har.json` file could be visualized with [this tool](https://toolbox.googleapps.com/apps/har_analyzer/)
 
 The [HAR generator](https://github.com/NeuraLegion/cypress-har-generator), currently, only supports Chrome family browsers. Please refer to [this](https://github.com/NeuraLegion/cypress-har-generator#generating-a-har-file) section in order to run cypress for other browsers.
 
+To obtain a result containing `browserLogs` run `npx cypress run --browser chrome --spec ./cypress/e2e/local.spec.js`
+
 ## Usage
 
 - call the `install` function inside the `setupNodeEvents` in the cypress config file:
 
+The function takes the cypress events as the first parameter, and an optional object as the second parameter.
+
+Available options:
+ - `meta` - the field is passed down to every generated file.
+ - `callback` - a function that executes after each test having the generated data as a parameter.
+
 ```typescript
 const { defineConfig } = require("cypress");
-const { install } = require("@currents/cypress-debugger");
+
+const options: { meta?: any; callback?: Function } = {}
 
 module.exports = defineConfig({
  e2e: {
  ...
  setupNodeEvents(on, config) {
- install(on, config);
+ require("@currents/cypress-debugger").install(on, options);
+
  return config;
  },
  },

apps/web/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/web/cypress.config.js

@@ -1,13 +1,20 @@
 const { defineConfig } = require("cypress");
-const { install } = require("@currents/cypress-debugger");
 
 module.exports = defineConfig({
  e2e: {
  baseUrl: "https://todomvc.com/examples/backbone",
  specPattern: "cypress/e2e/*.spec.js",
  supportFile: "cypress/support/e2e.ts",
  setupNodeEvents(on, config) {
- install(on, config);
+ require("@currents/cypress-debugger").install(on, {
+ meta: {
+ key: "value",
+ },
+ callback: (val) => {
+ // executed after each test
+ },
+ });
+
  return config;
  },
  },

apps/web/cypress/e2e/local.spec.js

@@ -0,0 +1,11 @@
+context("Check for console output", function () {
+ it("should display the correct text", function () {
+ cy.origin("http://localhost:3000", () => {
+ cy.visit("/");
+ cy.get("label").should(
+ "contain",
+ "To upload data - click on the text or drag a file into the area"
+ );
+ });
+ });
+});

apps/web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Web</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/index.tsx"></script>
+ </body>
+</html>