@applitools/screenshoter 3.2.8 → 3.3.2

package/src/take-viewport-screenshot.js

@@ -1,25 +1,188 @@
 const utils = require('@applitools/utils')
-const makeTakeScreenshot = require('./take-screenshot')
+const snippets = require('@applitools/snippets')
+const findImagePattern = require('./find-image-pattern')
+const makeImage = require('./image')
 
-async function takeViewportScreenshot({context, region, withStatusBar, wait, stabilization, debug = {}, logger}) {
-  logger.verbose('Taking image of...')
+function makeTakeViewportScreenshot(options) {
+  const {driver} = options
+  if (driver.isNative) {
+    return makeTakeNativeScreenshot(options)
+  } else if (driver.isIOS) {
+    // safari on ios takes screenshot with browser and os interfaces
+    return makeTakeMarkedScreenshot(options)
+  } else if (driver.browserName === 'Firefox') {
+    try {
+      const browserVersion = Number.parseInt(driver.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') {
+    // safari 11 on macs takes full page screenshot
+    return makeTakeSafari11Screenshot(options)
+  }
+
+  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'})
+
+    if (stabilization.scale) image.scale(stabilization.scale)
+    else image.scale(await calculateScaleRatio(image.width))
+
+    if (stabilization.rotate) image.crop(stabilization.rotate)
+
+    if (stabilization.crop) image.crop(stabilization.crop)
+
+    return image
+  }
+}
+
+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'})
+
+    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))
+    }
+
+    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()
+      if (viewportRegion) image.crop(viewportRegion)
+    }
+
+    await image.debug({...debug, name, suffix: 'viewport'})
+
+    return image
+  }
+
+  async function getViewportRegion() {
+    const marker = await driver.mainContext.execute(snippets.addPageMarker)
+    await utils.general.sleep(100)
+
+    try {
+      const image = makeImage(await driver.takeScreenshot())
+
+      if (stabilization.rotate) await image.rotate(stabilization.rotate)
 
-  const driver = context.driver
-  const takeScreenshot = makeTakeScreenshot({logger, driver, stabilization, debug})
+      await image.debug({...debug, name: 'marker'})
 
-  await utils.general.sleep(wait)
+      const markerLocation = findImagePattern(await image.toObject(), {...marker, pixelRatio: driver.pixelRatio})
+      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}
+        : {top: driver.statusBarHeight, bottom: driver.navigationBarHeight, left: 0, right: 0}
+      image.crop(cropRegion)
+    }
+
+    await image.debug({...debug, name, suffix: `viewport${withStatusBar ? '-with-statusbar' : ''}`})
+
+    return image
+  }
+}
 
-  const image = await takeScreenshot({withStatusBar})
+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
+    }
 
-  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)}
+    const scaledImageWidth = Math.round(imageWidth / driver.pixelRatio)
+    return viewportWidth / scaledImageWidth / driver.pixelRatio
   }
 }
 
-module.exports = takeViewportScreenshot
+module.exports = makeTakeViewportScreenshot

package/test/e2e/android.spec.js

@@ -1,9 +1,63 @@
 const assert = require('assert')
 const pixelmatch = require('pixelmatch')
 const {Driver} = require('@applitools/driver')
-const spec = require('../util/spec-driver')
+const spec = require('@applitools/spec-driver-webdriverio')
 const makeImage = require('../../src/image')
