Mask the certain elements/areas on Snapshot with Percy-Cypress

[srinu-kodi]

Hi Team,
I am doing a visual regression POC with percy-cypress and found that it is missing the masking elements feature. After lot of struggle, I got to see percy specific CSS here.
However if I understood correctly, it is expecting me to add percy-cypress specific CSS in application code, which is pretty much NO NO as application developers will not write the code w.r.t any library.

So is there any better mechanism how can we achieve this goal as this is pretty much required when we deal with visual regression. I am expecting something like below.

For ex: cy.percySnapshot('snapshotname', optionsArray)

cy.percySnapshot('snapshotname', {mask: ["[data-testid='locator']"]})
(or)
cy.percySnapshot('snapshotname', {mask: ["[data-testid='locator']"]})
(or)
cy.percySnapshot('snapshotname', {mask: ["[data-testid='locator1']", "[data-testid='locator2']"]})

Please suggest if anyone come across my situation and wanted to provide some info.

Thanks a lot

[Robdel12]

Hey @srinu-kodi! Percy itself does not provide a way to mask elements. You can do this yourself, though, by passing Percy CSS as a snapshot option:

cy.percySnapshot('snapshotname', { 
  percyCSS: "[data-testid='locator'] { */ css here to mask the elements */ }" 
})

[srinu-kodi]

Hi @Robdel12 Thansk a lot for your swift reply.
I am really sorry to say that I didn't mention the code snippet in my above description.

Actually I have used the same code base like you mentioned in my test and however when percy-cypress captured the snapshot, snapshot didn't mask the specified locator component and there is no indication as such though. So I am assuming that it as not masked during the test.

Please let me know if the understanding is valid or what am I missing here.