Reset Global Page State

[pdt-ayidi]

The problem

After the introduction of https://github.com/percy/percy-storybook/pull/592, the global state (styles, etc.) of the page are not reset across snapshots. We came across this issues when testing modals, libraries like bootstrap edit the body element. A possible solution is to provide an option to refresh the page per snapshot.

Our workaround solution is to add this to preview.jsx:

channel.on(CURRENT_STORY_WAS_SET, () => {
  // reset global state here...
  document.body.removeAttribute('style');
});

Environment

Percy/v1
@percy/client/1.10.3
@percy/storybook/4.3.3 (node/v14.16.0; storybook/6.5.9; buildkite)

Browsers
Firefox 95.0
Chrome 96.0

Code to reproduce issue

// simulate snapshot by using storybook's channel
window.__STORYBOOK_PREVIEW__?.channel.emit('setCurrentStory', { storyId: '<story-1>' });

// story-1 sets a global property
document.body.style.paddingRight = '16px'

// navigate to another story
window.__STORYBOOK_PREVIEW__?.channel.emit('setCurrentStory', { storyId: '<story-2>' });

// body will have 'padding-right: 16px', expected ''
document.body.style.paddingRight