@applitools/screenshoter 3.3.18 → 3.3.21

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/screenshoter",
-  "version": "3.3.18",
+  "version": "3.3.21",
   "description": "Applitools universal screenshoter for web and native applications",
   "keywords": [
     "applitools",
@@ -36,7 +36,7 @@
     "test:unit": "mocha ./test/unit/*.spec.js --no-timeouts",
     "test:it": "mocha ./test/it/*.spec.js --no-timeouts",
     "test:e2e": "yarn test:e2e:web && yarn && test:e2e:android && yarn test:e2e:ios",
-    "test:e2e:web": "APPLITOOLS_SHOW_LOGS=true mocha ./test/e2e/web/*.spec.js --no-timeouts -r @applitools/test-utils/mocha-hooks/docker",
+    "test:e2e:web": "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",
@@ -60,17 +60,18 @@
     }
   },
   "dependencies": {
+    "@applitools/logger": "1.1.5",
     "@applitools/snippets": "2.2.3",
     "@applitools/utils": "1.3.0",
     "png-async": "0.9.4"
   },
   "devDependencies": {
     "@applitools/bongo": "^2.0.3",
-    "@applitools/driver": "1.8.2",
+    "@applitools/driver": "^1.8.11",
     "@applitools/scripts": "1.1.0",
     "@applitools/spec-driver-webdriverio": "1.2.9",
     "@applitools/test-utils": "1.3.2",
-    "appium": "^1.22.2",
+    "appium": "^1.22.3",
     "chromedriver": "^95.0.0",
     "eslint": "^7.9.0",
     "eslint-plugin-mocha-no-only": "^1.1.1",

package/src/{getTarget.js → get-target.js}

@@ -1,29 +1,41 @@
 const utils = require('@applitools/utils')
+const makeScroller = require('./scroller')
 
-async function getTarget({window, context, region, fully, scrollingMode}) {
+async function getTarget({window, context, region, fully, scrollingMode, logger}) {
   if (window) {
     // window/app
+    logger.log('Window screenshot target detected')
     const scrollingElement = await context.main.getScrollingElement()
     return {
       context: context.main,
-      scrollingElement,
+      scroller: makeScroller({element: scrollingElement, scrollingMode, logger}),
     }
   } else if (region) {
     if (utils.types.has(region, ['x', 'y', 'width', 'height'])) {
       // region by coordinates
+      logger.log('Region screenshot target detected with static region:', region)
       const scrollingElement = await context.getScrollingElement()
       return {
         context,
         region,
-        scrollingElement,
+        scroller: makeScroller({element: scrollingElement, scrollingMode, logger}),
       }
     } else {
       // region by element or selector
+      logger.log('Region screenshot target detected with element:', region)
       const element = await context.element(region)
       if (!element) throw new Error('Element not found!')
 
       const elementContext = element.context
 
+      if (element.driver.isNative) {
+        // if element is in a native context, then scroll it to the top, otherwise, it will be not possible to get all of its size
+        const scrollingElement = await elementContext.getScrollingElement()
+        if (scrollingElement && (await scrollingElement.contains(element))) {
+          await scrollingElement.scrollTo(await element.getRegion())
+        }
+      }
+
       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
@@ -34,25 +46,25 @@ async function getTarget({window, context, region, fully, scrollingMode}) {
         return {
           context: elementContext,
           region,
-          scrollingMode,
-          scrollingElement,
+          scroller: makeScroller({element: scrollingElement, scrollingMode, logger}),
         }
       } else {
         const scrollingElement = await context.getScrollingElement()
         return {
           context: elementContext,
           region: await element.getRegion(),
-          scrollingElement,
+          scroller: makeScroller({element: scrollingElement, scrollingMode, logger}),
         }
       }
     }
   } else if (!context.isMain) {
     // context
+    logger.log('Context screenshot target detected')
     if (fully) {
       const scrollingElement = await context.getScrollingElement()
       return {
         context,
-        scrollingElement,
+        scroller: makeScroller({element: scrollingElement, scrollingMode, logger}),
       }
     } else {
       const scrollingElement = await context.parent.getScrollingElement()
@@ -60,9 +72,10 @@ async function getTarget({window, context, region, fully, scrollingMode}) {
       return {
         context: context.parent,
         region: await element.getRegion(), // IMHO we should use CLIENT (without borders) region here
-        scrollingElement,
+        scroller: makeScroller({element: scrollingElement, scrollingMode, logger}),
       }
     }
   }
 }
+
 module.exports = getTarget

package/src/scroll-into-viewport.js

@@ -1,10 +1,6 @@
 const utils = require('@applitools/utils')
 
-async function scrollIntoViewport({context, scroller, region, logger}) {
-  if (context.driver.isNative) {
-    logger.verbose(`NATIVE context identified, skipping 'ensure element visible'`)
-    return
-  }
+async function scrollIntoViewport({context, scroller, region}) {
   const elementContextRegion = region ? {...region} : await scroller.getClientRegion()
   const contextViewportLocation = await context.getLocationInViewport()
   const elementViewportRegion = utils.geometry.offset(elementContextRegion, contextViewportLocation)

package/src/scroller.js

@@ -1,6 +1,8 @@
 const utils = require('@applitools/utils')
 
 function makeScroller({logger, element, scrollingMode = 'mixed'}) {
+  if (!element) return null
+
   const defaultElement = element
 
   return {

package/src/take-screenshot.js

@@ -1,6 +1,6 @@
+const {makeLogger} = require('@applitools/logger')
+const getTarget = require('./get-target')
 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')
 
@@ -21,6 +21,10 @@ async function takeScreenshot({
   debug,
   logger,
 }) {
+  debug =
+    debug ||
+    (process.env.APPLITOOLS_DEBUG_SCREENSHOTS_DIR ? {path: process.env.APPLITOOLS_DEBUG_SCREENSHOTS_DIR} : debug)
+  logger = logger ? logger.extend({label: 'screenshoter'}) : makeLogger({label: 'screenshoter'})
   // screenshot of a window/app was requested (fully or viewport)
   const window = !region && (!frames || frames.length === 0)
   // framed screenshots could be taken only when screenshot of window/app fully was requested
@@ -48,27 +52,22 @@ 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})
-  // in some cases getTarget logic manipulates the 'scrollingMode'
-  scrollingMode = target.scrollingMode || scrollingMode
+  const target = await getTarget({window, context, region, fully, scrollingMode, logger})
 
-  const scroller = target.scrollingElement
-    ? makeScroller({element: target.scrollingElement, scrollingMode, logger})
-    : null
-
-  if (scroller) {
-    await scroller.preserveState()
-    if (driver.isWeb && hideScrollbars) await scroller.hideScrollbars()
+  if (target.scroller) {
+    await target.scroller.preserveState()
+    if (driver.isWeb && hideScrollbars) await target.scroller.hideScrollbars()
   }
 
   try {
-    if (!window) await scrollIntoViewport({context: target.context, region: target.region, scroller, logger})
+    if (!window && !driver.isNative) {
+      await scrollIntoViewport({context: target.context, region: target.region, scroller: target.scroller, logger})
+    }
 
     const screenshot =
-      fully && scroller
+      fully && target.scroller
         ? await takeStitchedScreenshot({
             ...target,
-            scroller,
             withStatusBar,
             overlap,
             framed,
@@ -77,19 +76,19 @@ async function takeScreenshot({
             debug,
             logger,
           })
-        : await takeSimpleScreenshot({...target, scroller, withStatusBar, wait, stabilization, debug, logger})
+        : await takeSimpleScreenshot({...target, withStatusBar, wait, stabilization, debug, logger})
 
     screenshot.image.scale(driver.viewportScale)
 
     if (hooks && hooks.afterScreenshot) {
-      await hooks.afterScreenshot({driver, scroller, screenshot})
+      await hooks.afterScreenshot({driver, scroller: target.scroller, screenshot})
     }
 
     return screenshot
   } finally {
-    if (scroller) {
-      await scroller.restoreScrollbars()
-      await scroller.restoreState()
+    if (target.scroller) {
+      await target.scroller.restoreScrollbars()
+      await target.scroller.restoreState()
     }
 
     // if there was active element and we have blurred it, then restore focus

package/src/take-stitched-screenshot.js

@@ -49,13 +49,12 @@ async function takeStitchedScreenshot({
   const targetRegion = region
     ? utils.geometry.intersect(utils.geometry.region(postMoveOffset, scrollerRegion), region)
     : scrollerRegion
+  logger.log('Target region calculated: ', targetRegion)
 
-  // 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)
+  const cropRegion = await driver.getRegionInViewport(context, targetRegion)
+  logger.log('Crop region calculated: ', cropRegion)
   if (utils.geometry.isEmpty(cropRegion)) throw new Error('Screenshot region is out of viewport')
 
-  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'})
 

package/src/take-viewport-screenshot.js

@@ -161,21 +161,18 @@ function makeTakeNativeScreenshot({driver, stabilization = {}, debug, logger}) {
     if (stabilization.crop) image.crop(stabilization.crop)
     else {
       const viewportSize = await driver.getViewportSize()
-      const cropRegion = withStatusBar
-        ? {x: 0, y: 0, width: viewportSize.width, height: viewportSize.height + driver.statusBarHeight}
-        : {
-            top: driver.statusBarHeight,
-            bottom: driver.orientation === 'landscape' ? 0 : driver.navigationBarHeight,
-            left:
-              driver.isAndroid && driver.orientation === 'landscape' && driver.platformVersion > 7
-                ? driver.navigationBarHeight
-                : 0,
-            right:
-              driver.isAndroid && driver.orientation === 'landscape' && driver.platformVersion < 8
-                ? driver.navigationBarHeight
-                : 0,
-          }
-      image.crop(cropRegion)
+      if (withStatusBar) {
+        image.crop({x: 0, y: 0, width: viewportSize.width, height: viewportSize.height + driver.statusBarHeight})
+      } else if (driver.isAndroid && driver.orientation === 'landscape') {
+        image.crop({
+          top: driver.statusBarHeight,
+          bottom: driver.orientation === 'landscape' ? 0 : driver.navigationBarHeight,
+          left: driver.platformVersion > 7 ? driver.navigationBarHeight : 0,
+          right: driver.platformVersion < 8 ? driver.navigationBarHeight : 0,
+        })
+      } else {
+        image.crop({x: 0, y: driver.statusBarHeight, width: viewportSize.width, height: viewportSize.height})
+      }
     }
 
     await image.debug({...debug, name, suffix: `viewport${withStatusBar ? '-with-statusbar' : ''}`})