@applitools/screenshoter 3.3.3 → 3.3.7

package/CHANGELOG.md

@@ -4,6 +4,27 @@
 ## Unreleased
 
 
+## 3.3.7 - 2022/2/15
+
+- fix image scaling on pages without viewport metatag
+- fix safari's viewport detection on iOS devices
+- updated to @applitools/snippets@2.1.13 (from 2.1.12)
+- updated to @applitools/utils@1.2.13 (from 1.2.12)
+
+## 3.3.6 - 2022/2/9
+
+- fix testing
+- updated to @applitools/utils@1.2.12 (from 1.2.11)
+
+## 3.3.5 - 2022/2/8
+
+- add "files" field to the package.json to avoid unnecessary files to be published
+- updated to @applitools/utils@1.2.11 (from 1.2.5)
+
+## 3.3.4 - 2021/12/23
+
+- updated to @applitools/snippets@2.1.12 (from 2.1.11)
+
 ## 3.3.3 - 2021/12/22
 
 - improve default rotation and scaling logic

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/screenshoter",
-  "version": "3.3.3",
+  "version": "3.3.7",
   "description": "Applitools universal screenshoter for web and native applications",
   "keywords": [
     "applitools",
@@ -26,19 +26,30 @@
     "email": "team@applitools.com"
   },
   "main": "./index.js",
-  "directories": {
-    "lib": "./lib",
-    "test": "./test"
-  },
+  "files": [
+    "src",
+    "index.js"
+  ],
   "scripts": {
     "lint": "eslint . --ext .js",
     "test": "yarn test:it && yarn test:e2e",
-    "test:it": "mocha --no-timeouts './test/it/*.spec.js'",
-    "test:e2e": "mocha --no-timeouts './test/e2e/*.spec.js'",
+    "test:it": "mocha ./test/it/*.spec.js --no-timeouts",
+    "test:e2e": "mocha ./test/e2e/**/*.spec.js --no-timeouts --parallel --jobs ${MOCHA_JOBS:-1}",
+    "test:e2e:web": "mocha ./test/e2e/web/*.spec.js --no-timeouts -r @applitools/test-utils/mocha-hooks/docker --parallel --jobs ${MOCHA_JOBS:-15}",
+    "test:e2e:android": "mocha ./test/e2e/android*/*.spec.js --no-timeouts --parallel --jobs ${MOCHA_JOBS:-1}",
+    "test:e2e:ios": "mocha ./test/e2e/ios*/*.spec.js --no-timeouts --parallel --jobs ${MOCHA_JOBS:-1}",
+    "setup": "yarn docker:setup && yarn android:setup && yarn ios:setup && yarn appium:setup",
+    "setup:web": "yarn docker:setup",
+    "setup:android": "yarn android:setup && yarn appium:setup",
+    "setup:ios": "yarn ios:setup && yarn appium:setup",
+    "android:setup": "node ./scripts/android-emulator.js",
+    "android:shutdown": "adb -s emulator-5555 emu kill || true && adb -s emulator-5557 emu kill || true",
     "docker:setup": "node ../scripts/scripts/generate-docker-compose-config.js && docker-compose up -d",
     "docker:teardown": "docker-compose down",
-    "setup": "yarn docker:setup",
+    "ios:setup": "node ./scripts/ios-simulator.js",
+    "appium:setup": "mkdir -p ./logs && appium --address 127.0.0.1 --port 4723 --base-path /wd/hub --log-level error:info --log ./logs/appium.log &",
     "deps": "bongo deps",
+    "gh:publish": "gh workflow run publish-screenshoter.yml --ref $(git rev-parse --abbrev-ref HEAD)",
     "preversion": "bongo preversion",
     "version": "bongo version",
     "postversion": "bongo postversion --skip-release-notification"
@@ -49,27 +60,28 @@
     }
   },
   "dependencies": {
-    "@applitools/snippets": "2.1.11",
-    "@applitools/utils": "1.2.5",
+    "@applitools/snippets": "2.1.13",
+    "@applitools/utils": "1.2.13",
     "png-async": "0.9.4"
   },
   "devDependencies": {
-    "@applitools/driver": "1.4.6",
-    "@applitools/sdk-release-kit": "0.13.4",
-    "@applitools/spec-driver-webdriverio": "1.2.5",
-    "@applitools/test-utils": "1.0.10",
+    "@applitools/driver": "1.4.14",
+    "@applitools/sdk-release-kit": "0.13.11",
+    "@applitools/spec-driver-webdriverio": "1.2.7",
+    "@applitools/test-utils": "1.0.12",
+    "appium": "^1.22.2",
     "chromedriver": "^95.0.0",
     "eslint": "^7.9.0",
     "eslint-plugin-mocha-no-only": "^1.1.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.3.8",
-    "mocha": "^8.2.1",
+    "mocha": "^9.2.0",
     "pixelmatch": "^5.2.1",
     "prettier": "1.19.0",
     "webdriverio": "^7.16.7"
   },
   "engines": {
-    "node": ">= 8.9.0"
+    "node": ">= 10.0.0"
   }
 }

