✨ Shadow DOM serialisation support (#1165)

* use declarative dom for serializing * Remove getInnerHTML polyfill * 📝 update documentation for testing cli packages * 🐛 return document instead of fragment we require document interface to in further steps, and originally document.cloneNode returned document object instead of fragment * 🐛 missed let : ( * firefox use default html without declarative * add basic tests * Serialized element tests * rename clone node file name * mark dom elements in shadow dom, next steps - serialize them * serialize inputs, cssom, video, canvas, frames * add comments * add warning log for video serialization * remove line and add comment * add extra comments * added declarative shadow dom polyfill for non chromium infra browsers * serialize frame test * serialize cssom inside shadow * shadowDom global in other tests * update id update polyfill for browsers where we run scripts later fix polyfill * karma separate shadow dom config * Use shadow mode in karma * refactor dom test to platform * serialize cssom createElement fix * domTransformation shadow dom unsupported * frames tests add polyfill * withExample: Remove test-shadow for plain to avoid flakes * fix frame test side effect in input * refactor helper with options * firefox tests limit platforms * revert test script changes * add tests for inject polyfill * 🔖 v1.19.0-alpha.0 * 📝 update readme for dom package * use declarative dom for serializing * Remove getInnerHTML polyfill * 🐛 return document instead of fragment we require document interface to in further steps, and originally document.cloneNode returned document object instead of fragment * 🐛 missed let : ( * firefox use default html without declarative * add basic tests * Serialized element tests * rename clone node file name * mark dom elements in shadow dom, next steps - serialize them * serialize inputs, cssom, video, canvas, frames * add comments * add warning log for video serialization * remove line and add comment * add extra comments * serialize frame test * serialize cssom inside shadow * shadowDom global in other tests * karma separate shadow dom config * Use shadow mode in karma * added declarative shadow dom polyfill for non chromium infra browsers * refactor dom test to platform * domTransformation shadow dom unsupported * frames tests add polyfill * withExample: Remove test-shadow for plain to avoid flakes * fix frame test side effect in input * refactor helper with options * firefox tests limit platforms * revert test script changes * frame test more specific * many nested many flat shadow dom * failing domTransformation for shadow * adoptedStylesheet test * fix frames test * 🐛 return if style id is not found * 🔖 v1.19.1-alpha.0 * disableShadowDom option * allow disableShadowDom in storybook + cil-snapshot * disable shadow dom snake case * cloneNode pass ctx * Add comment * adoptedStylesheet serialize dom * Add comment * run polyfill as first thing * custom element test case * frame in head * disable shadow dom naming * use getTestBrowser * increase nesting levels * remove comment * rename argument * inject polyfill only when not disabled * fix linter * fix polyfill * lint fix * refactor * fix disableShadowDOM option * update readme * fix core test * serialize adopted styles as link * text resource as base64 * use dataj-percy-serialized * fix tests * 🔖 v1.19.2-alpha.0 * lerna update * refactor recursive serialize * invalid marking test * adoptedStylesheet document test * fiix custom element test * fix recursive serialization of special elements * refactor serialize dom * increase test coverage --------- Co-authored-by: Samarjeet <samarjeet@browserstack.com>
percy · Feb 14, 2023 · 66b8192 · 66b8192
1 parent 8aeb759
commit 66b8192
Show file tree

Hide file tree

Showing 45 changed files with 1,125 additions and 372 deletions.
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "packages": [
     "packages/*"
   ],

diff --git a/package.json b/package.json
@@ -20,7 +20,9 @@
     "postinstall": "lerna run --stream postinstall",
     "test": "lerna run --stream --concurrency=1 test",
     "test:coverage": "lerna run --stream --concurrency=1 --no-bail test:coverage",
-    "test:types": "lerna run --parallel test:types"
+    "test:types": "lerna run --parallel test:types",
+    "global:link": "lerna exec -- yarn link",
+    "global:unlink": "lerna exec -- yarn unlink"
   },
   "devDependencies": {
     "@babel/cli": "^7.11.6",

diff --git a/packages/cli-app/package.json b/packages/cli-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-app",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0",
-    "@percy/cli-exec": "1.18.0"
+    "@percy/cli-command": "1.19.2-alpha.0",
+    "@percy/cli-exec": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/cli-build/package.json b/packages/cli-build/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-build",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,6 +32,6 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0"
+    "@percy/cli-command": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/cli-command/package.json b/packages/cli-command/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-command",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,8 +35,8 @@
     "test:coverage": "yarn test --coverage"
   },
   "dependencies": {
-    "@percy/config": "1.18.0",
-    "@percy/core": "1.18.0",
-    "@percy/logger": "1.18.0"
+    "@percy/config": "1.19.2-alpha.0",
+    "@percy/core": "1.19.2-alpha.0",
+    "@percy/logger": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/cli-config/package.json b/packages/cli-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-config",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,6 +32,6 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0"
+    "@percy/cli-command": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/cli-exec/package.json b/packages/cli-exec/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-exec",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0",
+    "@percy/cli-command": "1.19.2-alpha.0",
     "cross-spawn": "^7.0.3",
     "which": "^2.0.2"
   }

diff --git a/packages/cli-snapshot/package.json b/packages/cli-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-snapshot",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0",
+    "@percy/cli-command": "1.19.2-alpha.0",
     "yaml": "^2.0.0"
   }
 }
diff --git a/packages/cli-upload/package.json b/packages/cli-upload/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-upload",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0",
+    "@percy/cli-command": "1.19.2-alpha.0",
     "fast-glob": "^3.2.11",
     "image-size": "^1.0.0"
   }

diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -60,10 +60,45 @@ use the following scripts for various development tasks:
 - `yarn readme` - generate cli commands readme usage
 - `yarn test` - run all tests, one package after another
 - `yarn test:coverage` - run all tests with coverage, one package after another
+- `yarn global:link` - links all packages being developed as global.
+    - requires `yarn build` to be run before
+    - we can then consume this package using
+        `[npm|yarn] link @percy/[core|cli..]`
+    - **Note**: linking is only required once, subsequent changes for development requires running build command. 
+
+- `yarn global:unlink` - unlinks all packages globally
 
 Individual package scripts can be invoked using yarn's
 [workspace](https://classic.yarnpkg.com/en/docs/cli/workspace/) command. For example:
 
 ```sh-session
 $ yarn workspace @percy/core test
 ```
+
+
+## Publish
+
+Most of the repos have similar setup as CLI, steps as follows
+
+1.  bump version 
+
+```
+yarn bump-version
+```
+
+2.  commit with following commit message => `:bookmark: vTAG` 
+
+3.  Draft a new release and publish it
+
+This will run release.yml workflow on github actions, which publishes the NPM packages
+
+### Publish with specific tag
+
+Currently release workflow only support publishing with latest tag. 
+To publish with alpha/any other TAG.
+
+1. follow till step 2 above and then run
+
+```
+yarn lerna publish from-package --dist-tag TAG
+```
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,14 +30,14 @@
     "test:coverage": "yarn test --coverage"
   },
   "dependencies": {
-    "@percy/cli-app": "1.18.0",
-    "@percy/cli-build": "1.18.0",
-    "@percy/cli-command": "1.18.0",
-    "@percy/cli-config": "1.18.0",
-    "@percy/cli-exec": "1.18.0",
-    "@percy/cli-snapshot": "1.18.0",
-    "@percy/cli-upload": "1.18.0",
-    "@percy/client": "1.18.0",
-    "@percy/logger": "1.18.0"
+    "@percy/cli-app": "1.19.2-alpha.0",
+    "@percy/cli-build": "1.19.2-alpha.0",
+    "@percy/cli-command": "1.19.2-alpha.0",
+    "@percy/cli-config": "1.19.2-alpha.0",
+    "@percy/cli-exec": "1.19.2-alpha.0",
+    "@percy/cli-snapshot": "1.19.2-alpha.0",
+    "@percy/cli-upload": "1.19.2-alpha.0",
+    "@percy/client": "1.19.2-alpha.0",
+    "@percy/logger": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/client",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "test:coverage": "yarn test --coverage"
   },
   "dependencies": {
-    "@percy/env": "1.18.0",
-    "@percy/logger": "1.18.0"
+    "@percy/env": "1.19.2-alpha.0",
+    "@percy/logger": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/config/package.json b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/config",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/logger": "1.18.0",
+    "@percy/logger": "1.19.2-alpha.0",
     "ajv": "^8.6.2",
     "cosmiconfig": "^7.0.0",
     "yaml": "^2.0.0"

diff --git a/packages/config/src/utils/normalize.js b/packages/config/src/utils/normalize.js
@@ -4,7 +4,8 @@ import { getSchema } from '../validate.js';
 // Edge case camelizations
 const CAMELCASE_MAP = new Map([
   ['css', 'CSS'],
-  ['javascript', 'JavaScript']
+  ['javascript', 'JavaScript'],
+  ['dom', 'DOM']
 ]);
 
 // Regular expression that matches words from boundaries or consecutive casing

diff --git a/packages/config/test/index.test.js b/packages/config/test/index.test.js
@@ -1100,14 +1100,16 @@ describe('PercyConfig', () => {
         'foo_bar-baz': 'qux',
         'Bar BAZ qux': 'xyzzy',
         'percy-css': '',
-        'enable-javascript': false
+        'enable-javascript': false,
+        'disable-shadow-dom': true
       })).toEqual({
         fooBar: 'baz',
         foo: { barBaz: 'qux' },
         fooBarBaz: 'qux',
         barBazQux: 'xyzzy',
         percyCSS: '',
-        enableJavaScript: false
+        enableJavaScript: false,
+        disableShadowDOM: true
       });
     });
 
