@applitools/screenshoter 3.2.8 → 3.3.2

package/src/take-screenshot.js

@@ -1,183 +1,159 @@
 const utils = require('@applitools/utils')
-const snippets = require('@applitools/snippets')
-const findImagePattern = require('./find-image-pattern')
-const makeImage = require('./image')
-
-function makeTakeScreenshot(options) {
-  const {driver} = options
-  if (driver.isNative) {
-    return makeTakeNativeScreenshot(options)
-  } else if (driver.browserName === 'Firefox') {
-    try {
-      const browserVersion = Number.parseInt(driver.browserVersion, 10)
-      if (browserVersion >= 48 && browserVersion <= 72) {
-        return makeTakeMainContextScreenshot(options)
-      }
-    } catch (ignored) {}
-  } else if (driver.browserName === 'Safari') {
-    if (driver.isIOS) {
-      return makeTakeMarkedScreenshot(options)
-    } else if (driver.browserVersion === '11') {
-      return makeTakeSafari11Screenshot(options)
+const makeScroller = require('./scroller')
+const scrollIntoViewport = require('./scroll-into-viewport')
+const takeStitchedScreenshot = require('./take-stitched-screenshot')
+const takeSimpleScreenshot = require('./take-simple-screenshot')
+
+async function takeScreenshot({
+  driver,
+  frames = [],
+  region,
+  fully,
+  scrollingMode,
+  hideScrollbars,
+  hideCaret,
+  withStatusBar,
+  overlap,
+  framed,
+  wait,
+  stabilization,
+  hooks,
+  debug,
+  logger,
+}) {
+  // 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
+  framed = framed && fully && window
+  // screenshots with status bar could be taken only when screenshot of app or framed app fully was requested
+  withStatusBar = withStatusBar && driver.isNative && window && (!fully || framed)
+  scrollingMode = driver.isNative ? 'scroll' : scrollingMode
+
+  const activeContext = driver.currentContext
+  const context =
+    frames.length > 0
+      ? await activeContext.context(frames.reduce((parent, frame) => ({...frame, parent}), null))
+      : activeContext
+
+  // traverse from main context to target context to hide scrollbars and preserve context state (scroll/translate position)
+  for (const nextContext of context.path) {
+    const scrollingElement = await nextContext.getScrollingElement()
+    // unlike web apps, native apps do not always have scrolling element
+    if (scrollingElement) {
+      if (driver.isWeb && hideScrollbars) await scrollingElement.hideScrollbars()
+      await scrollingElement.preserveState()
     }
   }
 
-  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'})
+  // blur active element in target context
+  const activeElement = driver.isWeb && hideCaret ? await context.blurElement() : null
 
-    if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(await calculateScaleRatio(image.width))
+  const target = await getTarget({window, context, region, fully, scrollingMode, logger})
 
-    if (stabilization.rotate) image.crop(stabilization.rotate)
+  if (driver.isWeb && hideScrollbars) await target.scroller.hideScrollbars()
 
-    if (stabilization.crop) image.crop(stabilization.crop)
-
-    return image
-  }
-}
+  try {
+    if (!window) await scrollIntoViewport({...target, logger})
 
-function makeTakeMainContextScreenshot({driver, stabilization = {}, debug, logger}) {
-  const calculateScaleRatio = makeCalculateScaleRatio({driver})
-  return async function takeScreenshot({name} = {}) {
-    logger.verbose('Taking screenshot...')
-    const originalContext = driver.currentContext
-    await driver.mainContext.focus()
-    const image = makeImage(await driver.takeScreenshot())
-    await originalContext.focus()
-    await image.debug({...debug, name, suffix: 'original'})
+    const screenshot =
+      fully && target.scroller
+        ? await takeStitchedScreenshot({...target, withStatusBar, overlap, framed, wait, stabilization, debug, logger})
+        : await takeSimpleScreenshot({...target, withStatusBar, wait, stabilization, debug, logger})
 
-    if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(await calculateScaleRatio(image.width))
-
-    if (stabilization.rotate) image.rotate(stabilization.rotate)
-
-    if (stabilization.crop) image.crop(stabilization.crop)
-
-    return image
-  }
-}
-
-function makeTakeSafari11Screenshot({driver, stabilization = {}, debug, logger}) {
-  const calculateScaleRatio = makeCalculateScaleRatio({driver})
-  let viewportSize
-
-  return async function takeScreenshot({name} = {}) {
-    logger.verbose('Taking safari 11 driver 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))
-
-    if (stabilization.rotate) image.rotate(stabilization.rotate)
-
-    if (stabilization.crop) image.crop(stabilization.crop)
-    else {
-      if (!viewportSize) viewportSize = await driver.getViewportSize()
-      const viewportLocation = await driver.mainContext.execute(snippets.getElementScrollOffset, [])
-      image.crop(utils.geometry.region(viewportLocation, viewportSize))
+    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})
     }
 
-    return image
-  }
-}
-
-function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
-  const calculateScaleRatio = makeCalculateScaleRatio({driver})
-  let viewportRegion
-
-  return async function takeScreenshot({name} = {}) {
-    logger.verbose('Taking viewport screenshot (using markers)...')
-    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))
-
-    if (stabilization.rotate) image.rotate(stabilization.rotate)
-
-    if (stabilization.crop) image.crop(stabilization.crop)
-    else {
-      if (!viewportRegion) viewportRegion = await getViewportRegion()
-      image.crop(viewportRegion)
-      await image.debug({...debug, name, suffix: 'viewport'})
+    return screenshot
+  } finally {
+    if (target.scroller) {
+      await target.scroller.restoreScrollbars()
     }
 
-    return image
-  }
-
-  async function getViewportRegion() {
-    const marker = await driver.mainContext.execute(snippets.addPageMarker)
-    try {
-      const image = makeImage(await driver.takeScreenshot())
-
-      if (stabilization.rotate) await image.rotate(stabilization.rotate)
+    // if there was active element and we have blurred it, then restore focus
+    if (activeElement) await context.focusElement(activeElement)
 
-      await image.debug({...debug, name: 'marker'})
-
-      const markerLocation = findImagePattern(await image.toObject(), marker)
-      if (!markerLocation) return null
-
-      const viewportSize = await driver.getViewportSize()
-
-      return utils.geometry.region(utils.geometry.scale(markerLocation, 1 / driver.pixelRatio), viewportSize)
-    } finally {
-      await driver.mainContext.execute(snippets.cleanupPageMarker)
-    }
-  }
-}
-
-function makeTakeNativeScreenshot({driver, stabilization = {}, debug, logger}) {
-  return async function takeScreenshot({name, withStatusBar} = {}) {
-    logger.verbose('Taking native driver screenshot...')
-    const image = makeImage(await driver.takeScreenshot())
-    await image.debug({...debug, name, suffix: 'original'})
-
-    if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(1 / driver.pixelRatio)
-
-    if (stabilization.rotate) image.rotate(stabilization.rotate)
-
-    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}
-        : {x: 0, y: driver.statusBarHeight, width: viewportSize.width, height: viewportSize.height}
-      image.crop(cropRegion)
-      await image.debug({...debug, name, suffix: `viewport${withStatusBar ? '-with-statusbar' : ''}`})
+    // traverse from target context to the main context to restore scrollbars and context states
+    for (const prevContext of context.path.reverse()) {
+      const scrollingElement = await prevContext.getScrollingElement()
+      if (scrollingElement) {
+        if (driver.isWeb && hideScrollbars) await scrollingElement.restoreScrollbars()
+        await scrollingElement.restoreState()
+      }
     }
 
-    return image
+    // restore focus on original active context
+    await activeContext.focus()
   }
 }
 
