How to handle responsive DOM changes

[jarretmoses]

I have been playing around with this library and I noticed something querky in terms of my screen shots. It seems when I set the widths option within cy.percySnapshot the screenshot is taken during the resize of the screen which causes layout issues. By this I mean the screenshot is happening while the layout is still repositioning itself based on the response styles. Is it possible to delay the snapshot a little bit after the width has been set?

Packages:
@percy/cypress: 2.3.1
cypress: 4.3.0

[Robdel12]

Hey @jarretmoses, thanks for the issue! I suspect something else is going on. It sounds like your apps DOM changes between widths? The way Percy works is by capturing the DOM of the page (and its state) when percySnapshot is called. When then do asset discovery on the DOM & send it off to the API where its rendered concurrently across browsers & widths.

If your applications DOM changes when the browser is resized, this current method doesn't work. We render that same DOM at different widths with JS disabled (to prevent JS from altering any captured state). This method assumes the DOM stays the same and you're using CSS media queries entirely to alter the page.

To fix this you'll have to resize the test browser before calling percySnapshot for accurate snapshots.

// A helper to make this easy, feel free to edit
Cypress.Commands.add('percyResponsiveSnapshot', (name, width, options = {}) => {
  delete options.widths // we never want to use those in this helper

  cy
    // https://docs.cypress.io/api/commands/viewport.html#Syntax
    .viewport(width)
    .percySnapshot(`${name} - ${width}`, { widths: [width], ...options })
    // Set back the orignal width if you'd like
    //.viewport()
});

// usage:
cy.percyResponsiveSnapshot('Homepage', 320) 

[klamping]

I'm running into the same issue, and the are a couple of problems with this solution:

• It no longer groups all the screenshots for that page into one set of snapshots. This removes some very useful functionality from the Percy dashboard. It's very have the widths grouped at the top right of the Percy snapshot dashboard.
• It forces you to forego the use of 'widths' in your percy config file, which loses some maintainability in your code (you have to scatter the same widths all over your tests)

It would be great if you could set an option in the percySnapshot command to specify that each width has a custom DOM associated with it, and have the util send over multiple DOM snapshots to Percy. Alternatively, allow snapshots to be group together as a single set of snapshots.

[Robdel12]

Hey @klamping! Yeah this is the trade off with this approach for now. We're a super small team (6 engineers) and changing the infrastructure and API to handle multiple DOM snapshots requires significant changes. This is just a work around to make snapshots work, it's not the end all solution. We haven't had the resources to pick up this task at the moment.

[klamping]

Thanks for the quick response, although not what I was looking for :)

[klamping]

For anyone looking to implement this workaround in a way that uses the Percy config widths, here's code you can add to your Cypress support folder:

import utils from '@percy/sdk-utils';

Cypress.Commands.add('percyResponsiveSnapshot', (name, options = {}) => {
  cy.wrap(null).then(() => {
    return utils.isPercyEnabled().then((isEnabled) => {
      // skip all of this if Percy isn't enabled
      if (!isEnabled) {
        return false;
      }

      const configWidths = utils.percy.config.snapshot.widths;

      const desiredWidths = options.widths || configWidths;

      desiredWidths.forEach(width => {
        cy
          .viewport(width, Cypress.config('viewportHeight'))
          .wait(10); // give the website a split-second to respond

        const screenshotName = `${name} - ${width}px`;
        const customOptions = { widths: [width], ...options };

        cy.percySnapshot(screenshotName, customOptions);
      })
    });
  });
});

Usage

// Use the defaults
cy.percyResponsiveSnapshot('My Page');

// Customize the snapshot
cy.percyResponsiveSnapshot('My Page', {
  widths: [468, 860], // This will completely override the Percy config widths
  percyCSS: `.myClass { display: none !important; }`,
});

[SamuelPinho]

I wasn't able to find a @types for @percy/sdk-utils, so if you want a typescript approach, this type declaration can help you to suppress type errors:

// declaration.d.ts

declare module "@percy/sdk-utils" {
  interface Utils {
    isPercyEnabled(): Promise<boolean>;
    percy: {
      config: {
        snapshot: {
          widths: import("@percy/core").SnapshotOptions["widths"];
        };
      };
    };
  }

  const utils: Utils;

  export = utils;
}

[jarretmoses]

@Robdel12 thanks a lot for the response. You are exactly correct and what you suggest makes a lot of sense and I will give it a shot.

[abbudao]

Hey, just wanted to say thanks for the answer, it pinpointed my issue perfectly.
Is it really not possible to group those snapshots in Percy when manually changing the viewport with Cypress?
I'm trying to convince my company to use Percy, and this is probably a deal-breaker 😢

[acha5066]

I tried this on 4.11.0 (cypress) + 2.3.1 (@percy/cypress) and ran into an issue where the cy.viewport command expects either a width and height integer, or a preset string like 'macbook-13' while puppeteer, which is used by percy still expects a width integer. So the above did not work for me. I ended up having to pass the preset string to the cy.viewport command and an integer to the percySnapshot command.