cypress-debugger example

.github/workflows/currents.yml

@@ -42,3 +42,11 @@ jobs:
           api-token: ${{ secrets.CURRENTS_API_KEY }}
           github-run-id: ${{ github.run_id }}
           github-run-attempt: ${{ github.run_attempt }}
+
+      - name: Save cypress traces
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: cypress-traces
+          path: |
+            apps/web/cypress-traces/**/*

.gitignore

@@ -7,7 +7,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
-
+cypress-traces
+dump_har
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 

cypress.config.ts

@@ -1,13 +1,28 @@
 import { defineConfig } from "cypress";
 import { cloudPlugin } from "cypress-cloud/plugin";
+import { initPlugins } from "cypress-plugin-init";
 
+import { debuggerPlugin } from "cypress-debugger";
+
+function initDebugger(
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+) {
+  return debuggerPlugin(on, config, {
+    failedTestsOnly: true,
+    targetDirectory: "cypress-traces",
+    callback: (path) => {
+      console.log("🎥 Recorded Cypress traces to: %s", path);
+    },
+  });
+}
 export default defineConfig({
   e2e: {
     baseUrl: "https://todomvc.com/examples/vanillajs",
     specPattern: "cypress/e2e/*.spec.js",
     supportFile: "cypress/support/e2e.ts",
     setupNodeEvents: (on, config) => {
-      return cloudPlugin(on, config);
+      return initPlugins(on, [initDebugger, cloudPlugin], config);
     },
   },
   video: true,

cypress/e2e/completed.spec.js

@@ -37,7 +37,7 @@ context("Mark all as completed", function () {
     cy.get("@todos").eq(2).should("not.have.class", "completed");
   });
 
-  it("complete all checkbox should update state when items are completed / cleared", function () {
+  it("complete all checkbox should update state when items are completed or cleared", function () {
     // alias the .toggle-all for reuse later
     cy.get(".toggle-all")
       .as("toggleAll")

cypress/support/e2e.ts

@@ -1,5 +1,7 @@
+import { debuggerSupport } from "cypress-debugger";
 import "./commands";
 
+debuggerSupport();
 beforeEach(() => {
   cy.visit("/");
 });