package/src/find-image-pattern.js

@@ -1,19 +1,22 @@
 function findImagePattern(image, pattern) {
   for (let pixel = 0; pixel < image.width * image.height; ++pixel) {
     if (isPattern(image, pixel, pattern)) {
-      const patterOffset = pattern.offset * pattern.pixelRatio
+      const patterOffset = Math.round(pattern.offset * pattern.scale)
       return {x: (pixel % image.width) - patterOffset, y: Math.floor(pixel / image.width) - patterOffset}
     }
   }
   return null
 }
 
-function isPattern(image, index, pattern) {
-  const itemLength = pattern.size * pattern.pixelRatio
-  for (const [itemIndex, itemColor] of pattern.mask.entries()) {
-    for (let partOffset = itemIndex * itemLength; partOffset < (itemIndex + 1) * itemLength; ++partOffset) {
-      const pixelColor = pixelColorAt(image, index + partOffset)
-      if (pixelColor !== itemColor) return false
+function isPattern(image, offset, pattern) {
+  const length = Math.round(pattern.size * pattern.scale)
+  for (const [index, color] of pattern.mask.entries()) {
+    const maxLength = index * pattern.size * pattern.scale // how many pixels actually could be occupied at this point
+    const missedPixels = Math.abs(maxLength - Math.round(maxLength)) // how many pixels were missed due to rounding
+    const skippedPixels = missedPixels >= 0.25 ? Math.ceil(missedPixels) : 0 // how many pixels should be skipped from checking in pattern (usually 1 or 0)
+    for (let pixel = index * length; pixel < (index + 1) * length - skippedPixels; ++pixel) {
+      const pixelColor = pixelColorAt(image, offset + pixel)
+      if (pixelColor !== color) return false
     }
   }
   return true
@@ -27,7 +30,10 @@ function pixelColorAt(image, index) {
 
   const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b
 
-  return luminance < 128 ? /* black */ 1 : /* white */ 0
+  // if luminance is between black and white check the color of previous pixel
+  if (luminance >= 112 && luminance <= 144) return pixelColorAt(image, index - 1)
+  else if (luminance < 128) return /* black */ 1
+  else return /* white*/ 0
 }
 
 module.exports = findImagePattern

package/src/image.js

@@ -22,7 +22,7 @@ function makeImage(data) {
   } else if (data.isImage) {
     transforms = data.transforms
     image = data.toRaw()
-    size = utils.geometry.scale(data.size, 1 / transforms.scale)
+    size = data.rawSize
   } else if (utils.types.has(data, ['width', 'height'])) {
     image = fromSize(data)
     if (data.data) image.data = data.data
@@ -38,9 +38,18 @@ function makeImage(data) {
       return true
     },
     get size() {
-      return utils.geometry.round(
-        utils.geometry.rotate(utils.geometry.scale(size, transforms.scale), transforms.rotate),
-      )
+      const croppedSize = utils.geometry.size(transforms.crop || size)
+      const scaledSize = utils.geometry.scale(croppedSize, transforms.scale)
+      const rotatedSize = utils.geometry.rotate(scaledSize, transforms.rotate)
+      return utils.geometry.round(rotatedSize)
+    },
+    get unscaledSize() {
+      const croppedSize = utils.geometry.size(transforms.crop || size)
+      const rotatedSize = utils.geometry.rotate(croppedSize, transforms.rotate)
+      return utils.geometry.round(rotatedSize)
+    },
+    get rawSize() {
+      return size
     },
     get transforms() {
       return {...transforms}
@@ -53,12 +62,10 @@ function makeImage(data) {
     },
     scale(ratio) {
       transforms.scale *= ratio
-      // size = utils.geometry.scale(size, ratio)
       return this
     },
     rotate(degrees) {
       transforms.rotate = (transforms.rotate + degrees) % 360
-      // size = utils.geometry.rotate(size, degrees)
       return this
     },
     crop(region) {
@@ -77,39 +84,47 @@ function makeImage(data) {
         ? utils.geometry.intersect(transforms.crop, utils.geometry.offset(region, transforms.crop))
         : utils.geometry.intersect({x: 0, y: 0, ...size}, region)
       transforms.crop = region
-      size = utils.geometry.size(transforms.crop)
       return this
     },
     copy(srcImage, offset) {
-      const scale = srcImage.transforms.scale
+      // if "auto" image and this is first chunk
+      if (!image && size.width === -1 && size.height === -1) transforms.scale = srcImage.transforms.scale
+
+      const unscaledOffset = utils.geometry.scale(offset, 1 / transforms.scale)
+
       if (!image) {
         size = {
-          width: Math.max(Math.floor((offset.x + srcImage.width) / scale), size.width),
-          height: Math.max(Math.floor((offset.y + srcImage.height) / scale), size.height),
+          width: Math.max(Math.floor(unscaledOffset.x) + srcImage.unscaledSize.width, size.width),
+          height: Math.max(Math.floor(unscaledOffset.y) + srcImage.unscaledSize.height, size.height),
         }
-        transforms.scale = Math.min(scale, transforms.scale)
       }
-      transforms.modifiers.push({
-        type: 'copy',
-        image: srcImage.scale(scale === transforms.scale ? 1 / scale : scale / transforms.scale).toObject(),
-        offset: utils.geometry.scale(offset, 1 / transforms.scale),
-      })
+
+      const unscale =
+        srcImage.transforms.scale === transforms.scale
+          ? 1 / srcImage.transforms.scale
+          : srcImage.transforms.scale / transforms.scale
+
+      transforms.modifiers.push({type: 'copy', image: srcImage.scale(unscale).toObject(), offset: unscaledOffset})
 
       return this
     },
     frame(topImage, bottomImage, region) {
-      const scale = topImage.transforms.scale
       const prevSize = size
-      region = utils.geometry.scale(region, 1 / scale)
+      const unscaledRegion = utils.geometry.scale(region, 1 / topImage.transforms.scale)
       size = {
-        width: Math.floor(topImage.width / scale + Math.max(size.width - region.width, 0)),
-        height: Math.floor(topImage.height / scale + Math.max(size.height - region.height, 0)),
+        width: Math.floor(topImage.unscaledSize.width + Math.max(size.width - unscaledRegion.width, 0)),
+        height: Math.floor(topImage.unscaledSize.height + Math.max(size.height - unscaledRegion.height, 0)),
       }
+
+      const unscale =
+        topImage.transforms.scale === transforms.scale
+          ? 1 / topImage.transforms.scale
+          : topImage.transforms.scale / transforms.scale
       transforms.modifiers.push({
         type: 'frame',
-        top: topImage.scale(scale === transforms.scale ? 1 / scale : scale / transforms.scale).toObject(),
-        bottom: bottomImage.scale(scale === transforms.scale ? 1 / scale : scale / transforms.scale).toObject(),
-        region,
+        top: topImage.scale(unscale).toObject(),
+        bottom: bottomImage.scale(unscale).toObject(),
+        region: unscaledRegion,
       })
       transforms.added = {width: size.width - prevSize.width, height: size.height - prevSize.height}
       return this

package/src/scroller.js

@@ -80,7 +80,6 @@ function makeScroller({logger, element, scrollingMode = 'mixed'}) {
 
   async function scrollTo(offset, element = defaultElement) {
     try {
-      // offset = {x: Math.max(offset.x, 0), y: Math.max(offset.y, 0)}
       const scrollOffset = await element.scrollTo(offset)
       return scrollOffset
     } catch (err) {
@@ -92,7 +91,6 @@ function makeScroller({logger, element, scrollingMode = 'mixed'}) {
 
   async function translateTo(offset, element = defaultElement) {
     try {
-      // offset = {x: Math.max(offset.x, 0), y: Math.max(offset.y, 0)}
       await element.scrollTo({x: 0, y: 0})
       const translateOffset = await element.translateTo(offset)
       return translateOffset
@@ -105,8 +103,15 @@ function makeScroller({logger, element, scrollingMode = 'mixed'}) {
 
   async function shiftTo(offset, element = defaultElement) {
     try {
-      // offset = {x: Math.max(offset.x, 0), y: Math.max(offset.y, 0)}
       const scrollOffset = await element.scrollTo(offset)
+      if (utils.geometry.equals(scrollOffset, offset)) return scrollOffset
+
+      // there is a "bug" in iOS that will not move a root element if it already scrolled, so it should be translated all the way
+      if (element.driver.isIOS && (await element.isRoot())) {
+        const translateOffset = await element.translateTo(offset)
+        return translateOffset
+      }
+
       const remainingOffset = utils.geometry.offsetNegative(offset, scrollOffset)
       const translateOffset = await element.translateTo(remainingOffset)
 

package/src/take-screenshot.js

@@ -60,6 +60,8 @@ async function takeScreenshot({
         ? await takeStitchedScreenshot({...target, withStatusBar, overlap, framed, wait, stabilization, debug, logger})
         : await takeSimpleScreenshot({...target, withStatusBar, wait, stabilization, debug, logger})
 
+    screenshot.image.scale(driver.viewportScale)
+
     if (hooks && hooks.afterScreenshot) {
       // imitate image-like state for the hook
       if (window && fully && target.scroller) {

package/src/take-viewport-screenshot.js

@@ -33,7 +33,7 @@ function makeTakeDefaultScreenshot({driver, stabilization = {}, debug, logger})
     await image.debug({...debug, name, suffix: 'original'})
 
     if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(1 / driver.pixelRatio)
+    else image.scale(1 / driver.pixelRatio / driver.viewportScale)
 
     if (stabilization.rotate) image.crop(stabilization.rotate)
 
@@ -53,7 +53,7 @@ function makeTakeMainContextScreenshot({driver, stabilization = {}, debug, logge
     await image.debug({...debug, name, suffix: 'original'})
 
     if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(1 / driver.pixelRatio)
+    else image.scale(1 / driver.pixelRatio / driver.viewportScale)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
 
@@ -72,7 +72,7 @@ function makeTakeSafari11Screenshot({driver, stabilization = {}, debug, logger})
     await image.debug({...debug, name, suffix: 'original'})
 
     if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(1 / driver.pixelRatio)
+    else image.scale(1 / driver.pixelRatio / driver.viewportScale)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
 
@@ -96,7 +96,7 @@ function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
     await image.debug({...debug, name, suffix: 'original'})
 
     if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(1 / driver.pixelRatio)
+    else image.scale(1 / driver.pixelRatio / driver.viewportScale)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
     else if (driver.orientation === 'landscape' && image.width < image.height) image.rotate(-90)
@@ -113,7 +113,13 @@ function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
   }
 
   async function getViewportRegion() {
-    const marker = await driver.mainContext.execute(snippets.addPageMarker)
+    // marker is -> bwb bwbb wbw bwbb wbww bbb
+    const marker = await driver.mainContext.execute(snippets.addPageMarker, [
+      {
+        mask: [1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1],
+        size: utils.math.multiplier(driver.viewportScale * driver.pixelRatio, 0.05),
+      },
+    ])
     await utils.general.sleep(100)
 
     try {
@@ -124,12 +130,16 @@ function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
 
       await image.debug({...debug, name: 'marker'})
 
-      const markerLocation = findImagePattern(await image.toObject(), {...marker, pixelRatio: driver.pixelRatio})
+      const markerLocation = findImagePattern(await image.toObject(), {
+        ...marker,
+        scale: driver.viewportScale * driver.pixelRatio,
+      })
       if (!markerLocation) return null
 
-      const viewportSize = await driver.getViewportSize()
-
-      return utils.geometry.region(utils.geometry.scale(markerLocation, 1 / driver.pixelRatio), viewportSize)
+      return utils.geometry.region(
+        utils.geometry.scale(markerLocation, 1 / driver.pixelRatio / driver.viewportScale),
+        await driver.getViewportSize(),
+      )
     } finally {
       await driver.mainContext.execute(snippets.cleanupPageMarker)
     }
@@ -143,7 +153,7 @@ function makeTakeNativeScreenshot({driver, stabilization = {}, debug, logger}) {
     await image.debug({...debug, name, suffix: 'original'})
 
     if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(1 / driver.pixelRatio)
+    else image.scale(1 / driver.pixelRatio / driver.viewportScale)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
     else if (driver.orientation === 'landscape' && image.width < image.height) image.rotate(-90)

package/.bongo/dry-run/package-lock.json

@@ -1,73 +0,0 @@
-{
-  "name": "dry-run",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "@applitools/screenshoter": "file:../dry-run.tgz"
-      }
-    },
-    "node_modules/@applitools/screenshoter": {
-      "version": "3.3.2",
-      "resolved": "file:../dry-run.tgz",
-      "integrity": "sha512-5epXLfRKO+64jIbxTYwUMUui0xGPQmwccz5aMlLg2V1gtgyrcZ689cn7n8jDBWPCt1Ds0MNEZCimcDjGiAXb4Q==",
-      "license": "SEE LICENSE IN LICENSE",
-      "dependencies": {
-        "@applitools/snippets": "2.1.11",
-        "@applitools/utils": "1.2.5",
-        "png-async": "0.9.4"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      }
-    },
-    "node_modules/@applitools/snippets": {
-      "version": "2.1.11",
-      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.11.tgz",
-      "integrity": "sha512-uNx2sqFACva5Lt23NvYjnxkbUoyAmoCN8dVtAFOhL2a0HyxzYKP5z0tCT/JK8QqM3gkSzeQ0rT0FdxQ9UAl7Og==",
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
-    "node_modules/@applitools/utils": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.5.tgz",
-      "integrity": "sha512-nETSgqGeCk5yqjFaQ7x1KURf+t5IxsY2RoeFB5w1+6lHprmHdEithMcN0tiJWeqi14QBJdUkXCzCJrMW5RcDFg==",
-      "engines": {
-        "node": ">= 8.9.0"
-      }
-    },
-    "node_modules/png-async": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/png-async/-/png-async-0.9.4.tgz",
-      "integrity": "sha512-B//AXX9TkneKfgtOpT1mdUnnhk2BImGD+a98vImsMU8uo1dBeHyW/kM2erWZ/CsYteTPU/xKG+t6T62heHkC3A=="
-    }
-  },
-  "dependencies": {
-    "@applitools/screenshoter": {
-      "version": "file:../dry-run.tgz",
-      "integrity": "sha512-5epXLfRKO+64jIbxTYwUMUui0xGPQmwccz5aMlLg2V1gtgyrcZ689cn7n8jDBWPCt1Ds0MNEZCimcDjGiAXb4Q==",
-      "requires": {
-        "@applitools/snippets": "2.1.11",
-        "@applitools/utils": "1.2.5",
-        "png-async": "0.9.4"
-      }
-    },
-    "@applitools/snippets": {
-      "version": "2.1.11",
-      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.11.tgz",
-      "integrity": "sha512-uNx2sqFACva5Lt23NvYjnxkbUoyAmoCN8dVtAFOhL2a0HyxzYKP5z0tCT/JK8QqM3gkSzeQ0rT0FdxQ9UAl7Og=="
-    },
-    "@applitools/utils": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.5.tgz",
-      "integrity": "sha512-nETSgqGeCk5yqjFaQ7x1KURf+t5IxsY2RoeFB5w1+6lHprmHdEithMcN0tiJWeqi14QBJdUkXCzCJrMW5RcDFg=="
-    },
-    "png-async": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/png-async/-/png-async-0.9.4.tgz",
-      "integrity": "sha512-B//AXX9TkneKfgtOpT1mdUnnhk2BImGD+a98vImsMU8uo1dBeHyW/kM2erWZ/CsYteTPU/xKG+t6T62heHkC3A=="
-    }
-  }
-}

package/.bongo/dry-run/package.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "@applitools/screenshoter": "file:../dry-run.tgz"
-  }
-}

package/.eslintrc

@@ -1,39 +0,0 @@
-{
-  "env": {
-    "commonjs": true,
-    "es6": true,
-    "node": true,
-    "mocha": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module"
-  },
-  "extends": ["plugin:node/recommended"],
-  "plugins": ["prettier", "mocha-no-only", "node"],
-  "ignorePatterns": [
-    "node_modules/",
-    "dist/",
-    "screenshots/",
-    "applitools.config.js",
-    "logs",
-    "tmp/",
-    "**/test/coverage/generic/"
-  ],
-  "rules": {
-    "prettier/prettier": ["error", {"allowParens": "avoid", "printWidth": 120}],
-    "no-process-exit": "off",
-    "no-const-assign": "error",
-    "no-this-before-super": "error",
-    "no-undef": "warn",
-    "no-unreachable": "warn",
-    "no-unused-vars": [
-      1,
-      {"varsIgnorePattern": "^_", "args": "all", "argsIgnorePattern": "^_"}
-    ],
-    "constructor-super": "warn",
-    "valid-typeof": "warn",
-    "mocha-no-only/mocha-no-only": "error",
-    "node/no-unpublished-require": ["off"]
-  }
-}

package/docker-compose.yaml

@@ -1,29 +0,0 @@
-{
-  "version": "3.4",
-  "services": {
-    "chrome": {
-      "image": "selenium/standalone-chrome",
-      "environment": [
-        "SE_NODE_OVERRIDE_MAX_SESSIONS=true",
-        "SE_NODE_MAX_SESSIONS=30"
-      ],
-      "volumes": [
-        "/dev/shm:/dev/shm"
-      ],
-      "network_mode": "host"
-    },
-    "firefox": {
-      "image": "selenium/standalone-firefox",
-      "environment": [
-        "SE_NODE_OVERRIDE_MAX_SESSIONS=true",
-        "SE_NODE_MAX_SESSIONS=30"
-      ],
-      "volumes": [
-        "/dev/shm:/dev/shm"
-      ],
-      "ports": [
-        "4445:4444"
-      ]
-    }
-  }
-}