feat: add visual testing with Percy

.github/workflows/CI.yml

@@ -59,4 +59,4 @@ jobs:
         run: npm run test
 
       - name: Run e2e tests
-        run: npm run e2e:headless
+        run: percy exec -- npm run e2e:headless

cypress/e2e/navigation.cy.ts → cypress/e2e/Navigation.cy.ts

@@ -21,5 +21,27 @@ describe('Navigation', () => {
         2
       );
     });
+
+    it('should take screenshot of the homepage', () => {
+      cy.visit('/');
+
+      // Wait until the page is displayed
+      cy.findByRole('heading', {
+        name: 'Boilerplate code for your Nextjs project with Tailwind CSS',
+      });
+
+      cy.percySnapshot('Homepage');
+    });
+
+    it('should take screenshot of the About page', () => {
+      cy.visit('/about');
+
+      // Wait until the page is displayed
+      cy.findByRole('heading', {
+        name: 'Boilerplate code for your Nextjs project with Tailwind CSS',
+      });
+
+      cy.percySnapshot('About');
+    });
   });
 });

cypress/support/e2e.ts

@@ -16,6 +16,7 @@
 
 // Import commands.js using ES2015 syntax:
 import '@testing-library/cypress/add-commands';
+import '@percy/cypress';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

cypress/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["es5", "dom"],
-    "types": ["node", "cypress", "@testing-library/cypress"],
+    "types": ["node", "cypress", "@percy/cypress", "@testing-library/cypress"],
 
     "isolatedModules": false
   },