ResembleJS issue

CodeceptJS
1

Hey guys,
I’ve been trying to implement the Resemble helper but it doesn’t work correctly for me. At the end of the test the browser should close and the console should display the tolerance level and mismatch percentage. Then, a diff image should be saved in the specified diff folder.

Instead, only the tolerance level is printed in console and it does not save a diff image and also the browser remains open. It does take the screenshot though and save it in the ‘output’ folder. I tried updating webdriver to v5 as specified and followed the setup docs word for word. When debugging resemble.js and index.js i have found that the compare functions are not being executed for some reason. Please help me troubleshoot this, i’ve been trying for 3 days2019-06-11_12-26-18

2

Hello,

I can help you with the issue, can you please provide me the tests that you are trying to run?

Regards,
Puneet Kala

3

right now i’m just trying to create an extremely simple test just to see the helper workingtest

1 Like
4

So I think the problem is, you don’t have the image present in the base folder since you are running the test for the first time, you should make sure you have an image in the base folder.

let me explain, For image comparison to work, codecept must find a base image in the baseFolder and a screenshot image in the output folder, it will use these two images to make a comparison and produce a diff image in the diff folder.
Try running the same test using the following last line:

I.seeVisualDiff("home_test.png", {prepareBaseImage: true, tolerance:2});

If you notice here, I update prepareBaseImage option to true, this will move the image present in the screenshot folder to baseFolder and then you must write a new scenario to make a comparison.

1 Like
5

I did the exact same thing the first time i ran it. There is a picture in both the base and output folders and the picture names are the same

6

Please provide complete configuration file and test file.

also provide error logs that you get from console.

7

config file:

  exports.config = {
  tests: 'tests/waitFor.js',
  timeout: 10000,
  output: './output',
  helpers: {
    WebDriver: {
      url: 'https://www.google.com', // can't provide the actual url im working on due to company policy. helper doesn't work on any website though anyway.
	    windowSize: 'maximize',
      browser: 'chrome',
      restart: false,
      keepBrowserState: false,
      keepCookies: false
    },
    
    ResembleHelper : {
      require: 'codeceptjs-resemblehelper',
      screenshotFolder : './output/',
      baseFolder: './base_images/',
      diffFolder: './diff_images/',

    }
  },

  include: {
    I: './steps_file.js',
	data: './data.js'
  },
  bootstrap: false,
  mocha: {},
  name: 'Codecept'
  }

test file:

Feature('exp');


Scenario('resemble', async (I) => {
  I.amOnPage('/');
  I.wait(2);
  I.saveScreenshot("home_test.png");
  I.seeVisualDiff("home_test.png", {prepareBaseImage: false, tolerance: 2});
})

console output showing only the tolerance level output (ran with --steps flag):

2019-06-11_12-12-49
2019-06-11_12-12-49.jpg979×441 37.8 KB

8

Thanks a lot for the files, I am still not able to reproduce the issue you reported. I am using

./node_modules/.bin/codeceptjs run tests/resemble_test.js --steps

image
image.png1155×516 61 KB

Configuration file is same, The version of resemblejs-helper, webdriver and codeceptjs are the following.

"codeceptjs": "^2.1.3",
"codeceptjs-resemblehelper": "^1.5.0",
"webdriverio": "^5.9.4"

Can you please run the tests with these additional options and provide me console output,
--debug --verbose

9

my versions are as follows:

codeceptjs: 2.1.4
codeceptjs-resemblehelper: 1.5.0
webdriverio: 5.10.1

here is the console output for --debug --verbose

debug
debug.jpg1920×708 204 KB

10

Please give me your skype id or I can invite you for a call on Zoom, if thats okay for you?

11

this is my skype email: [deleted]. i am waiting for your call. thanks!

12

I too was struggling with resemblejs. And only thing that helped is counter-intuitive: although you are using the codecept.conf.js instead of JSON you should config Resemble in JSON format:

        "ResembleHelper" : {
            "require": "codeceptjs-resemblehelper",
            "screenshotFolder": "./output/",
            "baseFolder": "./visual/base/",
            "diffFolder": "./visual/diff/"
        }
13

Hello, is there a certain configuration for resemble helper which will continue the test even if it detects a visual change? This is the problem that I am having:
In one of my scenarios (I am using codeceptjs with webdriver), I have a for loop which loops through the pages of a pdf file opened in the browser and takes snapshots of each page. Right now, whenever a change is detected say on page 2, my test exits. I want it to continue looping through the other pages of the pdf file and mark the failed issues after the for loop is done. Is there a way to achieve this please?
I was thinking maybe there is a configuration which I can add in the helper.
This is my conf:
“ResembleHelper” : {
“require”: “codeceptjs-resemblehelper”,
“screenshotFolder” : “C:/ResembleScreenshots/output/”,
“baseFolder”: “C:/ResembleScreenshots/base/”,
“diffFolder”: “C:/ResembleScreenshots/diff/”
},

Thank you for your help.

14

HI Puneet,
Can you help me for using resemble ,i want to compare two image.
Below is my codecept configuration:
ResembleHelper : {
require: “codeceptjs-resemblehelper”,
screenshotFolder : “./testresult/screenshot/”,
baseFolder: “./testresult/base/”,
diffFolder: “./testresult/diff/”
}
},
package.json:
“devDependencies”: {

"codeceptjs": "^2.5.0",

"mocha": "^7.1.1",

"mocha-junit-reporter": "^1.23.3",

"mocha-multi": "^1.1.3",
"npm-run": "^5.0.1",
"puppeteer": "^2.1.1",

“protractor”: “^6.0.0”,
“tesseractocr”: “^1.2.1”,
“webdriverio”: “^5.21.0”,
“zip-local”: “^0.3.4”,
“codeceptjs-resemblehelper”:"^1.9.0"

Please help me how to compare image in codecept

15

This is a great explanation. I couldn’t understand the notion of the output folder in conjunction with the base folder. How it works for me. Thank you :slight_smile: