feat: add forceDeviceFactor option

when forceDeviceFactor=true scale images to match 1x device scale factor
set additional chrome flags to make sure of proper device scale factor

Signed-off-by: Jakub Freisler <jakub@frsource.org>

README.md

@@ -134,7 +134,11 @@ cy.matchImage({
  imagesDir: 'this-might-be-your-custom/maybe-nested-directory',
  // maximum threshold above which the test should fail
  // default: 0.01
- maxDiffThreshold: 0.1
+ maxDiffThreshold: 0.1,
+ // forces scale factor to be set as value "1" 
+ // helps with screenshots being scaled 2x on high-density screens like Mac Retina
+ // default: true
+ forceDeviceScaleFactor: false,
 })
 ```
 

package.json

@@ -33,6 +33,7 @@
  "@semantic-release/release-notes-generator": "^10.0.2",
  "@types/pixelmatch": "^5.2.4",
  "@types/pngjs": "^6.0.1",
+ "@types/sharp": "^0.29.5",
  "@typescript-eslint/eslint-plugin": "^5.1.0",
  "@typescript-eslint/parser": "^5.1.0",
  "cypress": "^8.6.0",
@@ -63,7 +64,8 @@
  "dependencies": {
  "move-file": "^2.1.0",
  "pixelmatch": "^5.2.1",
- "pngjs": "^6.0.0"
+ "pngjs": "^6.0.0",
+ "sharp": "^0.30.1"
  },
  "publishConfig": {
  "access": "public"

src/commands.ts

@@ -37,6 +37,11 @@ Cypress.Commands.add(
  nameCacheCounter[title] = -1;
  title += ` #${++nameCacheCounter[title]}`;
 
+ const scaleFactor =
+ Cypress.env("pluginVisualRegressionForceDeviceScaleFactor") === false
+ ? 1
+ : 1 / window.devicePixelRatio;
+
  const updateImages =
  options.updateImages ||
  (Cypress.env("pluginVisualRegressionUpdateImages") as
@@ -97,6 +102,7 @@ Cypress.Commands.add(
  .task(
  TASK.compareImages,
  {
+ scaleFactor,
  imgNew: imgPath,
  imgOld: imgPath.replace(FILE_SUFFIX.actual, ""),
  updateImages,

src/plugins.ts

@@ -1,9 +1,10 @@
 import path from "path";
 import pixelmatch from "pixelmatch";
 import fs from "fs";
-import { PNG } from "pngjs";
+import { PNG, PNGWithMetadata } from "pngjs";
 import { FILE_SUFFIX, IMAGE_SNAPSHOT_PREFIX, TASK } from "./constants";
 import moveFile from "move-file";
+import sharp from "sharp";
 
 type NotFalsy<T> = T extends false | null | undefined ? never : T;
 
@@ -29,7 +30,25 @@ const fillSizeDifference = (width: number, height: number) => (image: PNG) => {
  return image;
 };
 
-const alignImagesToSameSize = (firstImage: PNG, secondImage: PNG) => {
+const importAndScaleImage = async (cfg: {
+ scaleFactor: number;
+ path: string;
+}) => {
+ const imgBuffer = fs.readFileSync(cfg.path);
+ const rawImgNew = PNG.sync.read(imgBuffer);
+ if (cfg.scaleFactor === 1) return rawImgNew;
+
+ const newImageWidth = Math.ceil(rawImgNew.width * cfg.scaleFactor);
+ const newImageHeight = Math.ceil(rawImgNew.height * cfg.scaleFactor);
+ await sharp(imgBuffer).resize(newImageWidth, newImageHeight).toFile(cfg.path);
+
+ return PNG.sync.read(fs.readFileSync(cfg.path));
+};
+
+const alignImagesToSameSize = (
+ firstImage: PNGWithMetadata,
+ secondImage: PNGWithMetadata
+) => {
  const firstImageWidth = firstImage.width;
  const firstImageHeight = firstImage.height;
  const secondImageWidth = secondImage.width;
@@ -63,6 +82,21 @@ export const initPlugin = (
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions
 ) => {
+ if (config.env["pluginVisualRegressionForceDeviceScaleFactor"] !== false) {
+ // based on https://github.com/cypress-io/cypress/issues/2102#issuecomment-521299946
+ on("before:browser:launch", (browser, launchOptions) => {
+ if (browser.name === "chrome" || browser.name === "chromium") {
+ launchOptions.args.push("--force-device-scale-factor=1");
+ launchOptions.args.push("--high-dpi-support=1");
+ } else if (browser.name === "electron" && browser.isHeaded) {
+ // eslint-disable-next-line no-console
+ console.log(
+ "There isn't currently a way of setting the device scale factor in Cypress when running headed electron so we disable the image regression commands."
+ );
+ }
+ });
+ }
+
  on("task", {
  [TASK.getScreenshotPath]({ title, imagesDir, specPath }) {
  return path.join(
@@ -86,8 +120,9 @@ export const initPlugin = (
 
  return null;
  },
- [TASK.compareImages](
+ async [TASK.compareImages](
  cfg: {
+ scaleFactor: number;
  title: string;
  imgNew: string;
  imgOld: string;
@@ -100,7 +135,10 @@ export const initPlugin = (
  let errorMsg: string | undefined;
 
  if (fs.existsSync(cfg.imgOld) && !cfg.updateImages) {
- const rawImgNew = PNG.sync.read(fs.readFileSync(cfg.imgNew));
+ const rawImgNew = await importAndScaleImage({
+ scaleFactor: cfg.scaleFactor,
+ path: cfg.imgNew,
+ });
  const rawImgOld = PNG.sync.read(fs.readFileSync(cfg.imgOld));
  const isImgSizeDifferent =
  rawImgNew.height !== rawImgOld.height ||