@applitools/screenshoter 3.3.1 → 3.3.5

package/CHANGELOG.md

@@ -4,6 +4,28 @@
 ## Unreleased
 
 
+## 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
+- improve scroll into viewport algorithm
+- fix lazy handling of image rotation
+- updated to @applitools/snippets@2.1.11 (from 2.1.10)
+- updated to @applitools/utils@1.2.5 (from 1.2.4)
+
+## 3.3.2 - 2021/12/20
+
+- add basic support of webview screenshots on ios
+- updated to @applitools/snippets@2.1.10 (from 2.1.8)
+
 ## 3.3.1 - 2021/12/17
 
 - no changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/screenshoter",
-  "version": "3.3.1",
+  "version": "3.3.5",
   "description": "Applitools universal screenshoter for web and native applications",
   "keywords": [
     "applitools",
@@ -26,19 +26,25 @@
     "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": "yarn test:it && yarn test:e2e:ios",
+    "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: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": "mkdir -p ./logs && yarn ios:setup && yarn appium:setup",
+    "android:setup": "node ./scripts/android-emulator.js",
+    "ios:setup": "node ./scripts/ios-simulator.js",
+    "appium:setup": "appium --address 127.0.0.1 --port 4723 --base-path /wd/hub --log-level error:info --log ./logs/appium.log &",
     "docker:setup": "node ../scripts/scripts/generate-docker-compose-config.js && docker-compose up -d",
     "docker:teardown": "docker-compose down",
-    "setup": "yarn docker:setup",
     "deps": "bongo deps",
+    "gh:publish": "gh workflow run publish.yml --ref $(git rev-parse --abbrev-ref HEAD) -f packages=screenshoter",
     "preversion": "bongo preversion",
     "version": "bongo version",
     "postversion": "bongo postversion --skip-release-notification"
@@ -49,22 +55,23 @@
     }
   },
   "dependencies": {
-    "@applitools/snippets": "2.1.8",
-    "@applitools/utils": "1.2.4",
+    "@applitools/snippets": "2.1.12",
+    "@applitools/utils": "1.2.11",
     "png-async": "0.9.4"
   },
   "devDependencies": {
-    "@applitools/driver": "1.4.2",
-    "@applitools/sdk-release-kit": "0.13.4",
-    "@applitools/spec-driver-webdriverio": "1.2.2",
-    "@applitools/test-utils": "1.0.10",
+    "@applitools/driver": "1.4.10",
+    "@applitools/sdk-release-kit": "0.13.11",
+    "@applitools/spec-driver-webdriverio": "1.2.6",
+    "@applitools/test-utils": "1.0.11",
+    "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"

package/src/find-image-pattern.js

@@ -1,7 +1,8 @@
 function findImagePattern(image, pattern) {
   for (let pixel = 0; pixel < image.width * image.height; ++pixel) {
     if (isPattern(image, pixel, pattern)) {
-      return {x: (pixel % image.width) - pattern.offset, y: Math.floor(pixel / image.width) - pattern.offset}
+      const patterOffset = pattern.offset * pattern.pixelRatio
+      return {x: (pixel % image.width) - patterOffset, y: Math.floor(pixel / image.width) - patterOffset}
     }
   }
   return null

package/src/image.js

@@ -38,7 +38,9 @@ function makeImage(data) {
       return true
     },
     get size() {
-      return utils.geometry.round(utils.geometry.scale(size, transforms.scale))
+      return utils.geometry.round(
+        utils.geometry.rotate(utils.geometry.scale(size, transforms.scale), transforms.rotate),
+      )
     },
     get transforms() {
       return {...transforms}
@@ -51,6 +53,12 @@ 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) {
@@ -64,17 +72,12 @@ function makeImage(data) {
       } else {
         region = utils.geometry.scale(region, 1 / transforms.scale)
       }
-      region = utils.geometry.rotate(region, transforms.rotate)
-      transforms.crop = transforms.crop
+      region = utils.geometry.rotate(region, -transforms.rotate, utils.geometry.rotate(size, transforms.rotate))
+      region = transforms.crop
         ? utils.geometry.intersect(transforms.crop, utils.geometry.offset(region, transforms.crop))
         : utils.geometry.intersect({x: 0, y: 0, ...size}, region)
-
-      size = utils.geometry.round(utils.geometry.size(transforms.crop))
-
-      return this
-    },
-    rotate(degree) {
-      transforms.rotate = (transforms.rotate + degree) % 360
+      transforms.crop = region
+      size = utils.geometry.size(transforms.crop)
       return this
     },
     copy(srcImage, offset) {
@@ -204,9 +207,9 @@ async function transform(image, transforms) {
     }
   }, image)
 
-  image = transforms.rotate > 0 ? await rotate(image, transforms.rotate) : image
   image = transforms.crop ? await extract(image, transforms.crop) : image
   image = transforms.scale !== 1 ? await scale(image, transforms.scale) : image
+  image = transforms.rotate !== 0 ? await rotate(image, transforms.rotate) : image
   return image
 }
 
