Add more advanced screenshot clipping options

[mattbrailsford]

Current behavior:

When creating a screenshot you can pass an options object with a clip option which accepts an x, y, width and height setting defining the absolute position that you want the screenshot to be clipped to.

Desired behavior:

I’d like to see the clipping options be extended to support relative or calculated coordinates. For example, the following could define a screenshot the viewport dimensions but inset by 50px.

cy.screenshot({ capture: “viewport”, clip: { inset: 50 } });

Or when screenshotting an element, allow offsetting it’s coordinates to capture 20px of its surrounding area.

cy.get(“#myId”).screenshot({ clip: { offset: 20 });

My use case for this is mostly to use cypress for automating documentation screenshots, but I’m sure it could have uses within the testing arena.

[sebinsua]

@mattbrailsford My colleague and I might try to implement this. We couldn't decide whether to have a padding option, or the inset/offset idea you put forth. Is there some prior art to the naming you recommended?

Edit: TestCafe does this very differently.

[NMinhNguyen]

An API like this might be good? puppeteer/puppeteer#1692 (comment)

[sebinsua]

We've raised a preliminary PR #5078.

/cc @mattbrailsford @jennifer-shehane

[mattbrailsford]

@sebinsua sorry I never replied to your question, but this looks great. I think basing it on padding is a good solution. Inset could technically be achieved via a negative padding value so sounds like two birds with one stone 👍

[cypress-bot]

The code for this is done in cypress-io/cypress#5078, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 3.5.0.