@@ -1117,13 +1119,15 @@ describe('PercyConfig', () => {
         foo: { bar_baz: 'qux' },
         fooBar_baz: ['qux'],
         percyCSS: '',
-        enableJavaScript: false
+        enableJavaScript: false,
+        disableShadowDOM: true
       }, { kebab: true })).toEqual({
         'foo-bar': 'baz',
         foo: { 'bar-baz': 'qux' },
         'foo-bar-baz': ['qux'],
         'percy-css': '',
-        'enable-javascript': false
+        'enable-javascript': false,
+        'disable-shadow-dom': true
       });
     });
 
@@ -1133,13 +1137,15 @@ describe('PercyConfig', () => {
         foo: { bar_baz: 'qux' },
         fooBar_baz: ['qux'],
         percyCSS: '',
-        enableJavaScript: false
+        enableJavaScript: false,
+        disableShadowDOM: true
       }, { snake: true })).toEqual({
         foo_bar: 'baz',
         foo: { bar_baz: 'qux' },
         foo_bar_baz: ['qux'],
         percy_css: '',
-        enable_javascript: false
+        enable_javascript: false,
+        disable_shadow_dom: true
       });
     });
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,10 +39,10 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.18.0",
-    "@percy/config": "1.18.0",
-    "@percy/dom": "1.18.0",
-    "@percy/logger": "1.18.0",
+    "@percy/client": "1.19.2-alpha.0",
+    "@percy/config": "1.19.2-alpha.0",
+    "@percy/dom": "1.19.2-alpha.0",
+    "@percy/logger": "1.19.2-alpha.0",
     "content-disposition": "^0.5.4",
     "cross-spawn": "^7.0.3",
     "extract-zip": "^2.0.1",

diff --git a/packages/core/src/config.js b/packages/core/src/config.js
@@ -35,6 +35,10 @@ export const configSchema = {
       enableJavaScript: {
         type: 'boolean'
       },
+      disableShadowDOM: {
+        type: 'boolean',
+        default: false
+      },
       scope: {
         type: 'string'
       }
@@ -149,6 +153,7 @@ export const snapshotSchema = {
         minHeight: { $ref: '/config/snapshot#/properties/minHeight' },
         percyCSS: { $ref: '/config/snapshot#/properties/percyCSS' },
         enableJavaScript: { $ref: '/config/snapshot#/properties/enableJavaScript' },
+        disableShadowDOM: { $ref: '/config/snapshot#/properties/disableShadowDOM' },
         discovery: {
           type: 'object',
           additionalProperties: false,

diff --git a/packages/core/src/discovery.js b/packages/core/src/discovery.js
@@ -34,6 +34,7 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'widths', v => `${v}px`);
   debugProp(snapshot, 'minHeight', v => `${v}px`);
   debugProp(snapshot, 'enableJavaScript');
+  debugProp(snapshot, 'disableShadowDOM');
   debugProp(snapshot, 'deviceScaleFactor');
   debugProp(snapshot, 'waitForTimeout');
   debugProp(snapshot, 'waitForSelector');

diff --git a/packages/core/src/page.js b/packages/core/src/page.js
@@ -140,7 +140,7 @@ export class Page {
     execute,
     ...snapshot
   }) {
-    let { name, width, enableJavaScript } = snapshot;
+    let { name, width, enableJavaScript, disableShadowDOM } = snapshot;
     this.log.debug(`Taking snapshot: ${name}${width ? ` @${width}px` : ''}`, this.meta);
 
     // wait for any specified timeout
@@ -181,7 +181,7 @@ export class Page {
       /* eslint-disable-next-line no-undef */
       domSnapshot: PercyDOM.serialize(options),
       url: document.URL
-    }), { enableJavaScript });
+    }), { enableJavaScript, disableShadowDOM });
 
     return { ...snapshot, ...capture };
   }

diff --git a/packages/core/test/discovery.test.js b/packages/core/test/discovery.test.js
@@ -305,7 +305,8 @@ describe('Discovery', () => {
     await percy.snapshot({
       name: 'test event snapshot',
       url: 'http://localhost:8000/events',
-      enableJavaScript: true
+      enableJavaScript: true,
+      disableShadowDOM: true
     });
 
     await percy.idle();