chore: switch applitools to percy for website VRT (#2664)

* chore: switch applitools to percy for website VRT

* chore: node version

* chore: parallelise percy

* chore: better parallel

* test: unset scrolling for percy

* chore: update visual regression internal docs for Percy

* chore: changeset

.changeset/fluffy-gifts-repair.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/animation-library': patch
+'@twilio-paste/core': patch
+---
+
+[Animation Library]: remove unecessary check for VRT tool we no longer use

.github/workflows/on_pull_request_cypress.yml

@@ -5,9 +5,23 @@ on:
     types: [opened, synchronize, reopened, labeled]
 
 jobs:
+  # run this job first to create a single timestamped id for all percy batches on parallel machines
+  percy-batch-id:
+    runs-on: ubuntu-latest
+    # persist job results to other jobs in the workflow
+    outputs:
+      result: ${{ steps.percy-batch-id.outputs.result }}
+    steps:
+      # persist step results to other steps in the job
+      - name: Create Percy Batch ID
+        id: percy-batch-id
+        # adding a timestamp makes the batch id more unique for re-runs
+        run: echo "::set-output name=result::${{ github.run_id }}-$(date +%s)"
+
   cypress:
     name: Website tests
     runs-on: ubuntu-latest
+    needs: percy-batch-id
     strategy:
       fail-fast: false
       matrix:
@@ -16,25 +30,25 @@ jobs:
       CYPRESS_CACHE_FOLDER: ./node_modules/cypress
       CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
-      APPLITOOLS_SERVER_URL: "https://twilioeyesapi.applitools.com"
-      APPLITOOLS_BATCH_NAME: "${{ github.event.pull_request.head.repo.full_name }}: pull request from ${{ github.event.pull_request.head.ref }} - ${{ github.event.pull_request.title }} (${{ github.event.pull_request.head.sha }})"
-      APPLITOOLS_BATCH_ID: ${{ github.event.pull_request.head.sha }}
-      USE_CYPRESS_EYES: false
+      PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+      USE_CYPRESS_VRT: false
 
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v2
 
-      - name: Setup Node.js 12.x
+      - name: Setup Node.js 16.13
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.13.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
 
+      - name: Percy Batch ID
+        run: echo "${{ needs.percy-batch-id.outputs.result }}"
+
       - name: Load Yarn cache
         uses: actions/cache@v2
         id: yarn_cache_id
@@ -82,5 +96,9 @@ jobs:
           parallel: true
           group: "Paste Actions with VRT Parallel"
           config: baseUrl=${{ steps.waitForDeployment.outputs.url }}
+          # enabled percy to run cypress for VRT
+          command-prefix: "percy exec --parallel -- npx"
         env:
-          USE_CYPRESS_EYES: true
+          USE_CYPRESS_VRT: true
+          PERCY_PARALLEL_NONCE: ${{ needs.percy-batch-id.outputs.result }}
+          PERCY_PARALLEL_TOTAL: 3

.percy.js

@@ -0,0 +1,18 @@
+const percyCSS = `
+/* disable all the iframes in the docs site */
+iframe {
+  display: none;
+}
+/* make it scroll so vrt can capture all of it */
+#styled-site-body {
+  scroll-behavior: auto;
+  overflow: unset;
+}
+`;
+module.exports = {
+  version: 2,
+  snapshot: {
+    widths: [1280],
+    percyCSS,
+  },
+};

cypress/plugins/index.js

@@ -18,11 +18,9 @@ const result = require('dotenv').config();
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on, config) => {
-  if (config.env.USE_CYPRESS_EYES == null) {
-    config.env.USE_CYPRESS_EYES = JSON.parse(process.env.USE_CYPRESS_EYES);
+  if (config.env.USE_CYPRESS_VRT == null) {
+    config.env.USE_CYPRESS_VRT = JSON.parse(process.env.USE_CYPRESS_VRT);
   }
 
   return config;
 };
-
-require('@applitools/eyes-cypress')(module);

cypress/support/commands/@types/index.d.ts

@@ -73,7 +73,7 @@ declare namespace Cypress {
     checkChangelogRevealer(): void;
 
     /**
-     * Navigates to a URL and takes a snapshot with Applitools.
+     * Navigates to a URL and takes a snapshot with for VRT.
      */
     visualRegressionTestUrl({url, testName}: {url: string, testName: string}): void;
   }

cypress/support/commands/parent-commands.ts

@@ -1,5 +1,4 @@
-import '@applitools/eyes-cypress/commands';
-import {DEFAULT_CHECK_PARAMS, DEFAULT_OPEN_PARAMS, eyesAreEnabled, prepareForEyes} from 'support/utils/applitools';
+import {DEFAULT_VRT_OPTIONS, vrtIsEnabled} from 'support/utils/vrt';
 
 /**
  * @file Custom parent commands
@@ -100,32 +99,20 @@ Cypress.Commands.add('getInFixedContainer', (selector) => {
 Cypress.Commands.add('visualRegressionTestUrl', ({url, testName}) => {
   cy.visit(url);
   cy.wait(1000);
-  cy.log('[Applitools]: checking if eyes are enabled');
+  cy.log('[VRT]: checking if VRT is enabled');
 
-  if (eyesAreEnabled()) {
-    cy.log('[Applitools]: Eyes are enabled, proceed with eyes check.');
+  if (vrtIsEnabled()) {
+    cy.log('[VRT]: VRT is enabled, proceed.');
 
-    const openParams: Partial<Eyes.Open.Options> = {
-      ...DEFAULT_OPEN_PARAMS,
-      testName: testName,
+    const vrtOptions = {
+      ...DEFAULT_VRT_OPTIONS,
     };
 
-    const checkParams: Partial<Eyes.Check.Options> = {
-      ...DEFAULT_CHECK_PARAMS,
-      tag: `${testName}`,
-    };
-
-    cy.log(`[Applitools]: Opening eyes with these params: ${openParams}`);
-    cy.eyesOpen(openParams);
-
-    prepareForEyes();
-
-    cy.log(`[Applitools]: Checking window with these params: ${checkParams}`);
-    cy.eyesCheckWindow(checkParams);
-
-    cy.eyesClose();
+    // Take a snapshot for visual diffing
+    cy.log(`[VRT]: Taking snapshot with these params: ${vrtOptions}`);
+    cy.percySnapshot(testName, vrtOptions);
   } else {
-    cy.log('[Applitools]: Eyes not enabled, skipping eyes check');
+    cy.log('[VRT]: VRT is not enabled, skipping');
   }
 
   expect(true).to.equal(true);

cypress/support/index.js → cypress/support/index.ts

@@ -13,6 +13,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import '@percy/cypress';
+
 // Import commands.js using ES2015 syntax:
 import './commands';
 

cypress/support/utils/vrt.ts

@@ -0,0 +1,14 @@
+enum EnvironmentVariables {
+  UseCypressVRT = 'USE_CYPRESS_VRT',
+}
+
+export const DEFAULT_VRT_OPTIONS = {};
+
+/** vrtIsEnabled: Extract environment variable for vrt usage
+ * @returns boolean
+ */
+export const vrtIsEnabled = (): boolean => {
+  const vrtEnabled = Cypress.env(EnvironmentVariables.UseCypressVRT);
+  cy.log(`[VRT]: VRT is ${vrtEnabled ? '' : 'not '}enabled`);
+  return Cypress.env(EnvironmentVariables.UseCypressVRT);
+};

cypress/tsconfig.json

@@ -3,7 +3,7 @@
     "strict": true,
     "target": "es5",
     "lib": ["es2017", "DOM"],
-    "types": ["cypress", "@applitools/eyes-cypress"],
+    "types": ["cypress", "@percy/cypress"],
     "baseUrl": ".",
     "moduleResolution": "node"
   },

