@applitools/screenshoter 3.7.32 → 3.7.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/screenshoter",
-  "version": "3.7.32",
+  "version": "3.7.34",
   "description": "Applitools universal screenshoter for web and native applications",
   "keywords": [
     "applitools",
@@ -69,15 +69,15 @@
   "dependencies": {
     "@applitools/image": "1.0.28",
     "@applitools/logger": "1.1.48",
-    "@applitools/snippets": "2.4.17",
+    "@applitools/snippets": "2.4.19",
     "@applitools/utils": "1.3.32",
     "jpeg-js": "0.4.4",
     "png-async": "0.9.4"
   },
   "devDependencies": {
     "@applitools/bongo": "^3.0.3",
-    "@applitools/driver": "^1.11.37",
-    "@applitools/spec-driver-webdriverio": "^1.4.33",
+    "@applitools/driver": "^1.11.39",
+    "@applitools/spec-driver-webdriverio": "^1.4.35",
     "@applitools/test-utils": "^1.5.15",
     "appium": "^1.22.3",
     "chromedriver": "^101.0.0",

package/src/extract-coordinates-for-selectors-and-elements.js

@@ -16,6 +16,7 @@ async function extractCoordinatesForSelectorsAndElements({regionsToCalculate, sc
         const contextLocationInViewport = await elements[0].context.getLocationInViewport()
         const scaledRegions = []
         for (const element of elements) {
+          const viewport = await element.driver.getViewport()
           const elementRegion = await element.getRegion()
           const region = utils.geometry.offset(elementRegion, contextLocationInViewport)
           const scaledRegion = utils.geometry.scale(
@@ -25,7 +26,7 @@ async function extractCoordinatesForSelectorsAndElements({regionsToCalculate, sc
               width: region.width,
               height: region.height,
             },
-            context.driver.viewportScale,
+            viewport.viewportScale,
           )
           logger.log('scaled region', scaledRegion)
           scaledRegions.push(scaledRegion)

package/src/get-target.js

@@ -27,8 +27,9 @@ async function getTarget({window, context, region, fully, scrollingMode, logger}
       if (!element) throw new Error('Element not found!')
 
       const elementContext = element.context
+      const environment = await element.driver.getEnvironment()
 
-      if (element.driver.isNative) {
+      if (environment.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))) {
@@ -51,7 +52,7 @@ async function getTarget({window, context, region, fully, scrollingMode, logger}
         returnRegion = await element.getRegion()
       }
       const scroller = makeScroller({element: scrollingElement, scrollingMode, logger})
-      if (returnRegion && !element.driver.isNative && !(await scrollingElement.isRoot())) {
+      if (returnRegion && !environment.isNative && !(await scrollingElement.isRoot())) {
         const scrollerOffset = await scroller.getScrollOffset()
         returnRegion = utils.geometry.offset(returnRegion, scrollerOffset)
       }

package/src/scroller.js

@@ -111,7 +111,8 @@ function makeScroller({logger, element, scrollingMode = 'mixed'}) {
       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())) {
+      const environment = await element.driver.getEnvironment()
+      if (environment.isIOS && (await element.isRoot())) {
         const translateOffset = await element.translateTo(offset)
         return translateOffset
       }

package/src/take-screenshot.js

@@ -33,15 +33,24 @@ async function takeScreenshot({
   // screenshot of a window/app was requested (fully or viewport)
   const window = !region && (!frames || frames.length === 0)
 
+  const environment = await driver.getEnvironment()
+
   // switch worlds as needed
-  if (webview && driver.isNative) await driver.switchWorld(typeof webview === 'string' ? {id: webview} : null)
-  if (window && !webview && driver.isWebView) await driver.switchWorld({goHome: true})
+  let activeWorld
+  if (environment.isNative && (webview || (window && environment.isWeb))) {
+    if (webview === true) {
+      const worlds = await driver.getWorlds()
+      webview = worlds && worlds.find(name => name.includes('WEBVIEW'))
+    }
+    activeWorld = await driver.getCurrentWorld()
+    await driver.switchWorld(webview)
+  }
 
   // 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
+  withStatusBar = withStatusBar && environment.isNative && window && (!fully || framed)
+  scrollingMode = environment.isNative ? 'scroll' : scrollingMode
 
   const activeContext = driver.currentContext
   const context =
@@ -54,24 +63,24 @@ async function takeScreenshot({
     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()
+      if (environment.isWeb && hideScrollbars) await scrollingElement.hideScrollbars()
       // this is unwanted but necessary side effect, because it is not possible to extract initial scroll position
-      if (driver.isNative && !window) await scrollingElement.scrollTo({x: 0, y: 0}, {force: true})
+      if (environment.isNative && !window) await scrollingElement.scrollTo({x: 0, y: 0}, {force: true})
       await scrollingElement.preserveState()
     }
   }
 
   // blur active element in target context
-  const activeElement = driver.isWeb && hideCaret ? await context.blurElement() : null
+  const activeElement = environment.isWeb && hideCaret ? await context.blurElement() : null
 
   const target = await getTarget({window, context, region, fully, scrollingMode, logger})
 
   if (target.scroller) {
     await target.scroller.preserveState()
-    if (driver.isWeb && hideScrollbars) await target.scroller.hideScrollbars()
+    if (environment.isWeb && hideScrollbars) await target.scroller.hideScrollbars()
   }
 
-  if (!window && !driver.isNative) await scrollIntoViewport({...target, logger})
+  if (!window && !environment.isNative) await scrollIntoViewport({...target, logger})
 
   if (fully && !target.region && target.scroller) await target.scroller.moveTo({x: 0, y: 0})
 
@@ -90,7 +99,9 @@ async function takeScreenshot({
         })
       : await takeSimpleScreenshot({...target, withStatusBar, wait, stabilization, debug, logger})
 
-  screenshot.image.scale(driver.viewportScale)
+  const viewport = await driver.getViewport()
+
+  screenshot.image.scale(viewport.viewportScale)
 
   const calculatedRegions = await extractCoordinatesForSelectorsAndElements({
     regionsToCalculate,
@@ -121,7 +132,7 @@ async function takeScreenshot({
       for (const prevContext of context.path.reverse()) {
         const scrollingElement = await prevContext.getScrollingElement()
         if (scrollingElement) {
-          if (driver.isWeb && hideScrollbars) await scrollingElement.restoreScrollbars()
+          if (environment.isWeb && hideScrollbars) await scrollingElement.restoreScrollbars()
           await scrollingElement.restoreState()
         }
       }
@@ -130,7 +141,7 @@ async function takeScreenshot({
       await activeContext.focus()
 
       // return driver to previous app world if switched
-      await driver.switchWorld({restoreState: true})
+      if (activeWorld) await driver.switchWorld(activeWorld)
     },
   }
 }

package/src/take-simple-screenshot.js

@@ -5,7 +5,7 @@ async function takeSimpleScreenshot({context, region, withStatusBar, wait, stabi
   logger.verbose('Taking image of...')
 
   const driver = context.driver
-  const takeViewportScreenshot = makeTakeViewportScreenshot({logger, driver, stabilization, debug})
+  const takeViewportScreenshot = await makeTakeViewportScreenshot({logger, driver, stabilization, debug})
 
   await utils.general.sleep(wait)
 

package/src/take-stitched-screenshot.js

@@ -21,7 +21,10 @@ async function takeStitchedScreenshot({
   if (await scroller.element.isPager()) overlap = {top: 0, bottom: 0}
 
   const driver = context.driver
-  const takeViewportScreenshot = makeTakeViewportScreenshot({logger, driver, stabilization, debug})
+  const environment = await driver.getEnvironment()
+  const viewport = await driver.getViewport()
+
+  const takeViewportScreenshot = await makeTakeViewportScreenshot({logger, driver, stabilization, debug})
   const scrollerState = await scroller.preserveState()
 
   const initialOffset = region ? utils.geometry.location(region) : {x: 0, y: 0}
@@ -58,7 +61,7 @@ async function takeStitchedScreenshot({
   logger.log('Crop region calculated: ', cropRegion)
   if (utils.geometry.isEmpty(cropRegion)) throw new Error('Screenshot region is out of viewport')
 
-  image.crop(withStatusBar ? utils.geometry.offset(cropRegion, {x: 0, y: driver.statusBarSize}) : cropRegion)
+  image.crop(withStatusBar ? utils.geometry.offset(cropRegion, {x: 0, y: viewport.statusBarSize}) : cropRegion)
   await image.debug({...debug, name: 'initial', suffix: 'region'})
 
   const contentRegion = utils.geometry.region({x: 0, y: 0}, contentSize)
@@ -80,7 +83,8 @@ async function takeStitchedScreenshot({
   }
   region = utils.geometry.floor(region)
 
-  const partSize = lazyLoad && driver.isNative ? {width: image.size.width, height: image.size.height / 2} : image.size
+  const partSize =
+    lazyLoad && environment.isNative ? {width: image.size.width, height: image.size.height / 2} : image.size
   const [initialRegion, ...partRegions] = utils.geometry.divide(region, partSize, overlap)
   logger.verbose('Part regions', partRegions)
 
@@ -109,7 +113,7 @@ async function takeStitchedScreenshot({
     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) {
+    if (!utils.geometry.equals(actualOffset, requiredOffset) && environment.isNative) {
       const actualScrollerRegion = await scroller.getClientRegion()
       scrollerRegionShift = {x: scrollerRegion.x - actualScrollerRegion.x, y: scrollerRegion.y - actualScrollerRegion.y}
     }
@@ -154,7 +158,7 @@ async function takeStitchedScreenshot({
     stitchedImage.frame(
       firstImage,
       lastImage,
-      withStatusBar ? utils.geometry.offset(cropRegion, {x: 0, y: driver.statusBarSize}) : cropRegion,
+      withStatusBar ? utils.geometry.offset(cropRegion, {x: 0, y: viewport.statusBarSize}) : cropRegion,
     )
     await stitchedImage.debug({...debug, name: 'framed'})
 

package/src/take-viewport-screenshot.js

@@ -3,22 +3,23 @@ const snippets = require('@applitools/snippets')
 const findImagePattern = require('./find-image-pattern')
 const {makeImage} = require('@applitools/image')
 
-function makeTakeViewportScreenshot(options) {
+async function makeTakeViewportScreenshot(options) {
   const {driver} = options
-  if (driver.isNative) {
+  const environment = await driver.getEnvironment()
+  if (environment.isNative && !environment.isWeb) {
     return makeTakeNativeScreenshot(options)
-  } else if ((!driver.isEmulation && driver.isIOS) || driver.isWebView) {
+  } else if ((environment.isIOS && !environment.isEmulation) || (environment.isNative && environment.isWeb)) {
     // safari on ios takes screenshot with browser and os interfaces
     return makeTakeMarkedScreenshot(options)
-  } else if (driver.browserName === 'Firefox') {
+  } else if (environment.browserName === 'Firefox') {
     try {
-      const browserVersion = Number.parseInt(driver.browserVersion, 10)
+      const browserVersion = Number.parseInt(environment.browserVersion, 10)
       if (browserVersion >= 48 && browserVersion <= 72) {
         // firefox between versions 48 and 72 takes current frame screenshot only
         return makeTakeMainContextScreenshot(options)
       }
     } catch (ignored) {}
-  } else if (driver.browserName === 'Safari' && driver.browserVersion === '11') {
+  } else if (environment.browserName === 'Safari' && environment.browserVersion === '11') {
     // safari 11 on macs takes full page screenshot
     return makeTakeSafari11Screenshot(options)
   }
@@ -29,11 +30,12 @@ function makeTakeViewportScreenshot(options) {
 function makeTakeDefaultScreenshot({driver, stabilization = {}, debug, logger}) {
   return async function takeScreenshot({name} = {}) {
     logger.verbose('Taking screenshot (default)...')
+    const viewport = await driver.getViewport()
     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 / driver.viewportScale)
+    else image.scale(1 / viewport.pixelRatio / viewport.viewportScale)
 
     if (stabilization.rotate) image.crop(stabilization.rotate)
 
@@ -46,6 +48,7 @@ function makeTakeDefaultScreenshot({driver, stabilization = {}, debug, logger})
 function makeTakeMainContextScreenshot({driver, stabilization = {}, debug, logger}) {
   return async function takeScreenshot({name} = {}) {
     logger.verbose('Taking screenshot (with forced main context)...')
+    const viewport = await driver.getViewport()
     const originalContext = driver.currentContext
     await driver.mainContext.focus()
     const image = makeImage(await driver.takeScreenshot())
@@ -53,7 +56,7 @@ function makeTakeMainContextScreenshot({driver, stabilization = {}, debug, logge
     await image.debug({...debug, name, suffix: 'original'})
 
     if (stabilization.scale) image.scale(stabilization.scale)
-    else image.scale(1 / driver.pixelRatio / driver.viewportScale)
+    else image.scale(1 / viewport.pixelRatio / viewport.viewportScale)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
 
@@ -64,23 +67,21 @@ function makeTakeMainContextScreenshot({driver, stabilization = {}, debug, logge
 }
 
 function makeTakeSafari11Screenshot({driver, stabilization = {}, debug, logger}) {
-  let viewportSize
-
   return async function takeScreenshot({name} = {}) {
     logger.verbose('Taking safari 11 driver screenshot...')
+    const viewport = await driver.getViewport()
     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 / driver.viewportScale)
+    else image.scale(1 / viewport.pixelRatio / viewport.viewportScale)
 
     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))
+      image.crop(utils.geometry.region(viewportLocation, viewport.viewportSize))
     }
 
     return image
@@ -92,14 +93,15 @@ function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
 
   return async function takeScreenshot({name} = {}) {
     logger.verbose('Taking viewport screenshot (using markers)...')
+    const viewport = await driver.getViewport()
     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 / driver.viewportScale)
+    else image.scale(1 / viewport.pixelRatio / viewport.viewportScale)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
-    else if (driver.orientation.startsWith('landscape') && image.width < image.height) image.rotate(-90)
+    else if (viewport.orientation.startsWith('landscape') && image.width < image.height) image.rotate(-90)
 
     if (stabilization.crop) image.crop(stabilization.crop)
     else {
@@ -113,11 +115,12 @@ function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
   }
 
   async function getViewportRegion() {
+    const viewport = await driver.getViewport()
     // marker is -> bwb bwbb wbw bwbb wbww bbb
     const marker = await driver.mainContext.execute(snippets.addPageMarker, [
       {
         mask: [1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1],
-        size: utils.math.multiplier(driver.viewportScale * driver.pixelRatio, 0.05),
+        size: utils.math.multiplier(viewport.viewportScale * viewport.pixelRatio, 0.05),
       },
     ])
     await utils.general.sleep(100)
@@ -126,18 +129,18 @@ function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
       const image = makeImage(await driver.takeScreenshot())
 
       if (stabilization.rotate) image.rotate(stabilization.rotate)
-      else if (driver.orientation.startsWith('landscape') && image.width < image.height) image.rotate(-90)
+      else if (viewport.orientation.startsWith('landscape') && image.width < image.height) image.rotate(-90)
 
       await image.debug({...debug, name: 'marker'})
 
       const markerLocation = findImagePattern(await image.toObject(), {
         ...marker,
-        scale: driver.viewportScale * driver.pixelRatio,
+        scale: viewport.viewportScale * viewport.pixelRatio,
       })
       if (!markerLocation) return null
 
       return utils.geometry.region(
-        utils.geometry.scale(markerLocation, 1 / driver.pixelRatio / driver.viewportScale),
+        utils.geometry.scale(markerLocation, 1 / viewport.pixelRatio / viewport.viewportScale),
         await driver.getViewportSize(),
       )
     } finally {
@@ -149,22 +152,22 @@ function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
 function makeTakeNativeScreenshot({driver, stabilization = {}, debug, logger}) {
   return async function takeScreenshot({name, withStatusBar} = {}) {
     logger.verbose('Taking native driver screenshot...')
+    const viewport = await driver.getViewport()
     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 / driver.viewportScale)
+    else image.scale(1 / viewport.pixelRatio / viewport.viewportScale)
 
     if (stabilization.rotate) image.rotate(stabilization.rotate)
-    else if (driver.orientation.startsWith('landscape') && image.width < image.height) image.rotate(-90)
+    else if (viewport.orientation.startsWith('landscape') && image.width < image.height) image.rotate(-90)
 
     if (stabilization.crop) image.crop(stabilization.crop)
     else {
-      const viewportRegion = await driver.getViewportRegion()
-      const cropRegion = {...viewportRegion}
+      const cropRegion = {...viewport.viewportLocation, ...viewport.viewportSize}
       if (withStatusBar) {
         cropRegion.y = 0
-        cropRegion.height += driver.statusBarSize
+        cropRegion.height += viewport.statusBarSize
       }
       image.crop(cropRegion)
     }