Screenshot a single element

If you would like to scope a screenshot to a specific element that has the same matching selector as other elements on the page you’ll have to get more specific with your selector. This can be done by either adding another unique selector to that element or by using standard CSS selectors to get more specific. This is the same way you would write CSS – Percy doesn’t add anything to this process.

For example, given the below DOM:

Instead of using just .underline to select the element, you would want to either specify the element type (h1 / p) or by using CSS tree-structural pseudo-classes like :last-of-type or :nth-child.

Likewise,

• p.underline scope selects the ‘first’ paragraph
• p.underline:last-of-type scope selects last paragraph

It may happen that your single-element screenshots are not working correctly with canvas/video elements.

During DOM serialization <canvas>, <video> elements are converted to <img>. Check canvas elements in Percy’s SDK Workflow. This can cause the selector to not match, and an incorrect screenshot.

To work around this, we can use CSS tree structural pseudo-classes as suggested in the previous section.

• Instead of canvas or video you’ll need to change it to img
• If there is only a single canvas/video tag inside div we can directly use .selector as the scope.

Likewise,

• .selector img:nth-of-type(2) scope selects the ‘second’ canvas
• .selector img:last-of-type scope selects the ‘last’ video

When dealing with Web elements, you may use the below utility function that returns CSS selector i.e scope in our case, that could be easily passed to the percySnapshot function.