meinaart / cypress-plugin-snapshots

Plugin for snapshot tests in Cypress.io
MIT License
491 stars 116 forks source link

different screen shots for the same test #104

Open nweiser1 opened 4 years ago

nweiser1 commented 4 years ago

I run the same exact test multiple time, which basically opens up a static page and compares screens each time the screen shot is slightly different as if its ignoring the capture setting or the resolution, i tried viewport and full screen, what else am I missing?

cy.visit(/kits/1233) cy.wait(900) cy.document().toMatchImageSnapshot({ name: 1233 })

this is my "env": { "cypress-plugin-snapshots": { "autoCleanUp": true, "autopassNewSnapshots": true, "excludeFields": [], "imageConfig": { "createDiffImage": true, "resizeDevicePixelRatio": true, "threshold": 0.01, "thresholdType": "pixel" }, "screenshotConfig": { "blackout": [], "capture": "viewport", "clip": null, "disableTimersAndAnimations": true, "log": true, "scale": false, "timeout": 30000, "log": true } } }

stevenvachon commented 4 years ago

Also toMatchImageSnapshot('name') like Cypress' screenshot('name') would be nice.

askirmas commented 4 years ago

Check your cypress run parameters like browser - it sounds like you're running chrome and electron. Also for applying viewport sizes I added to cypress/plugins/index.js

  const {viewportWidth: w, viewportHeight: h} = config
  on('before:browser:launch', (browser = {}, launchOptions) => {
    switch (browser.name) {
      //browser.family === 'chromium' && browser.name !== 'electron')
      case 'chrome':
        launchOptions.args.push(`--window-size=${w},${h}`)
        /*
        launchOptions.push('--cast-initial-screen-width=1600')
        launchOptions.push('--cast-initial-screen-height=900')
         */
        break
      case 'electron':
        launchOptions.preferences.width = w;
        launchOptions.preferences.height = h;
        break
    }
    return launchOptions
  })  

It is from some not shallow cypress documentation

askirmas commented 4 years ago

Also toMatchImageSnapshot('name') like Cypress' screenshot('name') would be nice. https://github.com/meinaart/cypress-plugin-snapshots/blob/89f0dca1a2feec0a0a4b02d7bf4e8b119f4e6a16/types/index.d.ts#L24

stevenvachon commented 4 years ago

@askirmas that's toMatchImageSnapshot({ name: 'name' }), which is longer and less convenient.

nweiser1 commented 4 years ago

Check your cypress run parameters like browser - it sounds like you're running chrome and electron. Also for applying viewport sizes I added to cypress/plugins/index.js

  const {viewportWidth: w, viewportHeight: h} = config
  on('before:browser:launch', (browser = {}, launchOptions) => {
    switch (browser.name) {
      //browser.family === 'chromium' && browser.name !== 'electron')
      case 'chrome':
        launchOptions.args.push(`--window-size=${w},${h}`)
        /*
        launchOptions.push('--cast-initial-screen-width=1600')
        launchOptions.push('--cast-initial-screen-height=900')
         */
        break
      case 'electron':
        launchOptions.preferences.width = w;
        launchOptions.preferences.height = h;
        break
    }
    return launchOptions
  })  

It is from some not shallow cypress documentation

thanks! Already have something like this in my code. doesnt help.

davidkhess commented 4 years ago

Forcing chrome to a particular size with the fix above to cypress/plugins/index.js worked for me. It appears that chrome was running at a slightly different window size with cypress run vs. with cypress open. Using this to force the same size on both fixed it for me.