How do I compare the visual differences of an element on a page using CodeceptJS?

CodeceptJS
1

Hi everyone, I posted a question about using the seeVisualDiffForElements method on SO, only to find out that CodeceptJS has it’s own community forum.

I was wondering whether it would be best suited to ask here instead of SO as I don’t see many questions asked about CodeceptJS on their.

Thanks.

2

Could you please share your config file?

3 
exports.config = {
  tests: './*_test.js',
  output: './tests/output/',
  helpers: {
    Puppeteer: {
      url: 'http://localhost',
      waitForNavigation: 'networkidle0',
      show: true
    },
    ResembleHelper: {
      require: 'codeceptjs-resemblehelper',
      screenshotFolder: './tests/output/',
      baseFolder: './tests/screenshots/base/',
      diffFolder: './tests/screenshots/diff/'
    }
  },
  include: {
    I: './steps_file.js'
  },
  plugins: {
    screenshotOnFail: {
      enabled: false
    }
  },
  bootstrap: null,
  mocha: {},
  name: 'CodeceptSetup'
};

This is the contents of my config file.

4

In the readme of the codeceptjs-resemblehelper it states that it is used with WebDriver. That maybe the reason why it fails with Puppeteer

5

Ah my mistake, that will be why! Thanks for pointing that out.