Part 26 - Automated Visual Testing with Cypress using - Open Source Snapshot Plugin & Percy

In this video I've shown how to do automated Visual UI Testing with Cypress using : -
1. CYPRESS-PLUGIN-SNAPSHOTS
2. CYPRESS-PERCY
I've also shown how to test Canvas element in Cypress.
Website for Practice
qaboxletstestc...
JAVASCRIPT
• JavaScript Tutorial fo...
FRAMEWORK, ASSERTION, REPORT
• JavaScript Testing Fra...
ELEMENT LOCATOR
jQuery -
• jQuery - find UI eleme...
CSS SELECTOR
• Learn CSS Selectors (i...
XPath
• Master XPath for UI Au...
Nodejs Basics • Nodejs Basics
WEB & API CONCEPTS
Important API Testing Concepts - API TESTING 101
• Important API Testing ...
Learn API Testing using Postman
• Learn API Testing usin...
Github Link: -
github.com/qab...
API Github Link: -
github.com/qab...
Conduit App link: -
react-redux.re...

[@faithb.berroya3672]

Hi sir thank you for the video. :) May I know if CYPRESS-PLUGIN-SNAPSHOTS is supported in Cypress 10?

[@balaone836]

Thanks for the details. Very helpful!! & possible to share a content to implement Cypress - Data Driven Testing with CSV/Excel !! (& Not JSON)??

[@feeding.animals9710]

Thanks for providing cypress content😊

[@seruvalingamvs8698]

Hi Sir I'm Getting below erros. Please give me a advice for that
[percy] Skipping visual tests
[percy] Error: Invalid API token.
[percy] Running "cypress run"

[@rcrider43210]

**I am Trying to draw rectangular shape on canvas in Cypress Automation, but it is not allowing to do so. All we need to click and hold from one diagonal point and drag& drop let's say from (1,1) to another coordinate point(2,2). Then our task would be done.
Note: But the problem here is the source element point (1,1) is not any element it's just a point on canvas and if we hold this value in ILocation interface then we cannot use any drag and drop plugin because in drag arguments the source & target parameter should be element string.
Have used the below trigger code also but this also did not work for me.
export function drawRectangle(start: ILocation, size: number): any {
//'start' is the mid point of coordinate
// size is 100
const source = {x: start.x, y: start.y}
const dest= {x: start.x + size, y: start.y + size }
cy.get('.div.canvas-container').click(source.x, source.y).as('sourcePoint');
cy.get('@sourcePoint'). trigger ("mousedown", {force:true})
cy.get('.div.canvas-container').trigger ("mousemove", {source, dest}, {force:true})
cy.get('.div.canvas-container').click(dest.x, dest.y).as('destPoint');
cy.get('@destPoint'). trigger ("mouseup", {force:true})
}

[@sindran126]

If my expected screenshot is dynamic in actual manner how I could compare

[@dharaniy]

Thanks for the video, by referring to the video I started learning the visual test. but I facing an issue taking the snapshot for the page, which required basic auth. I tried passing the credentials in the visit command. still, it thorinwg 401. If I run the same on cypress run command, I am able to browser opened the site.I refereed percy document, still not able to capture the snapshot. Could you please help me with this. Thanks in advance!

[@QABoxLetsTest]

I recommend you to login programmatically if that helps.

[@dharaniy]

@@QABoxLetsTest can you please the code if you have, thank you

[@QABoxLetsTest]

You may refer to the following
ruclips.net/video/-6DdZ9zscjI/видео.html

[@aldrinereynon4282]

Hello,
I've tried running percy on cypress using the v3 setup and I am encountering "Missing Percy token" issue

[@QABoxLetsTest]

Hey, the error says everything. You gotta setup Percy token
To set up PERCY_TOKEN on windows we have to use powershell.
1.Open powershell on windows
2. Go to project library through commands cd, cd..
3.Set the PERCY_TOKEN $env:PERCY_TOKEN='your token'
4. Then run your project using powershell through your command npm run test:percy

[@kannekantimanoj431]

hello, i have to take a snapshot of entire page (scrolling one). But i am getting only 1024 pixels or something like this. I need to get that. can you help me with that? and what is the min-height in percy options. can you please reply back..

[@QABoxLetsTest]

Try this please
Cypress.Screenshot.defaults({
scale: true,
})
minHeight: An integer specifying the minimum height of the resulting snapshot, in pixels. Defaults to 1024px. read more from docs.percy.io/v1/docs/cypress

[@kannekantimanoj431]

@@QABoxLetsTest thanks for the reply, but i want to take screenshot using percy, i have seen about that 1024px and it is saying max it can be 2000px, does this means can't we take a screenshot(long page) in one go?

[@QABoxLetsTest]

Screenshot is being taken using the following approach-
Open DevTools by pressing F12 , ctrl + shift + i , or by opening the menu > More Tools > Developer tools. Open the 'Run command' window by pressing ctrl + shift + p or by opening the menu inside of the DevTools window, click 'Run command'. Type 'Screenshot' and select 'Capture screenshot'.
Regarding Percy -
Can I snapshot only a portion of my page?
Although this is not a feature in Percy itself, you can get this behavior by creating webpages that contain only the portion you want to snapshot. In many frameworks, you can do this programmatically within your integration tests before you take the snapshot.
So, you need to generate it from Cypress only

[@Youtooobo]

Перси самый неудобный для сравнения скриншотов.