-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
+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,
+      }
     }
-
-    const scaledImageWidth = Math.round(imageWidth / driver.pixelRatio)
-    return viewportWidth / scaledImageWidth / driver.pixelRatio
   }
 }
 
-module.exports = makeTakeScreenshot
+module.exports = takeScreenshot

package/src/take-simple-screenshot.js

@@ -0,0 +1,25 @@
+const utils = require('@applitools/utils')
+const makeTakeViewportScreenshot = require('./take-viewport-screenshot')
+
+async function takeSimpleScreenshot({context, region, withStatusBar, wait, stabilization, debug = {}, logger}) {
+  logger.verbose('Taking image of...')
+
+  const driver = context.driver
+  const takeViewportScreenshot = makeTakeViewportScreenshot({logger, driver, stabilization, debug})
+
+  await utils.general.sleep(wait)
+
+  const image = await takeViewportScreenshot({withStatusBar})
+
+  if (region) {
+    const cropRegion = await driver.getRegionInViewport(context, region)
+    if (utils.geometry.isEmpty(cropRegion)) throw new Error('Screenshot region is out of viewport')
+    image.crop(cropRegion)
+    await image.debug({path: debug.path, suffix: 'region'})
+    return {image, region: cropRegion}
+  } else {
+    return {image, region: utils.geometry.region({x: 0, y: 0}, image.size)}
+  }
+}
+
+module.exports = takeSimpleScreenshot

