@applitools/screenshoter 3.3.9 → 3.3.12

package/CHANGELOG.md

@@ -4,6 +4,21 @@
 ## Unreleased
 
 
+## 3.3.12 - 2022/3/14
+
+- update snippets
+- updated to @applitools/snippets@2.2.2 (from 2.2.1)
+
+## 3.3.11 - 2022/3/12
+
+- disable scroll to 0,0 before taking stitched screenshot
+- add better error handling when taking a stitched screenshot
+- updated to @applitools/snippets@2.2.1 (from 2.2.0)
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/screenshoter",
-  "version": "3.3.9",
+  "version": "3.3.12",
   "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: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/driver": "1.5.4",
+    "@applitools/scripts": "1.1.0",
     "@applitools/sdk-release-kit": "0.13.11",
     "@applitools/spec-driver-webdriverio": "1.2.7",
-    "@applitools/test-utils": "1.0.12",
+    "@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/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

@@ -50,7 +50,10 @@ async function takeScreenshot({
 
   const target = await getTarget({window, context, region, fully, scrollingMode, logger})
 
-  if (driver.isWeb && hideScrollbars) await target.scroller.hideScrollbars()
+  if (target.scroller) {
+    await target.scroller.preserveState()
+    if (driver.isWeb && hideScrollbars) await target.scroller.hideScrollbars()
+  }
 
   try {
     if (!window) await scrollIntoViewport({...target, logger})
@@ -63,10 +66,6 @@ async function takeScreenshot({
     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})
     }
 
@@ -74,6 +73,7 @@ async function takeScreenshot({
   } finally {
     if (target.scroller) {
       await target.scroller.restoreScrollbars()
+      await target.scroller.restoreState()
     }
 
     // if there was active element and we have blurred it, then restore focus
@@ -123,7 +123,7 @@ async function getTarget({window, context, region, fully, scrollingMode, logger}
         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
+        scrollingMode = scrollingMode === 'css' && !(await scrollingElement.isRoot()) ? 'mixed+' : scrollingMode
         return {
           context: elementContext,
           region,

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.moveTo(initialOffset)
-  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(await scroller.getInnerOffset(), 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}),
     }
   }
 }