test/documentation): add snapshot command

packages/documentation/cypress.snapshot.config.js

@@ -4,7 +4,7 @@ module.exports = defineConfig({
   projectId: 'f9aegu',
   e2e: {
     baseUrl: 'http://localhost:9001',
-    specPattern: ['cypress/**/*.snapshot.{ts,tsx}'],
+    specPattern: ['cypress/**/button.snapshot.{ts,tsx}'],
     includeShadowDom: true,
     viewportWidth: 1024,
     viewportHeight: 576,

packages/documentation/cypress/snapshots/components/button.snapshot.ts

@@ -1,7 +1,13 @@
 describe('Button', () => {
   it('default', () => {
-    cy.visit('/iframe.html?id=snapshots--button');
-    cy.get('button post-icon', { timeout: 30000 }).should('be.visible');
-    cy.percySnapshot('Buttons', { widths: [1440] });
+    // cy.visit('/iframe.html?id=snapshots--button');
+    // cy.get('button post-icon', { timeout: 30000 }).should('be.visible');
+    // cy.percySnapshot('Buttons', { widths: [1440] });
+
+    cy.snapshot({
+      url: { story: 'button' },
+      page: { selector: 'button post-icon' },
+      snapshot: { name: 'Buttons' },
+    });
   });
 });

packages/documentation/cypress/support/commands.ts

@@ -1,3 +1,5 @@
+import { SnapshotOptions } from '@percy/core';
+
 /// <reference types="cypress" />
 // ***********************************************
 // This example commands.ts shows you how to
@@ -66,3 +68,34 @@ Cypress.Commands.add('checkAriaExpanded', (isExpanded: 'true' | 'false') => {
       cy.get(`[aria-controls="${id}"]`).should('have.attr', 'aria-expanded', isExpanded);
     });
 });
+
+interface ISnapshotOptions {
+  url: {
+    id?: string;
+    story?: string;
+  };
+  page: {
+    selector: string;
+    timeout?: number;
+  };
+  snapshot: {
+    name: string;
+    wait?: number;
+    options?: SnapshotOptions;
+  };
+}
+
+Cypress.Commands.add('snapshot', (options: ISnapshotOptions) => {
+  const urlId = options.url.id ?? `snapshots--${options.url.story}`;
+  const pageTimeout = options.page.timeout ?? 30000;
+  const snapshotWait = options.snapshot.wait ?? 1000;
+  const snapshotOptions = options.snapshot.options ?? { widths: [1440] };
+
+  cy.visit(`/iframe.html?id=${urlId}`);
+  cy.window().then(w => {
+    w.addEventListener('storybook:ready', () => {
+      cy.get(options.page.selector, { timeout: pageTimeout }).should('be.visible');
+      cy.wait(snapshotWait).percySnapshot(options.snapshot.name, snapshotOptions);
+    });
+  });
+});

packages/documentation/cypress/support/index.d.ts

@@ -4,6 +4,7 @@ declare global {
       registerCollapsibleFrom(url: string): Chainable<any>;
       checkVisibility(visibility: 'visible' | 'hidden'): Chainable<any>;
       checkAriaExpanded(isExpanded: 'true' | 'false'): Chainable<any>;
+      snapshot(options: ISnapshotOptions): Chainable<any>;
     }
   }
 }

packages/documentation/package.json

@@ -38,6 +38,7 @@
     "@lit/task": "1.0.0",
     "@open-wc/lit-helpers": "0.7.0",
     "@percy/cli": "1.28.2",
+    "@percy/core": "1.28.3",
     "@percy/cypress": "3.1.2",
     "@pxtrn/storybook-addon-docs-stencil": "6.4.1",
     "@storybook/addon-designs": "7.0.9",