package/src/take-stitched-screenshot.js

@@ -1,6 +1,6 @@
 const utils = require('@applitools/utils')
 const makeImage = require('./image')
-const makeTakeScreenshot = require('./take-screenshot')
+const makeTakeViewportScreenshot = require('./take-viewport-screenshot')
 
 async function takeStitchedScreenshot({
   logger,
@@ -8,7 +8,7 @@ async function takeStitchedScreenshot({
   scroller,
   region,
   withStatusBar,
-  overlap = 50,
+  overlap = {top: 10, bottom: 50},
   framed,
   wait,
   stabilization,
@@ -17,7 +17,7 @@ async function takeStitchedScreenshot({
   logger.verbose('Taking full image of...')
 
   const driver = context.driver
-  const takeScreenshot = makeTakeScreenshot({logger, driver, stabilization, debug})
+  const takeViewportScreenshot = makeTakeViewportScreenshot({logger, driver, stabilization, debug})
   const scrollerState = await scroller.preserveState()
 
   const initialOffset = region ? utils.geometry.location(region) : {x: 0, y: 0}
@@ -26,26 +26,26 @@ async function takeStitchedScreenshot({
 
   await utils.general.sleep(wait)
 
+  const contentSize = await scroller.getContentSize()
+
   logger.verbose('Getting initial image...')
-  let image = await takeScreenshot({name: 'initial', withStatusBar})
+  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(), await scroller.getClientRegion()),
-        region,
-      )
-    : await scroller.getClientRegion()
+    ? utils.geometry.intersect(utils.geometry.region(await scroller.getInnerOffset(), 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
-  const cropRegion = driver.isNative ? targetRegion : await driver.getRegionInViewport(context, targetRegion)
+  let cropRegion = driver.isNative ? targetRegion : await driver.getRegionInViewport(context, targetRegion)
 
   logger.verbose('cropping...')
   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}, await scroller.getContentSize())
+  const contentRegion = utils.geometry.region({x: 0, y: 0}, contentSize)
   logger.verbose(`Scroller size: ${contentRegion}`)
 
   if (region) region = utils.geometry.intersect(region, contentRegion)
@@ -53,37 +53,41 @@ async function takeStitchedScreenshot({
 
   region = utils.geometry.round(region)
 
-  // TODO padding should be provided from args instead of overlap
-  const padding = {top: overlap, bottom: overlap}
-  const [initialRegion, ...partRegions] = utils.geometry.divide(region, utils.geometry.round(image.size), padding)
+  const [initialRegion, ...partRegions] = utils.geometry.divide(region, image.size, overlap)
   logger.verbose('Part regions', partRegions)
 
   logger.verbose('Creating stitched image composition container')
-  const stitchedImage = makeImage({width: region.width, height: region.height})
+  const stitchedImage = makeImage({auto: true})
 
   logger.verbose('Adding initial image...')
-  await stitchedImage.copy(image, {x: 0, y: 0})
+  stitchedImage.copy(image, {x: 0, y: 0})
 
   logger.verbose('Getting the rest of the image parts...')
 
-  let stitchedSize = {width: image.width, height: image.height}
-  let lastImage
+  let lastImage = firstImage
+  let scrollerRegionShift = {x: 0, y: 0}
   for (const partRegion of partRegions) {
     const partName = `${partRegion.x}_${partRegion.y}_${partRegion.width}x${partRegion.height}`
     logger.verbose(`Processing part ${partName}`)
 
-    const compensateOffset = {x: 0, y: initialRegion.y !== partRegion.y ? padding.top : 0}
+    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}`)
-    const actualOffset = await scroller.moveTo(requiredOffset)
-    const remainingOffset = utils.geometry.offset(
-      utils.geometry.offsetNegative(
-        utils.geometry.offsetNegative(requiredOffset, actualOffset),
-        expectedRemainingOffset,
-      ),
-      compensateOffset,
-    )
+    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
+    if (!utils.geometry.equals(actualOffset, requiredOffset) && driver.isNative) {
+      const actualScrollerRegion = await scroller.getClientRegion()
+      scrollerRegionShift = {x: scrollerRegion.x - actualScrollerRegion.x, y: scrollerRegion.y - actualScrollerRegion.y}
+    }
+    actualOffset = utils.geometry.offset(actualOffset, scrollerRegionShift)
+
+    const remainingOffset = {
+      x: requiredOffset.x - actualOffset.x - expectedRemainingOffset.x + compensateOffset.x,
+      y: requiredOffset.y - actualOffset.y - expectedRemainingOffset.y + compensateOffset.y,
+    }
+
     const cropPartRegion = {
       x: cropRegion.x + remainingOffset.x,
       y: cropRegion.y + remainingOffset.y,
@@ -97,7 +101,7 @@ async function takeStitchedScreenshot({
     if (utils.geometry.isEmpty(cropPartRegion) || !utils.geometry.isIntersected(cropRegion, cropPartRegion)) continue
 
     logger.verbose('Getting image...')
-    image = await takeScreenshot({name: partName})
+    image = await takeViewportScreenshot({name: partName})
     lastImage = framed ? makeImage(image) : null
 
     logger.verbose('cropping...')
@@ -105,25 +109,15 @@ async function takeStitchedScreenshot({
     await image.debug({...debug, name: partName, suffix: 'region'})
 
     const pasteOffset = utils.geometry.offsetNegative(utils.geometry.location(partRegion), initialOffset)
-    await stitchedImage.copy(image, pasteOffset)
-
-    stitchedSize = {width: pasteOffset.x + image.width, height: pasteOffset.y + image.height}
+    stitchedImage.copy(image, pasteOffset)
   }
 
   await scroller.restoreState(scrollerState)
 
-  logger.verbose(`Extracted entire size: ${region}`)
-  logger.verbose(`Actual stitched size: ${stitchedSize}`)
-
-  if (stitchedSize.width < stitchedImage.width || stitchedSize.height < stitchedImage.height) {
-    logger.verbose('Trimming unnecessary margins...')
-    stitchedImage.crop(utils.geometry.region({x: 0, y: 0}, stitchedSize))
-  }
-
   await stitchedImage.debug({...debug, name: 'stitched'})
 
   if (framed) {
-    await stitchedImage.combine(
+    stitchedImage.frame(
       firstImage,
       lastImage,
       withStatusBar ? utils.geometry.offset(cropRegion, {x: 0, y: driver.statusBarHeight}) : cropRegion,