internal-docs/engineering/ci.md

@@ -13,7 +13,7 @@
     - [Check package sizes](#check-package-sizes)
     - [CodeSandbox](#codesandbox)
     - [Website test(1/2/3)](#website-test123)
-    - [Applitools](#applitools)
+    - [Percy](#percy)
     - [Component Visual regression tests](#component-visual-regression-tests)
     - [Netlify](#netlify)
     - [Kodiak hq](#kodiak-hq)
@@ -77,19 +77,19 @@ Each pull request gets its own CodeSandbox environment through the CodeSandbox G
 
 ### Website test(1/2/3)
 
-Website tests is a test runner for Cypress and Applitools, using the [Cypress Github Integration](https://docs.cypress.io/guides/dashboard/github-integration.html#Install-the-Cypress-GitHub-app). It will first wait for Netlify to finish deploying the preview of the website, and then run cypress against that url.
+Website tests is a test runner for Cypress and Percy, using the [Cypress Github Integration](https://docs.cypress.io/guides/dashboard/github-integration.html#Install-the-Cypress-GitHub-app). It will first wait for Netlify to finish deploying the preview of the website, and then run cypress against that url.
 
 It will parallelize Cypress test suites across 3 boxes.
 
 After the tests have run, the Cypress integration reports back the results as a comment on the pull request and as a required check.
 
-### Applitools
+### Percy
 
-Applitools is used for visual regression of the docs website. We use Cypress as a means to fire Applitools snapshots for comparison.
+Percy is used for visual regression of the docs website. We use Cypress as a means to fire Percy snapshots for comparison.
 
 This does not run by default.
 
-To enable a website visual regression test on your PR, add the `🕵🏻‍♀️ Run website visual regression` label. This will run the Cypress tests with an environment variable set that instructs cypress to enable applitools.
+To enable a website visual regression test on your PR, add the `🕵🏻‍♀️ Run website visual regression` label. This will run the Cypress tests with an environment variable set that instructs cypress to enable Percy.
 
 ### Component Visual regression tests