Capturing a selector instead of a page?

[StevenLangbroek]

Hey folks!

We're evaluating how to best do Visual Regression tests for a range of problems. The first thing we're trying to tackle is our design system. Now, we don't want to use Storybook (we're using docz), but I thought I would be able to relatively easily use puppeteer to create snapshots of marked elements on our page. I have everything working so far, except I don't have a way to target sub-elements on a page instead of the whole page (the percySnapshot function takes a page as argument, which won't even run because typescript fails the test). Is this something you could help me with? I haven't dug into either puppeteer or these bindings enough yet, but think I could contribute it. I guess my first question would be; is this an option, an extra argument / overload, or an entirely new method?

Thanks!

[djones]

Related https://github.com/percy/percy-cypress/issues/56

[StevenLangbroek]

@djones happy to see I'm not the only one taking this route :D. What can I do? I Could see this working as key/value pairs maybe?

percySnapshot(page, 'buttons', {
  elements: {
    containedButtons: '.buttons.contained',
    outlineButtons: '.buttons.outline',
  }
});

[Robdel12]

Left a comment on a related issue: https://github.com/percy/percy-cypress/issues/56#issuecomment-824183541

Hey everyone! Sadly, this isn't something that is going to be implemented in the near future. It's also not an SDK specific issue (its a product issue) so I'm going to close this (& related issues). Maybe we create a meta repo with a discussion topic for product issues? Not sure (cc @djones)

With that said, this needs to be implemented in the rendering environment, where browsers easily can isolate & capture screenshots of elements (and/or the differ crops to the bounding box of the element). It's a huge rabbit hole trying to capture a subset of the DOM to send to the API for capture. You're going to miss parent>child CSS relationships, have missing assets, collapsed box model issues (when elements rely on sibling/parents for padding/margin), etc. I'm sure if anyone has attempted to use domTransformation, you've noticed it's not cut and dry as plucking a DOM node out of the tree.