How to use image compare in Puppeteer

CodeceptJS
1

I am using Puppeteer and i want to do image compare how to do image c
Can you help me.

Thanks
Sasmita

2

Hi @sasmita you can apply this guide: https://codecept.io/visual/

If you hit a specific road block, feel free to ask again :smiley:

3

HI
I checked the doc for visual testing and did the setup
Below is my cofiguration file.
ResembleHelper : {
require: “codeceptjs-resemblehelper”,
screenshotFolder : “./testresult/screenshot/”,
baseFolder: “./testresult/base/”,
diffFolder: “./testresult/diff/”
}
},
Created 3 folder

below code:

Feature File:
When the user launch “search” screen

Steps File.
When(‘the user launch {string} screen’, (arguments) => {
let arg = arguments.split(",");
navigation.navigateTo(…arg);
//I.saveScreenshot(“music.png”);
I.seeVisualDiff(“music_9.png”, {tolerance: 2, prepareBaseImage: false});
});
I created one image music_9.png and kept in Base folder
But when am running the test case its telling music_9.png is not defined and not available in screenshotFolder

If i keep music_9.png inside both base and screenshotFolder test case is running
But its not failing if i am going to search screen and comparing with music image its not failing

Can you help me

4

hi
thanks for the video,i am able to compare image using I.seeVisualDiff(“music_now.png”, {tolerance: 3, prepareBaseImage: false});
But i an not able to compare image using X-path
I.seeVisualDiffForElement("#content",“music_now1.png”, {tolerance: 3, prepareBaseImage: false})

Please help me

5

HI ,

I want to add Image compare method in Screen definition me
we are using screen definition for navigation

Thanks
Sasmita

6

I was running into the same issue and found out that resembleJS has an additional parameter that seems to be set to True by default: skipFailure.
I.seeVisualDiff(“music_9.png”, {tolerance: 2, prepareBaseImage: false, skipFailure: false});
should fix it.