Hi all, I am trying to compare an automated screenshot to an existing base screenshot.
The existing screenshot is 1024 x 8338 (width x height) pixel size.
The new screenshot is 1009 x 10916, although I have specified a 1024 px window width in my settings.
helpers: {
Puppeteer: {
url: '',
show: true,
windowSize: '1024x800',
fullPageScreenshots: true
},
running a simple screenshot test, like
I.amOnPage('/');
I.saveScreenshot('Homepage_Screenshot.png');
I.seeVisualDiff('Homepage_Screenshot.png', {
tolerance: 2,
prepareBaseImage: false
});
But I see a warning
- Homepage
Test website content and navigation:
The base image is of 8383 X 1024 and actual image is of 10916 X 1009. Please use images of same dimensions so as to avoid any unexpected results.
at Test. (./codecept/homepage_test.js:19:5)
The same warning / error is shown no matter if I run codecept in a visual or headless mode (HEADLESS=true codeceptjs run --steps). I try to inspect what is happening when not running headless, so I can add a screenshot and more details. (I have blurred the hero image because the website is not officially launched yet).
The generated diff image shows the comparison overlay of the images that differ in width, which makes the screenshot look like a surreal artwork, but produces unhelpful false positive noise as nearly every pixel is marked as deviant from the base image.
When I watch chromium in a visible (non-headless) mode, I notice an unintended padding on the right side of the page that is not present when opening the same page in a regular Chrome / Chromium / Vivaldi desktop browser, which appears after the page load but disappears after a resize event that I do not trigger programmatically. Another unexpected resize makes the padding appear again before the browser is closed and the test fails. It happens when I only run the specified 1024px width desktop test scenario (codeceptjs run --steps) started from an npm build target.
package.json target:
"codeceptjs:default": "codeceptjs run --steps",
"codeceptjs:headless": "HEADLESS=true codeceptjs run --steps"
versions / dev dependencies:
"devDependencies": {
"@codeceptjs/configure": "^0.10.0",
"@testomatio/reporter": "^1.0.0",
"codeceptjs": "^3.5.0",
"codeceptjs-resemblehelper": "^1.9.6",
"playwright": "^1.25.2",
"puppeteer": "^20.0.0",
npm 8.19.3
node v19.2.0
Browser: Chrome for Testing v114.0.5735.133
OS: Ubuntu 22.04.2 LTS GNU/Linux 6.2.0 x86_64
Screenshots:
- codecept-width-failure.png (padded browser, console output)
- codecept-diff-overlay.png (generated diff image)
I had to combine both screenshots into 1 image file, as new users are not allowed to post more than 1 image attachment.
