Migrate to Percy CLI

.circleci/config.yml

@@ -28,7 +28,7 @@ jobs:
           command: |
             sudo apt-get update
             sudo apt-get -y upgrade
-            sudo apt-get -yq install gconf-service libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxss1 libxtst6 libappindicator1 libnss3 libasound2 libatk1.0-0 libc6 ca-certificates fonts-liberation lsb-release xdg-utils wget
+            sudo apt-get -yq install gconf-service libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxss1 libxtst6 libappindicator1 libnss3 libasound2 libatk1.0-0 libc6 ca-certificates fonts-liberation lsb-release xdg-utils wget libgbm-dev
       - run:
           name: Install dependencies
           command: yarn && pip3 install -r requirements.txt

.percy.yaml

@@ -0,0 +1,4 @@
+version: 2
+discovery:
+  allowed-hostnames:
+    - assets.ubuntu.com

package.json

@@ -45,7 +45,7 @@
     "watch:essential": "sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css --watch",
     "watch": "yarn build && yarn watch:scss",
     "clean": "rm -rf build docs/static/css node_modules/ yarn-error.log",
-    "percy": "percy exec -- node snapshots.js",
+    "percy": "percy snapshot snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
   "files": [
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.4.1",
-    "@percy/script": "1.1.0",
+    "@percy/cli": "1.26.0",
     "@testing-library/cypress": "9.0.0",
     "autoprefixer": "10.4.14",
     "cypress": "12.13.0",

snapshots.js

@@ -1,34 +1,28 @@
-const PercyScript = require('@percy/script');
-
 const PORT = process.env.PORT || 8101;
 
-PercyScript.run(async (page, percySnapshot) => {
+module.exports = async () => {
   const {default: GetSiteUrls} = await import('get-site-urls');
   let links = await GetSiteUrls(`http://localhost:${PORT}/`);
+  let urls = [];
 
   links = links.found
     // only snapshot examples, not the whole site
     .filter((url) => url.includes('/docs/examples/'))
     // remove standalone examples listing from screenshots
     .filter((url) => !url.match(/examples\/standalone$/));
 
-  // disable JS requests to prevent CodePen from rendering examples
-  await page.setRequestInterception(true);
-  page.on('request', (request) => {
-    if (request.resourceType() === 'script') request.abort();
-    else request.continue();
-  });
-
   for (var i = 0; i < links.length; i++) {
     const url = links[i];
-    await page.goto(url);
-
-    // ensure the page has loaded before capturing a snapshot
-    await page.waitFor('body');
 
-    // create percy snapshot with path as a name
     const path = new URL(url).pathname.replace(/\/?$/, '/');
     const isResponsive = path.indexOf('responsive') >= 0;
-    await percySnapshot(path, {widths: isResponsive ? [375, 800, 1280] : [375, 1280]});
+
+    urls.push({
+      url: url,
+      name: path,
+      widths: isResponsive ? [375, 800, 1280] : [375, 1280],
+    });
   }
-});
+
+  return urls;
+};