Visual solution for web testing workshop 2022

web-testing-2022/.happo.js

@@ -0,0 +1,58 @@
+// .happo.js
+const { RemoteBrowserTarget } = require('happo.io');
+
+module.exports = {
+  apiKey: process.env.HAPPO_API_KEY,
+  apiSecret: process.env.HAPPO_API_SECRET,
+  project: "web-test-2022",
+  targets: {
+    "chrome-1080p": new RemoteBrowserTarget("chrome", {
+      viewport: "1920x1080",
+      freezeAnimations: "last-frame",
+    }),
+    // all viewports https://viewportsizer.com/devices/
+    // 	Samsung Galaxy S10+, S10
+    "chrome-galaxy-s10": new RemoteBrowserTarget("chrome", {
+      viewport: "360x740",
+      freezeAnimations: "last-frame",
+    }),
+    // iphone viewports https://yesviz.com/iphones.php
+    "safari-1080p": new RemoteBrowserTarget("safari", {
+      viewport: "1920x1080",
+      freezeAnimations: "last-frame",
+      // so that safari won't cut off the screenshot at window height
+      scrollStitch: true,
+    }),
+    // iphone 12 pro
+    "safari-iphone-12-pro": new RemoteBrowserTarget("safari", {
+      viewport: "390x844",
+      freezeAnimations: "last-frame",
+      scrollStitch: true,
+    }),
+    "Apple-iPad-Pro-12.9": new RemoteBrowserTarget("safari", {
+      viewport: "1024x1366",
+      freezeAnimations: "last-frame",
+      scrollStitch: true,
+    }),
+    "Apple-iPad-Air": new RemoteBrowserTarget("safari", {
+      viewport: "834x1112",
+      freezeAnimations: "last-frame",
+      scrollStitch: true,
+    }),
+    "MacBook Pro 13.3": new RemoteBrowserTarget("safari", {
+      viewport: "1280x800",
+      freezeAnimations: "last-frame",
+      scrollStitch: true,
+    }),
+    "MacBook Pro 16": new RemoteBrowserTarget("safari", {
+      viewport: "1536x960",
+      freezeAnimations: "last-frame",
+      scrollStitch: true,
+    }),
+    // iphone 12 pro
+    "chrome-650": new RemoteBrowserTarget("chrome", {
+      viewport: "650x415",
+      freezeAnimations: "last-frame",
+    }),
+  },
+};

web-testing-2022/cypress.config.js

@@ -1,9 +1,12 @@
 const { defineConfig } = require('cypress');
+const happoTask = require('happo-cypress/task');
 
 module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here
+      happoTask.register(on);
+      return config;
     },
     baseUrl: 'http://localhost:3000',
   },

web-testing-2022/cypress/e2e/visual.cy.js

@@ -0,0 +1,13 @@
+describe('home page', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    // need to scroll to handle lazy loading
+    // since our page is tiny, it's not scrollable
+    cy.scrollTo('bottom', { duration: 5000, ensureScrollable: false });
+    cy.scrollTo('top', { duration: 3000, ensureScrollable: false });
+  });
+
+  it('looks good', () => {
+    cy.get('body').happoScreenshot();
+  });
+});

web-testing-2022/cypress/support/commands.js

@@ -1,3 +1,4 @@
+import 'happo-cypress';
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite

web-testing-2022/docs/VISUAL.md

@@ -62,7 +62,6 @@ Test by running `npm run test:visual`
 - Lazy loading
 - Long pages
 
-
 ## 📝Summary
 
 ✅Visual e2e testing is a simple and efficient way to ensure visual consistency cross-platform and cross-OS