Hi here a command (in typescript) I've created that easily make a screenshot on a particular element :)

// cypress/integration/Test.test.ts
it('MyTest', () => {
  cy.visit('/');

  cy.get(`[data-cy=myData]`).percySnapshotElement('Snapshot Name');
});

// cypress/support/commands.ts

Cypress.Commands.add('percySnapshotElement', { prevSubject: true }, (subject, name, options) => {
  cy.percySnapshot(name, {
    domTransformation: (documentClone) => scope(documentClone, subject.selector),
    ...options,
  });
});

function scope(documentClone: Document, selector: string): Document {
  const element = documentClone.querySelector(selector);
  documentClone.querySelector('body').innerHTML = element.outerHTML;

  return documentClone;
}

// cypress/types.d.ts

declare namespace Cypress {
  // Precy.io ------------------------------------------------------
  interface SnapshotOptions {
    domTransformation: (documentClone: Document) => void;
  }

  interface Chainable {
    percySnapshotElement(name?: string, options?: SnapshotOptions);
  }
  // ---------------------------------------------------------------
}

screenshot a particular element #56

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions