Visual Differing Tests with Puppeteer and PixelMatch

Tyler Clark
InstructorTyler Clark

Share this video with your friends

Send Tweet

Take your end to end tests to the next level by comparing your current application's view with an already accepted screenshot. With the combination of running a live chromium browser, taking a screenshot and running a pixelmatch test, we are able to make sure our UI matches exactly as intended. We will make the test pass and then have it fail by adding an extra p tag to our App.js

Deniz Oguz
Deniz Oguz
~ 3 years ago

Hi I have started using Cypress.io to write end to end tests. I don't have much experience in Cypress.io but as far as I can view there is no much difference between Puppeteer and Cypress.io. Do you have any guidance on when we should choose Puppeteer and when we should choose Cypress.io. Thanks.

Michael Estwanick
Michael Estwanick
~ 3 years ago

What is the value of this approach instead of using something like jest-image-snapshot?

0 plusX
0 plusX
~ 3 years ago

Great introduction to puppeteer. Thank you very much!

Tyler Clark
Tyler Clarkinstructor
~ 3 years ago

Michael- Jest-image-snapshot uses pixelmatch behind the scenes. From the jest image snapshot docs:

"Jest matcher that performs image comparisons using pixelmatch and behaves just like Jest snapshots do! Very useful for visual regression testing."

Tyler Clark
Tyler Clarkinstructor
~ 3 years ago

Hi I have started using Cypress.io to write end to end tests. I don't have much experience in Cypress.io but as far as I can view there is no much difference between Puppeteer and Cypress.io. Do you have any guidance on when we should choose Puppeteer and when we should choose Cypress.io. Thanks.

Cypress is designed to be a E2E testing tool. So it has a lot more features than puppeteer. Puppeteer is not designed to be used for this purpose and is really just a browser to test with. So it's like comparing apples to oranges. Both have their tradeoffs. There is a course in the works on cypress.io!

Chester Rivas
Chester Rivas
~ 3 years ago

Just go extremely fast and you too can be as a coding God.

Nick
Nick
~ 2 years ago

Doesn't work.