Unable to snapshot dynamic element

[andrzej-woof]

The problem

My scenario:

1. navigate to page with testcafe
2. click on a button which triggers client side javascript that displays modal overlay
3. assert with testcafe that modal is visible on screen
4. use percySnapshot

Unfortunately the result of this snapshot is a page without modal.
Are there any particular steps needed to properly take this snapshot or is it just not supported

[Robdel12]

Hey @andrzej-kodify! In order to debug this we'll need a build or snapshot ID to download and look at what is being captured. It could be a lot of things but without looking at the captured DOM it's hard to know.

[andrzej-woof]

Ok, so I can reproduce this at https://headlessui.dev/examples/react-dialog-hero

with the following testcafe code

test('test', async (browser) => {
  await browser.navigateTo('https://headlessui.dev/examples/react-dialog-hero');
  await percySnapshot(browser, 'Default');
  await browser.click(Selector('button').withText('Got it, thanks!')).wait(1000);
  await percySnapshot(browser, 'Closed');
});

it's the opposite scenario where on page load the dialog is opened, I click on close and I can see in windowed browser it is closed but in percy both screenshots are same with dialog being opened

[Robdel12]

Gotcha, thanks for that. Looks like that modal is shown in with an animation. In Percy's browsers the animations are disabled and that usually means the animation is stuck at the first frame. You'll want to use Percy CSS to remove the animation from the element and then that will get it to display

[andrzej-woof]

Got it, I've solved it by using t.eval to set el.style.transitionDuration = "0s" before taking snapshot
Thanks for help 👍