@@ -296,7 +299,7 @@ async function rotate(image, degrees) {
     for (let srcY = 0, dstX = 0; srcY < image.height; ++srcY, ++dstX) {
       for (let srcX = 0, dstY = image.width - 1; srcX < image.width; ++srcX, --dstY) {
         const pixel = image.data.readUInt32BE((srcY * image.width + srcX) * 4)
-        dstImage.data.writeUInt32BE(pixel, (srcX * dstImage.width + dstY) * 4)
+        dstImage.data.writeUInt32BE(pixel, (dstY * dstImage.width + dstX) * 4)
       }
     }
   } else {

package/src/scroll-into-viewport.js

@@ -15,14 +15,23 @@ async function scrollIntoViewport({context, scroller, region, logger}) {
   let remainingOffset = {x: elementContextRegion.x, y: elementContextRegion.y}
   while (currentContext) {
     const scrollingElement = await currentContext.getScrollingElement()
-    const scrollingElementOffset = scrollingElement
-      ? utils.geometry.location(await scrollingElement.getClientRegion())
-      : {x: 0, y: 0}
+    if (!scrollingElement) {
+      currentContext = currentContext.parent
+      continue
+    }
 
-    const actualOffset = await scroller.moveTo(
-      utils.geometry.offsetNegative(remainingOffset, scrollingElementOffset),
-      scrollingElement,
-    )
+    const scrollableRegion = await scrollingElement.getClientRegion()
+    const requiredOffset = {
+      x: Math.max(
+        remainingOffset.x - (scrollableRegion.x + Math.max(scrollableRegion.width - elementContextRegion.width, 0)),
+        0,
+      ),
+      y: Math.max(
+        remainingOffset.y - (scrollableRegion.y + Math.max(scrollableRegion.height - elementContextRegion.height, 0)),
+        0,
+      ),
+    }
+    const actualOffset = await scroller.moveTo(requiredOffset, scrollingElement)
 
     remainingOffset = utils.geometry.offset(
       utils.geometry.offsetNegative(remainingOffset, actualOffset),

package/src/take-viewport-screenshot.js

@@ -7,6 +7,9 @@ function makeTakeViewportScreenshot(options) {
   const {driver} = options
   if (driver.isNative) {
     return makeTakeNativeScreenshot(options)
+  } else if (driver.isIOS) {
+    // safari on ios takes screenshot with browser and os interfaces
+    return makeTakeMarkedScreenshot(options)
   } else if (driver.browserName === 'Firefox') {
     try {
       const browserVersion = Number.parseInt(driver.browserVersion, 10)
@@ -15,28 +18,22 @@ function makeTakeViewportScreenshot(options) {
         return makeTakeMainContextScreenshot(options)
       }
     } catch (ignored) {}
-  } else if (driver.browserName === 'Safari') {
-    if (driver.isIOS) {
-      // safari on ios takes screenshot with browser and os interfaces
-      return makeTakeMarkedScreenshot(options)
-    } else if (driver.browserVersion === '11') {
-      // safari 11 on macs takes full page screenshot
-      return makeTakeSafari11Screenshot(options)
-    }
+  } else if (driver.browserName === 'Safari' && driver.browserVersion === '11') {
+    // safari 11 on macs takes full page screenshot
+    return makeTakeSafari11Screenshot(options)
   }
 
   return makeTakeDefaultScreenshot(options)
 }
 
 function makeTakeDefaultScreenshot({driver, stabilization = {}, debug, logger}) {
-  const calculateScaleRatio = makeCalculateScaleRatio({driver})
   return async function takeScreenshot({name} = {}) {
     logger.verbose('Taking screenshot...')
     const image = makeImage(await driver.takeScreenshot())
     await image.debug({...debug, name, suffix: 'original'})
 
     if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(await calculateScaleRatio(image.width))
+    else image.scale(1 / driver.pixelRatio)
 
     if (stabilization.rotate) image.crop(stabilization.rotate)
 
@@ -47,7 +44,6 @@ function makeTakeDefaultScreenshot({driver, stabilization = {}, debug, logger})
 }
 
 function makeTakeMainContextScreenshot({driver, stabilization = {}, debug, logger}) {
-  const calculateScaleRatio = makeCalculateScaleRatio({driver})
   return async function takeScreenshot({name} = {}) {
     logger.verbose('Taking screenshot...')
     const originalContext = driver.currentContext
@@ -57,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(await calculateScaleRatio(image.width))
+    else image.scale(1 / driver.pixelRatio)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
 
@@ -68,7 +64,6 @@ function makeTakeMainContextScreenshot({driver, stabilization = {}, debug, logge
 }
 
 function makeTakeSafari11Screenshot({driver, stabilization = {}, debug, logger}) {
-  const calculateScaleRatio = makeCalculateScaleRatio({driver})
   let viewportSize
 
   return async function takeScreenshot({name} = {}) {
@@ -77,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(await calculateScaleRatio(image.width))
+    else image.scale(1 / driver.pixelRatio)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
 
@@ -93,7 +88,6 @@ function makeTakeSafari11Screenshot({driver, stabilization = {}, debug, logger})
 }
 
 function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
-  const calculateScaleRatio = makeCalculateScaleRatio({driver})
   let viewportRegion
 
   return async function takeScreenshot({name} = {}) {
@@ -102,9 +96,10 @@ function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
     await image.debug({...debug, name, suffix: 'original'})
 
     if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(await calculateScaleRatio(image.width))
+    else image.scale(1 / driver.pixelRatio)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
+    else if (driver.orientation === 'landscape' && image.width < image.height) image.rotate(-90)
 
     if (stabilization.crop) image.crop(stabilization.crop)
     else {
@@ -119,10 +114,13 @@ function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
 
   async function getViewportRegion() {
     const marker = await driver.mainContext.execute(snippets.addPageMarker)
+    await utils.general.sleep(100)
+
     try {
       const image = makeImage(await driver.takeScreenshot())
 
-      if (stabilization.rotate) await image.rotate(stabilization.rotate)
+      if (stabilization.rotate) image.rotate(stabilization.rotate)
+      else if (driver.orientation === 'landscape' && image.width < image.height) image.rotate(-90)
 
       await image.debug({...debug, name: 'marker'})
 
@@ -148,6 +146,7 @@ function makeTakeNativeScreenshot({driver, stabilization = {}, debug, logger}) {
     else image.scale(1 / driver.pixelRatio)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
+    else if (driver.orientation === 'landscape' && image.width < image.height) image.rotate(-90)
 
     if (stabilization.crop) image.crop(stabilization.crop)
     else {
@@ -164,25 +163,4 @@ function makeTakeNativeScreenshot({driver, stabilization = {}, debug, logger}) {
   }
 }
 
-function makeCalculateScaleRatio({driver}) {
-  let viewportWidth, contentWidth
-  const VIEWPORT_THRESHOLD = 1
-  const CONTENT_THRESHOLD = 10
-  return async function calculateScaleRatio(imageWidth) {
-    if (!viewportWidth) viewportWidth = await driver.getViewportSize().then(size => size.width)
-    if (!contentWidth) contentWidth = await driver.mainContext.getContentSize().then(size => size.width)
-    // If the image's width is the same as the viewport's width or the
-    // top level context's width, no scaling is necessary.
-    if (
-      (imageWidth >= viewportWidth - VIEWPORT_THRESHOLD && imageWidth <= viewportWidth + VIEWPORT_THRESHOLD) ||
-      (imageWidth >= contentWidth - CONTENT_THRESHOLD && imageWidth <= contentWidth + CONTENT_THRESHOLD)
-    ) {
-      return 1
-    }
-
-    const scaledImageWidth = Math.round(imageWidth / driver.pixelRatio)
-    return viewportWidth / scaledImageWidth / driver.pixelRatio
-  }
-}
-
 module.exports = makeTakeViewportScreenshot

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.0",
-      "resolved": "file:../dry-run.tgz",
-      "integrity": "sha512-zYK7fJkhpV4xrOXwkOo/WAjdH8m9vLaWZVaGAGv9iFWdVp/WkdoFfEfU0uo4TAiJeodkq90QWB5krBljy+CBKA==",
-      "license": "SEE LICENSE IN LICENSE",
-      "dependencies": {
-        "@applitools/snippets": "2.1.8",
-        "@applitools/utils": "1.2.4",
-        "png-async": "0.9.4"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      }
-    },
-    "node_modules/@applitools/snippets": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.8.tgz",
-      "integrity": "sha512-7CGFsbL9vAd6MBiGLVKHpKYywPXN499/fJMzEAVCLuGCY81CIc/PchqPFWrZZKZOY/IV21RJmE3MvqZAeXTIXA==",
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
-    "node_modules/@applitools/utils": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.4.tgz",
-      "integrity": "sha512-w7ma6FFGyqhdP6LEcuHFWOcH7EzBjnoAX3UfbFWcTHA3QXnXPX37Y2ENYRodfwkorP1cUKyUHwNXJB/BMIj/hg==",
-      "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-zYK7fJkhpV4xrOXwkOo/WAjdH8m9vLaWZVaGAGv9iFWdVp/WkdoFfEfU0uo4TAiJeodkq90QWB5krBljy+CBKA==",
-      "requires": {
-        "@applitools/snippets": "2.1.8",
-        "@applitools/utils": "1.2.4",
-        "png-async": "0.9.4"
-      }
-    },
-    "@applitools/snippets": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.8.tgz",
-      "integrity": "sha512-7CGFsbL9vAd6MBiGLVKHpKYywPXN499/fJMzEAVCLuGCY81CIc/PchqPFWrZZKZOY/IV21RJmE3MvqZAeXTIXA=="
-    },
-    "@applitools/utils": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.4.tgz",
-      "integrity": "sha512-w7ma6FFGyqhdP6LEcuHFWOcH7EzBjnoAX3UfbFWcTHA3QXnXPX37Y2ENYRodfwkorP1cUKyUHwNXJB/BMIj/hg=="
-    },
-    "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"]
-  }
-}