-const screenshoter = require('../../index')
+const takeScreenshot = require('../../index')
+
+const env = {
+  android: {
+    url: 'https://ondemand.saucelabs.com/wd/hub',
+    capabilities: {
+      name: 'Android Screenshoter Test',
+      browserName: '',
+      platformName: 'Android',
+      platformVersion: '7.0',
+      appiumVersion: '1.20.2',
+      deviceName: 'Samsung Galaxy S8 FHD GoogleAPI Emulator',
+      automationName: 'uiautomator2',
+      app: 'https://applitools.jfrog.io/artifactory/Examples/android/1.3/app-debug.apk',
+      username: process.env.SAUCE_USERNAME,
+      accessKey: process.env.SAUCE_ACCESS_KEY,
+    },
+
+    // url: 'http://0.0.0.0:4723/wd/hub',
+    // capabilities: {
+    //   deviceName: 'Google Pixel 3a XL',
+    //   platformName: 'Android',
+    //   platformVersion: '10.0',
+    //   automationName: 'uiautomator2',
+    //   nativeWebScreenshot: true,
+    //   avd: 'Pixel_3a_XL',
+    //   app: 'https://applitools.jfrog.io/artifactory/Examples/android/1.3/app-debug.apk',
+    // },
+  },
+  androidx: {
+    url: 'https://ondemand.saucelabs.com/wd/hub',
+    capabilities: {
+      name: 'AndroidX Screenshoter Test',
+      browserName: '',
+      platformName: 'Android',
+      platformVersion: '10.0',
+      appiumVersion: '1.20.2',
+      deviceName: 'Google Pixel 3a XL GoogleAPI Emulator',
+      automationName: 'uiautomator2',
+      app: 'https://applitools.jfrog.io/artifactory/Examples/androidx/1.3.1/app_androidx.apk',
+      username: process.env.SAUCE_USERNAME,
+      accessKey: process.env.SAUCE_ACCESS_KEY,
+    },
+
+    // url: 'http://0.0.0.0:4723/wd/hub',
+    // capabilities: {
+    //   deviceName: 'Google Pixel 3a XL',
+    //   platformName: 'Android',
+    //   platformVersion: '10.0',
+    //   automationName: 'uiautomator2',
+    //   avd: 'Pixel_3a_XL',
+    //   app: 'https://applitools.jfrog.io/artifactory/Examples/androidx/1.3.3/app_androidx.apk',
+    // },
+  },
+}
 
 describe('screenshoter', () => {
   const logger = {log: () => {}, warn: () => {}, error: () => {}, verbose: () => {}}
@@ -20,7 +74,7 @@ describe('screenshoter', () => {
 
   describe('android app', () => {
     before(async () => {
-      ;[browser, destroyBrowser] = await spec.build({type: 'android'})
+      ;[browser, destroyBrowser] = await spec.build(env.android)
     })
 
     after(async () => {
@@ -57,6 +111,10 @@ describe('screenshoter', () => {
       return fullApp({type: 'non-scrollable'})
     })
 
+    it.skip('take webview screenshot', () => {
+      return webview()
+    })
+
     it('take region screenshot', () => {
       return region()
     })
@@ -72,7 +130,7 @@ describe('screenshoter', () => {
 
   describe('androidx app', () => {
     before(async () => {
-      ;[browser, destroyBrowser] = await spec.build({type: 'androidx'})
+      ;[browser, destroyBrowser] = await spec.build(env.androidx)
     })
 
     after(async () => {
@@ -89,6 +147,18 @@ describe('screenshoter', () => {
       return fullApp({type: 'recycler', x: true})
     })
 
+    it('take full app screenshot (collapsing layout)', () => {
+      return fullApp({type: 'collapsing', x: true})
+    })
+
+    it.skip('take full app screenshot (pager)', () => {
+      return fullApp({type: 'pager', x: true})
+    })
+
+    it.skip('take full app screenshot (overlapped status bar)', () => {
+      return fullApp({type: 'overlapped', x: true})
+    })
+
     it('take full element screenshot', () => {
       return fullElement()
     })
@@ -97,7 +167,7 @@ describe('screenshoter', () => {
   async function app(options = {}) {
     const expectedPath = `./test/fixtures/android/app${options.withStatusBar ? '-statusbar' : ''}.png`
 
-    const screenshot = await screenshoter({logger, driver, wait: 1500, ...options})
+    const screenshot = await takeScreenshot({logger, driver, wait: 1500, ...options})
     try {
       if (options.withStatusBar) await sanitizeStatusBar(screenshot.image)
       const actual = await screenshot.image.toObject()
@@ -109,8 +179,18 @@ describe('screenshoter', () => {
     }
   }
   async function fullApp({type, x, ...options} = {}) {
-    let buttonSelector, expectedPath
-    if (type === 'recycler') {
+    let buttonSelector, expectedPath, scrollingElementSelector
+    if (type === 'pager') {
+      buttonSelector = {type: 'id', selector: 'btn_view_pager_2_activity'}
+      expectedPath = `./test/fixtures/android/x-app-fully-pager${options.withStatusBar ? '-statusbar' : ''}.png`
+    } else if (type === 'overlapped') {
+      buttonSelector = {type: 'id', selector: 'btn_recycler_view_under_status_bar_activity'}
+      expectedPath = `./test/fixtures/android/x-app-fully-overlapped${options.withStatusBar ? '-statusbar' : ''}.png`
+    } else if (type === 'collapsing') {
+      buttonSelector = {type: 'id', selector: 'btn_recycler_view_nested_collapsing'}
+      scrollingElementSelector = {type: 'id', selector: 'recyclerView'}
+      expectedPath = `./test/fixtures/android/x-app-fully-collapsing${options.withStatusBar ? '-statusbar' : ''}.png`
+    } else if (type === 'recycler') {
       if (x) {
         buttonSelector = {type: 'id', selector: 'btn_recycler_view_activity'}
         expectedPath = `./test/fixtures/android/x-app-fully-recycler${options.withStatusBar ? '-statusbar' : ''}.png`
@@ -119,7 +199,7 @@ describe('screenshoter', () => {
         expectedPath = `./test/fixtures/android/app-fully-recycler${options.withStatusBar ? '-statusbar' : ''}.png`
       }
     } else if (type === 'non-scrollable') {
-      buttonSelector = {type: 'id', selector: 'btn_edit_text'}
+      buttonSelector = {type: 'id', selector: 'btn_activity_as_dialog'}
       expectedPath = `./test/fixtures/android/app-fully-non-scrollable${options.withStatusBar ? '-statusbar' : ''}.png`
     } else {
       buttonSelector = {type: 'id', selector: 'btn_scroll_view_footer_header'}
@@ -129,7 +209,13 @@ describe('screenshoter', () => {
     const button = await driver.element(buttonSelector)
     await button.click()
 
-    const screenshot = await screenshoter({
+    await driver.init()
+
+    if (scrollingElementSelector) {
+      await driver.currentContext.setScrollingElement(scrollingElementSelector)
+    }
+
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       fully: true,
@@ -148,8 +234,29 @@ describe('screenshoter', () => {
       throw err
     }
   }
+  async function webview(options) {
+    const expectedPath = `./test/fixtures/android/webview.png`
+    const buttonSelector = {type: 'id', selector: 'btn_web_view'}
+
+    const button = await driver.element(buttonSelector)
+    await button.click()
+    console.log(await driver.target.getContexts())
+    await driver.target.switchContext('WEBVIEW')
+
+    await driver.init()
+
+    const screenshot = await takeScreenshot({logger, driver, wait: 1500, ...options})
+    try {
+      const actual = await screenshot.image.toObject()
+      const expected = await makeImage(expectedPath).toObject()
+      assert.strictEqual(pixelmatch(actual.data, expected.data, null, expected.width, expected.height), 0)
+    } catch (err) {
+      await screenshot.image.debug({path: './logs', name: 'webview_failed', suffix: Date.now()})
+      throw err
+    }
+  }
   async function region(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       region: {x: 30, y: 500, height: 100, width: 200},
@@ -166,7 +273,7 @@ describe('screenshoter', () => {
     }
   }
   async function fullRegion(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       region: {x: 30, y: 10, height: 700, width: 200},
@@ -184,7 +291,7 @@ describe('screenshoter', () => {
     }
   }
   async function element(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       region: {type: 'id', selector: 'btn_recycler_view'},
@@ -207,7 +314,7 @@ describe('screenshoter', () => {
     })
     await button.click()
 
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       region: {type: 'id', selector: 'recyclerView'},

package/test/e2e/external.spec.js

@@ -0,0 +1,155 @@
+const assert = require('assert')
+const pixelmatch = require('pixelmatch')
+const {Driver} = require('@applitools/driver')
+const utils = require('@applitools/utils')
+const spec = require('@applitools/spec-driver-webdriverio')
+const makeImage = require('../../src/image')
+const takeScreenshot = require('../../index')
+
+describe.skip('external tests', () => {
+  const logger = {log: () => {}, warn: () => {}, error: () => {}, verbose: () => {}}
+  let browser, destroyBrowser
+
+  afterEach(async () => {
+    await destroyBrowser()
+  })
+
+  it('AGL Android - full app screenshot of the view with animated scroll', async () => {
+    const expectedPath = `./test/fixtures/external/agl.png`
+
+    ;[browser, destroyBrowser] = await spec.build({
+      url: 'https://hub.browserstack.com/wd/hub',
+      capabilities: {
+        platformName: 'android',
+        'appium:platformVersion': '11.0',
+        'appium:deviceName': 'Google Pixel 5',
+        'appium:app': 'agl_app_android',
+        'bstack:options': {
+          userName: process.env.BROWSERSTACK_USERNAME,
+          accessKey: process.env.BROWSERSTACK_ACCESS_KEY,
+        },
+      },
+    })
+
+    await browser.closeApp()
+    await browser.launchApp()
+    const driver = await new Driver({driver: browser, spec, logger}).init()
+
+    const saveBtn = await browser.$('//android.widget.Button')
+    await saveBtn.click()
+
+    await utils.general.sleep(8000)
+    const signinBtn = await browser.$('//android.widget.Button[@text="SIGN IN"]')
+    await signinBtn.click()
+    await utils.general.sleep(10000)
+    const emailInput = await browser.$('//android.widget.EditText')
+    await emailInput.setValue('daniel.martin@toro.com')
+    const nxtBtn = await browser.$('//android.widget.Button[@text="NEXT"]')
+    await nxtBtn.click()
+    await utils.general.sleep(10000)
+    const passwordInput = await browser.$('//android.widget.EditText[@password="true"]')
+    await passwordInput.setValue('Welcome@1')
+    const loginBtn = await browser.$('//android.widget.Button[@text="LOGIN"]')
+    await loginBtn.click()
+    await utils.general.sleep(18000)
+    const skipBtn = await browser.$('//android.widget.Button[@text="SKIP"]')
+    await skipBtn.click()
+    await utils.general.sleep(5000)
+    const finishBtn = await browser.$('//android.widget.Button[@text="FINISH"]')
+    await finishBtn.click()
+    await utils.general.sleep(15000)
+
+    await driver.init()
+
+    const screenshot = await takeScreenshot({
+      logger,
+      driver,
+      fully: true,
+      framed: true,
+      stabilization: {crop: {top: 53, bottom: 16, left: 0, right: 0}},
+      debug: {path: './'},
+    })
+    try {
+      const actual = await screenshot.image.toObject()
+      const expected = await makeImage(expectedPath).toObject()
+      assert.strictEqual(pixelmatch(actual.data, expected.data, null, expected.width, expected.height), 0)
+    } catch (err) {
+      await screenshot.image.debug({path: './logs', name: 'viewport_failed', suffix: Date.now()})
+      throw err
+    }
+  })
+
+  it('AGL iOS - full app screenshot of the view with animated scroll', async () => {
+    const expectedPath = `./test/fixtures/external/agl.png`
+    ;[browser, destroyBrowser] = await spec.build({
+      url: 'https://hub.browserstack.com/wd/hub',
+      capabilities: {
+        platformName: 'ios',
+        'appium:platformVersion': '14',
+        'appium:deviceName': 'iPhone 12',
+        'appium:app': 'agl_app',
+        'appium:processArguments': `{
+          "args": [
+            "-dev.environment", "qtrtest",
+            "-dev.clear.keychain", "YES",
+            "-dev.keychain.shared", "NO",
+            "-user.lastQuickTourVersionCompleted", "0"
+          ],
+          "env": {
+            "DYLD_INSERT_LIBRARIES": "@executable_path/Frameworks/EyesiOSHelper.xcframework/ios-arm64/EyesiOSHelper.framework/EyesiOSHelper"
+          }
+        }`,
+        'bstack:options': {
+          userName: process.env.BROWSERSTACK_USERNAME,
+          accessKey: process.env.BROWSERSTACK_ACCESS_KEY,
+        },
+      },
+    })
+
+    await browser.closeApp()
+    await browser.launchApp()
+    const driver = await new Driver({driver: browser, spec, logger}).init()
+
+    await browser.acceptAlert()
+
+    await utils.general.sleep(8000)
+    const signinBtn = await browser.$('//XCUIElementTypeButton[@name="SIGN IN"]')
+    await signinBtn.click()
+    await utils.general.sleep(8000)
+    const emailInput = await browser.$('//XCUIElementTypeTextField')
+    await emailInput.setValue('daniel.martin@toro.com')
+    const nxtBtn = await browser.$('//XCUIElementTypeButton[@name="NEXT"]')
+    await nxtBtn.click()
+    await utils.general.sleep(8000)
+    const passwordInput = await browser.$('//XCUIElementTypeSecureTextField')
+    await passwordInput.setValue('Welcome@1')
+    const loginBtn = await browser.$('//XCUIElementTypeButton[@name="LOGIN"]')
+    await loginBtn.click()
+    await utils.general.sleep(18000)
+    const skipBtn = await browser.$('//XCUIElementTypeButton[@name="Skip"]')
+    await skipBtn.click()
+    await utils.general.sleep(5000)
+    const finishBtn = await browser.$('//XCUIElementTypeButton[@name="Finish"]')
+    await finishBtn.click()
+    await utils.general.sleep(20000)
+
+    await driver.init()
+
+    const screenshot = await takeScreenshot({
+      logger,
+      driver,
+      fully: true,
+      framed: true,
+      wait: 1500,
+      // debug: {path: './'},
+    })
+    try {
+      const actual = await screenshot.image.toObject()
+      const expected = await makeImage(expectedPath).toObject()
+      assert.strictEqual(pixelmatch(actual.data, expected.data, null, expected.width, expected.height), 0)
+    } catch (err) {
+      await screenshot.image.debug({path: './logs', name: 'viewport_failed', suffix: Date.now()})
+      throw err
+    }
+  })
+})