@applitools/screenshoter 3.3.10 → 3.3.13

package/index.js

@@ -1,2 +1,6 @@
-module.exports = require('./src/take-screenshot')
-exports.takeScreenshot = require('./src/take-screenshot')
+const takeScreenshot = require('./src/take-screenshot')
+const getTarget = require('./src/getTarget')
+module.exports = {
+  takeScreenshot,
+  getTarget,
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/screenshoter",
-  "version": "3.3.10",
+  "version": "3.3.13",
   "description": "Applitools universal screenshoter for web and native applications",
   "keywords": [
     "applitools",
@@ -33,15 +33,15 @@
   "scripts": {
     "lint": "eslint . --ext .js",
     "test": "yarn test:it && yarn test:e2e",
+    "test:unit": "mocha ./test/unit/*.spec.js --no-timeouts",
     "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",
+    "test:e2e:web": "APPLITOOLS_SHOW_LOGS=true mocha ./test/e2e/web/*.spec.js --no-timeouts -r @applitools/test-utils/mocha-hooks/docker",
+    "test:e2e:android": "APPLITOOLS_TEST_REMOTE=sauce mocha ./test/e2e/android*/*.spec.js --no-timeouts --parallel --jobs ${MOCHA_JOBS:-2}",
+    "test:e2e:ios": "APPLITOOLS_TEST_REMOTE=sauce mocha ./test/e2e/ios*/*.spec.js --no-timeouts --parallel --jobs ${MOCHA_JOBS:-2}",
     "setup:web": "yarn docker:setup",
-    "setup:android": "yarn android:setup && yarn appium:setup",
-    "setup:ios": "yarn ios:setup && yarn appium:setup",
+    "setup:android": "echo \"setup:android - do nothing\"",
+    "setup:ios": "echo \"setup:ios - do nothing\"",
     "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",
@@ -60,15 +60,16 @@
     }
   },
   "dependencies": {
-    "@applitools/snippets": "2.1.15",
+    "@applitools/snippets": "2.2.2",
     "@applitools/utils": "1.2.13",
     "png-async": "0.9.4"
   },
   "devDependencies": {
-    "@applitools/driver": "1.4.16",
-    "@applitools/sdk-release-kit": "0.13.11",
-    "@applitools/spec-driver-webdriverio": "1.2.7",
-    "@applitools/test-utils": "1.0.12",
+    "@applitools/driver": "1.5.5",
+    "@applitools/scripts": "1.1.0",
+    "@applitools/sdk-release-kit": "1.0.4",
+    "@applitools/spec-driver-webdriverio": "1.2.8",
+    "@applitools/test-utils": "1.1.5",
     "appium": "^1.22.2",
     "chromedriver": "^95.0.0",
     "eslint": "^7.9.0",

package/src/calculate-screenshot-region.js

@@ -0,0 +1,17 @@
+const utils = require('@applitools/utils')
+
+function calculateScreenshotRegion({cropRegion, stitchedImage, preMoveOffset, postMoveOffset} = {}) {
+  cropRegion = !!cropRegion ? cropRegion : {x: 0, y: 0}
+  const screenshotRegion = utils.geometry.region(cropRegion, stitchedImage.size)
+
+  if (JSON.stringify(preMoveOffset) === JSON.stringify(postMoveOffset)) return screenshotRegion
+  const moveOffset = utils.geometry.offsetNegative(postMoveOffset, preMoveOffset)
+  const compensatedScreenshotRegion = utils.geometry.offset(screenshotRegion, moveOffset)
+
+  if (preMoveOffset.y === postMoveOffset.y && preMoveOffset.x !== postMoveOffset.x)
+    compensatedScreenshotRegion.x = preMoveOffset.x
+
+  return compensatedScreenshotRegion
+}
+
+module.exports = calculateScreenshotRegion

package/src/getTarget.js

@@ -0,0 +1,70 @@
+'use strict'
+
+const utils = require('@applitools/utils')
+
+async function getTarget({window, context, region, fully, scrollingMode}) {
+  if (window) {
+    // window/app
+    const scrollingElement = await context.main.getScrollingElement()
+    return {
+      context: context.main,
+      scrollingElement,
+    }
+  } else if (region) {
+    if (utils.types.has(region, ['x', 'y', 'width', 'height'])) {
+      // region by coordinates
+      const scrollingElement = await context.getScrollingElement()
+      return {
+        context,
+        region,
+        scrollingElement,
+      }
+    } else {
+      // region by element or selector
+      const element = await context.element(region)
+      if (!element) throw new Error('Element not found!')
+
+      const elementContext = element.context
+
+      if (fully) {
+        const isScrollable = await element.isScrollable()
+        // if element is scrollable, then take screenshot of the full element content, otherwise take screenshot of full element
+        const region = isScrollable ? null : await element.getRegion()
+        const scrollingElement = isScrollable ? element : await elementContext.getScrollingElement()
+        // css stitching could be applied only to root element of its context
+        scrollingMode = scrollingMode === 'css' && !(await scrollingElement.isRoot()) ? 'mixed+' : scrollingMode
+        return {
+          context: elementContext,
+          region,
+          scrollingMode,
+          scrollingElement,
+        }
+      } else {
+        const scrollingElement = await context.getScrollingElement()
+        return {
+          context: elementContext,
+          region: await element.getRegion(),
+          scrollingElement,
+        }
+      }
+    }
+  } else if (!context.isMain) {
+    // context
+    if (fully) {
+      const scrollingElement = await context.getScrollingElement()
+      return {
+        context,
+        scrollingElement,
+      }
+    } else {
+      const scrollingElement = await context.parent.getScrollingElement()
+      const element = await context.getContextElement()
+      return {
+        context: context.parent,
+        region: await element.getRegion(), // IMHO we should use CLIENT (without borders) region here
+        scrollingElement,
+      }
+    }
+  }
+}
+module.exports = getTarget

package/src/image.js

@@ -84,6 +84,7 @@ 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) {

package/src/scroller.js

@@ -25,12 +25,14 @@ function makeScroller({logger, element, scrollingMode = 'mixed'}) {
     if (scrollingMode === 'scroll') return scrollTo(offset, element)
     if (scrollingMode === 'css') return translateTo(offset, element)
     if (scrollingMode === 'mixed') return shiftTo(offset, element)
+    if (scrollingMode === 'mixed+') return shiftTo(offset, element, {formerlyCssScrollingMode: true})
   }
 
   async function getInnerOffset(element = defaultElement) {
     if (scrollingMode === 'scroll') return getScrollOffset(element)
     if (scrollingMode === 'css') return getTranslateOffset(element)
     if (scrollingMode === 'mixed') return getShiftOffset(element)
+    if (scrollingMode === 'mixed+') return getShiftOffset(element)
   }
 
   async function getContentSize() {
@@ -101,9 +103,10 @@ function makeScroller({logger, element, scrollingMode = 'mixed'}) {
     }
   }
 
-  async function shiftTo(offset, element = defaultElement) {
+  async function shiftTo(offset, element = defaultElement, {formerlyCssScrollingMode} = {}) {
     try {
       const scrollOffset = await element.scrollTo(offset)
+      if (utils.geometry.equals(scrollOffset, offset) && !formerlyCssScrollingMode) 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())) {

package/src/take-screenshot.js

@@ -1,6 +1,6 @@
-const utils = require('@applitools/utils')
-const makeScroller = require('./scroller')
 const scrollIntoViewport = require('./scroll-into-viewport')
+const getTarget = require('./getTarget')
+const makeScroller = require('./scroller')
 const takeStitchedScreenshot = require('./take-stitched-screenshot')
 const takeSimpleScreenshot = require('./take-simple-screenshot')
 
@@ -48,32 +48,48 @@ async function takeScreenshot({
   // blur active element in target context
   const activeElement = driver.isWeb && hideCaret ? await context.blurElement() : null
 
-  const target = await getTarget({window, context, region, fully, scrollingMode, logger})
+  const target = await getTarget({window, context, region, fully, scrollingMode})
+  // in some cases getTarget logic manipulates the 'scrollingMode'
+  scrollingMode = target.scrollingMode || scrollingMode
 
-  if (driver.isWeb && hideScrollbars) await target.scroller.hideScrollbars()
+  const scroller = target.scrollingElement
+    ? makeScroller({element: target.scrollingElement, scrollingMode, logger})
+    : null
+
+  if (scroller) {
+    await scroller.preserveState()
+    if (driver.isWeb && hideScrollbars) await scroller.hideScrollbars()
+  }
 
   try {
-    if (!window) await scrollIntoViewport({...target, logger})
+    if (!window) await scrollIntoViewport({context: target.context, region: target.region, scroller, logger})
 
     const screenshot =
-      fully && target.scroller
-        ? await takeStitchedScreenshot({...target, withStatusBar, overlap, framed, wait, stabilization, debug, logger})
-        : await takeSimpleScreenshot({...target, withStatusBar, wait, stabilization, debug, logger})
+      fully && scroller
+        ? await takeStitchedScreenshot({
+            ...target,
+            scroller,
+            withStatusBar,
+            overlap,
+            framed,
+            wait,
+            stabilization,
+            debug,
+            logger,
+          })
+        : await takeSimpleScreenshot({...target, scroller, 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) {
-        await target.scroller.moveTo({x: 0, y: 0}, await driver.mainContext.getScrollingElement())
-      }
-      await hooks.afterScreenshot({driver, scroller: target.scroller, screenshot})
+      await hooks.afterScreenshot({driver, scroller, screenshot})
     }
 
     return screenshot
   } finally {
-    if (target.scroller) {
-      await target.scroller.restoreScrollbars()
+    if (scroller) {
+      await scroller.restoreScrollbars()
+      await scroller.restoreState()
     }
 
     // if there was active element and we have blurred it, then restore focus
@@ -93,69 +109,4 @@ async function takeScreenshot({
   }
 }
 
-async function getTarget({window, context, region, fully, scrollingMode, logger}) {
-  if (window) {
-    // window/app
-    const scrollingElement = await context.main.getScrollingElement()
-    return {
-      context: context.main,
-      scroller: scrollingElement ? makeScroller({element: scrollingElement, scrollingMode, logger}) : null,
-    }
-  } else if (region) {
-    if (utils.types.has(region, ['x', 'y', 'width', 'height'])) {
-      // region by coordinates
-      const scrollingElement = await context.getScrollingElement()
-      return {
-        context,
-        region,
-        scroller: scrollingElement ? makeScroller({element: scrollingElement, scrollingMode, logger}) : null,
-      }
-    } else {
-      // region by element or selector
-      const element = await context.element(region)
-      if (!element) throw new Error('Element not found!')
-
-      const elementContext = element.context
-
-      if (fully) {
-        const isScrollable = await element.isScrollable()
-        // if element is scrollable, then take screenshot of the full element content, otherwise take screenshot of full element
-        const region = isScrollable ? null : await element.getRegion()
-        const scrollingElement = isScrollable ? element : await elementContext.getScrollingElement()
-        // css stitching could be applied only to root element of its context
-        scrollingMode = scrollingMode === 'css' && !(await scrollingElement.isRoot()) ? 'mixed' : scrollingMode
-        return {
-          context: elementContext,
-          region,
-          scroller: scrollingElement ? makeScroller({element: scrollingElement, scrollingMode, logger}) : null,
-        }
-      } else {
-        const scrollingElement = await context.getScrollingElement()
-        return {
-          context: elementContext,
-          region: await element.getRegion(),
-          scroller: scrollingElement ? makeScroller({element: scrollingElement, scrollingMode, logger}) : null,
-        }
-      }
-    }
-  } else if (!context.isMain) {
-    // context
-    if (fully) {
-      const scrollingElement = await context.getScrollingElement()
-      return {
-        context,
-        scroller: scrollingElement ? makeScroller({logger, element: scrollingElement, scrollingMode}) : null,
-      }
-    } else {
-      const scrollingElement = await context.parent.getScrollingElement()
-      const element = await context.getContextElement()
-      return {
-        context: context.parent,
-        region: await element.getRegion(), // IMHO we should use CLIENT (without borders) region here
-        scroller: scrollingElement ? makeScroller({logger, element: scrollingElement, scrollingMode}) : null,
-      }
-    }
-  }
-}
-
 module.exports = takeScreenshot

package/src/take-stitched-screenshot.js

@@ -1,6 +1,7 @@
 const utils = require('@applitools/utils')
 const makeImage = require('./image')
 const makeTakeViewportScreenshot = require('./take-viewport-screenshot')
+const calculateScreenshotRegion = require('./calculate-screenshot-region')
 
 async function takeStitchedScreenshot({
   logger,
@@ -21,32 +22,45 @@ async function takeStitchedScreenshot({
   const scrollerState = await scroller.preserveState()
 
   const initialOffset = region ? utils.geometry.location(region) : {x: 0, y: 0}
-  const actualOffset = await scroller.getInnerOffset()
-  const expectedRemainingOffset = utils.geometry.offsetNegative(initialOffset, actualOffset)
+  const preMoveOffset = await scroller.getInnerOffset()
+  const postMoveOffset = await scroller.moveTo(initialOffset)
+  const expectedRemainingOffset = utils.geometry.offsetNegative(initialOffset, postMoveOffset)
 
   await utils.general.sleep(wait)
 
   const contentSize = await scroller.getContentSize()
 
+  logger.verbose(
+    'preMoveOffset',
+    preMoveOffset,
+    'initialOffset',
+    initialOffset,
+    'postMoveOffset',
+    postMoveOffset,
+    'context.isMain',
+    context.isMain,
+  )
+
   logger.verbose('Getting initial image...')
   let image = await takeViewportScreenshot({name: 'initial', withStatusBar})
   const firstImage = framed ? makeImage(image) : null
 
   const scrollerRegion = await scroller.getClientRegion()
   const targetRegion = region
-    ? utils.geometry.intersect(utils.geometry.region(actualOffset, scrollerRegion), region)
+    ? utils.geometry.intersect(utils.geometry.region(postMoveOffset, scrollerRegion), region)
     : scrollerRegion
 
   // TODO the solution should not check driver specifics,
   // in this case target region coordinate should be already related to the scrolling element of the context
   let cropRegion = driver.isNative ? targetRegion : await driver.getRegionInViewport(context, targetRegion)
+  if (utils.geometry.isEmpty(cropRegion)) throw new Error('Screenshot region is out of viewport')
 
-  logger.verbose('cropping...')
+  logger.verbose('cropping... cropRegion is', cropRegion)
   image.crop(withStatusBar ? utils.geometry.offset(cropRegion, {x: 0, y: driver.statusBarHeight}) : cropRegion)
   await image.debug({...debug, name: 'initial', suffix: 'region'})
 
   const contentRegion = utils.geometry.region({x: 0, y: 0}, contentSize)
-  logger.verbose(`Scroller size: ${contentRegion}`)
+  logger.verbose('Scroller size:', contentRegion)
 
   if (region) region = utils.geometry.intersect(region, contentRegion)
   else region = contentRegion
@@ -73,7 +87,7 @@ async function takeStitchedScreenshot({
     const compensateOffset = {x: 0, y: initialRegion.y !== partRegion.y ? overlap.top : 0}
     const requiredOffset = utils.geometry.offsetNegative(utils.geometry.location(partRegion), compensateOffset)
 
-    logger.verbose(`Move to ${requiredOffset}`)
+    logger.verbose('Move to', requiredOffset)
     let actualOffset = await scroller.moveTo(requiredOffset)
     // actual scroll position after scrolling might be not equal to required position due to
     // scrollable region shift during scrolling so actual scroll position should be corrected
@@ -94,7 +108,8 @@ async function takeStitchedScreenshot({
       width: partRegion.width,
       height: partRegion.height,
     }
-    logger.verbose(`Actual offset is ${actualOffset}, remaining offset is ${remainingOffset}`)
+    logger.verbose('Actual offset is', actualOffset, ', remaining offset is', remainingOffset)
+    logger.verbose('cropPartRegion is', cropPartRegion)
 
     await utils.general.sleep(wait)
 
@@ -126,12 +141,12 @@ async function takeStitchedScreenshot({
 
     return {
       image: stitchedImage,
-      region: utils.geometry.region({x: 0, y: 0}, stitchedImage.size),
+      region: calculateScreenshotRegion({stitchedImage, preMoveOffset, postMoveOffset}),
     }
   } else {
     return {
       image: stitchedImage,
-      region: utils.geometry.region(cropRegion, stitchedImage.size),
+      region: calculateScreenshotRegion({cropRegion, stitchedImage, preMoveOffset, postMoveOffset}),
     }
   }
 }

package/CHANGELOG.md

@@ -1,176 +0,0 @@
-
-# Change Log
-
-## Unreleased
-
-
-## 3.3.10 - 2022/2/16
-
-- do not perform initial scrolling in `takeStitchedScreenshot`
-
-## 3.3.9 - 2022/2/16
-
-- remove prevention of translation in `mixed` scrolling mode
-- updated to @applitools/snippets@2.1.15 (from 2.1.14)
-
-## 3.3.8 - 2022/2/16
-
-- updated to @applitools/snippets@2.1.14 (from 2.1.13)
-
-## 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
-- 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
-
-## 3.3.0 - 2021/12/16
-
-- fix ios web screenshots on pages without viewport meta tag
-- improve native apps support
-- updated to @applitools/snippets@2.1.8 (from 2.1.7)
-
-## 3.2.9 - 2021/11/14
-
-- add support of scrollable elements that change its size during scrolling
-
-## 3.2.8 - 2021/10/30
-
-- updated to @applitools/utils@1.2.4 (from 1.2.3)
-
-## 3.2.7 - 2021/10/13
-
-- handle a case when scrolling element does not exist
-
-## 3.2.6 - 2021/10/12
-
-- handle a case when scrolling element does not exist
-
-## 3.2.5 - 2021/10/5
-
-- fix issue with fractional image size after scaling
-
-## 3.2.4 - 2021/9/9
-
-- handle selectors that evaluate to elements from a different context
-- updated to @applitools/snippets@2.1.7 (from 2.1.4)
-- updated to @applitools/utils@1.2.3 (from 1.2.2)
-
-## 3.2.3 - 2021/8/13
-
-- remove base64 sanitizing
-
-## 3.2.2 - 2021/8/13
-
-- add `withStatusBar` capability property to take app and full app screenshots with status bar
-- fix ios web screenshots
-
-## 3.2.1 - 2021/8/8
-
-- no changes
-
-## 3.2.0 - 2021/8/7
-
-- change image processing order and improve general algorithm
-- updated to @applitools/utils@1.2.2 (from 1.2.1)
-
-## 3.1.0 - 2021/8/4
-
-- improve support of native devices
-- updated to @applitools/snippets@2.1.4 (from 2.1.3)
-- updated to @applitools/utils@1.2.1 (from 1.2.0)
-
-## 3.0.8 - 2021/5/24
-
-- updated to @applitools/utils@1.2.0 (from 1.1.3)
-
-## 3.0.7 - 2021/5/13
-
-- fixed image cropping algorithm to not copy data into a heap
-- optimized image rotation and image copping algorithms
-
-## 3.0.6 - 2021/5/11
-
-- updated to @applitools/utils@1.1.3 (from 1.0.1)
-
- ## 3.0.5 - 2021/2/18
-
-- fix bug with wrong stitching due to fractional offset 
-
-## 3.0.4 - 2021/2/15
-
-- fix scaling issue
-- handle firefox buggy versions
-
-## 3.0.3 - 2021/1/27
-
-- no changes
-- updated to @applitools/utils@1.0.1 (from 1.0.0)
-- updated to @applitools/utils@1.0.1 (from 1.0.0)
-## 3.0.2 - 2021/1/27
-
-- no changes
-## 3.0.1 - 2021/1/27
-- no changes
-## 3.0.0 - 2021/1/26
-
-- `crop`, `scale` and `rotate` now should be placed in `stabilization` object
-- rename `context` to `frames`
-- rename `isFully` to `fully`
-- integrate dom-capture
-- chore: add husky
-- fix bug when screenshots on iPad were taken with Safari navigation bar and iOS status bar
-
-## 2.1.1 - 2021/1/15
-
-- fix bug when `toPng` method returns empty buffer
-- fix bug when `toPng` method returns empty buffer
-## 2.1.0 - 2021/1/15
-
-- remove native module dependency (`sharp`)
-
-## 2.0.0 - 2021/1/7
-
-- return image location relative to viewport
-- return image location relative to viewport
-## 1.0.2 - 2020/12/29
-
-- fix saveScreenshot
-## 1.0.1 - 2020/12/1
-
-- round coordinate and size before image operations
-
-## 1.0.0 - 2020/12/1
-
-- Provide functionality to take screenshots (viewport and full) using Applitools driver wrapper