cypress

cypress.config.ts

@@ -1,17 +1,17 @@
-const { defineConfig } = require("cypress");
-const getCompareSnapshotsPlugin = require("cypress-visual-regression/dist/plugin");
+import { defineConfig } from "cypress";
+import { configureVisualRegression } from "cypress-visual-regression";
 
 module.exports = defineConfig({
   screenshotsFolder: "./cypress/snapshots/actual",
   trashAssetsBeforeRuns: true,
   env: {
     failSilently: false,
   },
-  supportFile: "./cypress/support/index.ts",
   e2e: {
+    supportFile: "./cypress/support/index.ts",
     specPattern: "**/*.*cy.*",
     setupNodeEvents(on, config) {
-      getCompareSnapshotsPlugin(on, config);
+      configureVisualRegression(on);
     },
   },
 });

cypress/setup/index.html

@@ -14,7 +14,7 @@
       crossorigin="anonymous"
     />
 
-    <link href="./dist/introjs.css" rel="stylesheet" />
+    <link href="http://localhost:10001/dist/introjs.css" rel="stylesheet" />
 
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link
@@ -156,7 +156,7 @@ <h2 data-intro="fourth header step" data-hint="secondary header">
           class="pt-3 mt-4 text-muted border-top"
           data-hint="this is the footer"
         >
-          &copy; 2021
+          &copy; YEAR
         </footer>
       </div>
     </main>
@@ -178,6 +178,6 @@ <h2 data-intro="fourth header step" data-hint="secondary header">
         console.log(3);
       };
     </script>
-    <script type="text/javascript" src="./dist/intro.js"></script>
+    <script type="text/javascript" src="http://localhost:10001/dist/intro.js"></script>
   </body>
 </html>

cypress/support/index.ts

@@ -1,8 +1,8 @@
 /// <reference types="./index.d.ts" />
 
-import compareSnapshotCommand from "cypress-visual-regression/dist/command";
+import { addCompareSnapshotCommand } from "cypress-visual-regression/dist/command";
 
-compareSnapshotCommand({
+addCompareSnapshotCommand({
   capture: "fullPage",
 });