@applitools/screenshoter 3.2.8 → 3.3.2

package/test/it/image.spec.js

@@ -78,42 +78,69 @@ describe('image', () => {
     assert.strictEqual(actual.height, 50000)
   })
 
-  it('should replace region in image with a higher and wider image', async () => {
+  it('should frame image in a higher and wider region', async () => {
     const image = makeImage('./test/fixtures/image/house.png')
     const srcImage = makeImage({
       width: 200,
       height: 200,
       data: Buffer.alloc(200 * 200 * 4, Buffer.from([0xff, 0, 0, 0xff])),
     })
-    const combinedImage = await srcImage.combine(image, image, {x: 200, y: 200, width: 100, height: 100})
+    const combinedImage = await srcImage.frame(image, image, {x: 200, y: 200, width: 100, height: 100})
     const actual = await combinedImage.toObject()
-    const expected = await makeImage('./test/fixtures/image/house.combined-higher-wider.png').toObject()
+    const expected = await makeImage('./test/fixtures/image/house.framed-higher-wider.png').toObject()
     assert.ok(pixelmatch(actual.data, expected.data, null, expected.width, expected.height) === 0)
   })
 
-  it('should replace region in image with a higher image', async () => {
+  it('should frame image in a higher region', async () => {
     const image = await makeImage('./test/fixtures/image/house.png')
     const srcImage = makeImage({
       width: 200,
       height: 200,
       data: Buffer.alloc(200 * 200 * 4, Buffer.from([0, 0xff, 0, 0xff])),
     })
-    const combinedImage = await srcImage.combine(image, image, {x: 200, y: 200, width: 200, height: 100})
+    const combinedImage = await srcImage.frame(image, image, {x: 200, y: 200, width: 200, height: 100})
     const actual = await combinedImage.toObject()
-    const expected = await makeImage('./test/fixtures/image/house.combined-higher.png').toObject()
+    const expected = await makeImage('./test/fixtures/image/house.framed-higher.png').toObject()
     assert.ok(pixelmatch(actual.data, expected.data, null, expected.width, expected.height) === 0)
   })
 
-  it('should replace region in image with a higher image', async () => {
+  it('should frame image in a wider region', async () => {
     const image = await makeImage('./test/fixtures/image/house.png')
-    const srcImage = makeImage({
-      width: 200,
-      height: 200,
-      data: Buffer.alloc(200 * 200 * 4, Buffer.from([0, 0, 0xff, 0xff])),
-    })
-    const combinedImage = await srcImage.combine(image, image, {x: 200, y: 200, width: 100, height: 200})
-    const actual = await combinedImage.toObject()
-    const expected = await makeImage('./test/fixtures/image/house.combined-wider.png').toObject()
+    const data = Buffer.alloc(200 * 200 * 4, Buffer.from([0, 0, 0xff, 0xff]))
+    const actual = await makeImage({width: 200, height: 200, data})
+      .frame(image, image, {x: 200, y: 200, width: 100, height: 200})
+      .toObject()
+    const expected = await makeImage('./test/fixtures/image/house.framed-wider.png').toObject()
+    assert.ok(pixelmatch(actual.data, expected.data, null, expected.width, expected.height) === 0)
+  })
+
+  it('should frame image in a shorter and thinner region', async () => {
+    const image = await makeImage('./test/fixtures/image/house.png')
+    const data = Buffer.alloc(200 * 200 * 4, Buffer.from([0xff, 0, 0xff, 0xff]))
+    const actual = await makeImage({width: 200, height: 200, data})
+      .frame(image, image, {x: 100, y: 100, width: 250, height: 250})
+      .toObject()
+    const expected = await makeImage('./test/fixtures/image/house.framed-shorter-thinner.png').toObject()
+    assert.ok(pixelmatch(actual.data, expected.data, null, expected.width, expected.height) === 0)
+  })
+
+  it('should frame image in a shorter region', async () => {
+    const image = await makeImage('./test/fixtures/image/house.png')
+    const data = Buffer.alloc(200 * 200 * 4, Buffer.from([0xff, 0, 0xff, 0xff]))
+    const actual = await makeImage({width: 200, height: 200, data})
+      .frame(image, image, {x: 100, y: 100, width: 200, height: 250})
+      .toObject()
+    const expected = await makeImage('./test/fixtures/image/house.framed-shorter-thinner.png').toObject()
+    assert.ok(pixelmatch(actual.data, expected.data, null, expected.width, expected.height) === 0)
+  })
+
+  it('should frame image in a thinner region', async () => {
+    const image = await makeImage('./test/fixtures/image/house.png')
+    const data = Buffer.alloc(200 * 200 * 4, Buffer.from([0xff, 0, 0xff, 0xff]))
+    const actual = await makeImage({width: 200, height: 200, data})
+      .frame(image, image, {x: 100, y: 100, width: 250, height: 200})
+      .toObject()
+    const expected = await makeImage('./test/fixtures/image/house.framed-shorter-thinner.png').toObject()
     assert.ok(pixelmatch(actual.data, expected.data, null, expected.width, expected.height) === 0)
   })
 })

package/docker-compose.yaml

@@ -1,29 +0,0 @@
-{
-  "version": "3.4",
-  "services": {
-    "chrome": {
-      "image": "selenium/standalone-chrome",
-      "environment": [
-        "SE_NODE_OVERRIDE_MAX_SESSIONS=true",
-        "SE_NODE_MAX_SESSIONS=15"
-      ],
-      "volumes": [
-        "/dev/shm:/dev/shm"
-      ],
-      "network_mode": "host"
-    },
-    "firefox": {
-      "image": "selenium/standalone-firefox",
-      "environment": [
-        "SE_NODE_OVERRIDE_MAX_SESSIONS=true",
-        "SE_NODE_MAX_SESSIONS=15"
-      ],
-      "volumes": [
-        "/dev/shm:/dev/shm"
-      ],
-      "ports": [
-        "4445:4444"
-      ]
-    }
-  }
-}

package/src/calculate-screenshot-regions.js

@@ -1,31 +0,0 @@
-const utils = require('@applitools/utils')
-
-async function calculateScreenshotRegions({context, screenshotRegion, regions}) {
-  const screenshotRegions = []
-  for (const region of regions) {
-    screenshotRegions.push(await transformRegion(region))
-  }
-
-  return screenshotRegions
-
-  async function transformRegion(region) {
-    if (utils.types.has(region, ['x', 'y', 'width', 'height'])) {
-      // if someday different coordinate systems will be supported (context or app based), the conversion will happen here
-      return [regions]
-    }
-    const elements = await context.elements(region)
-    return elements.reduce(async (regions, element) => {
-      regions = await regions
-      const region = await element.getRegion()
-      regions.push({
-        x: Math.max(0, region.x - screenshotRegion.x),
-        y: Math.max(0, region.y - screenshotRegion.y),
-        width: region.width,
-        height: region.height,
-      })
-      return regions
-    }, [])
-  }
-}
-
-module.exports = calculateScreenshotRegions

package/src/screenshoter.js

@@ -1,158 +0,0 @@
-const utils = require('@applitools/utils')
-const makeScroller = require('./scroller')
-const scrollIntoViewport = require('./scroll-into-viewport')
-const takeStitchedScreenshot = require('./take-stitched-screenshot')
-const takeViewportScreenshot = require('./take-viewport-screenshot')
-
-async function screenshoter({
-  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)
-
-  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()
-    }
-  }
-
-  // blur active element in target context
-  const activeElement = driver.isWeb && hideCaret ? await context.blurElement() : null
-
-  const target = await getTarget({window, context, region, fully, scrollingMode, logger})
-
-  if (driver.isWeb && hideScrollbars) await target.scroller.hideScrollbars()
-
-  try {
-    if (!window) await scrollIntoViewport({...target, logger})
-
-    const screenshot =
-      fully && target.scroller
-        ? await takeStitchedScreenshot({...target, withStatusBar, overlap, framed, wait, stabilization, debug, logger})
-        : await takeViewportScreenshot({...target, withStatusBar, wait, stabilization, debug, logger})
-
-    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 screenshot
-  } finally {
-    if (target.scroller) {
-      await target.scroller.restoreScrollbars()
-    }
-
-    // if there was active element and we have blurred it, then restore focus
-    if (activeElement) await context.focusElement(activeElement)
-
-    // 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()
-      }
-    }
-
-    // restore focus on original active context
-    await activeContext.focus()
-  }
-}
-
-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,
-      }
-    }
-  }
-}
-
-module.exports = screenshoter

package/test/util/spec-driver.js

@@ -1,288 +0,0 @@
-const webdriverio = require('webdriverio')
-const utils = require('@applitools/utils')
-
-// #region HELPERS
-
-const LEGACY_ELEMENT_ID = 'ELEMENT'
-const ELEMENT_ID = 'element-6066-11e4-a52e-4f735466cecf'
-
-function extractElementId(element) {
-  return element.elementId || element[ELEMENT_ID] || element[LEGACY_ELEMENT_ID]
-}
-
-// #endregion
-
-// #region UTILITY
-
-function isDriver(browser) {
-  if (!browser) return false
-  return browser.constructor.name === 'Browser'
-}
-function isElement(element) {
-  if (!element) return false
-  return Boolean(element.elementId || element[ELEMENT_ID] || element[LEGACY_ELEMENT_ID])
-}
-function isSelector(selector) {
-  return utils.types.isString(selector) || utils.types.isFunction(selector)
-}
-function transformElement(element) {
-  const elementId = extractElementId(element)
-  return {[ELEMENT_ID]: elementId, [LEGACY_ELEMENT_ID]: elementId}
-}
-function transformSelector(selector) {
-  if (utils.types.has(selector, 'selector')) {
-    if (!utils.types.has(selector, 'type')) return selector.selector
-    if (selector.type === 'css') return `css selector:${selector.selector}`
-    else return `${selector.type}:${selector.selector}`
-  }
-  return selector
-}
-function extractSelector(element) {
-  return element.selector
-}
-async function isEqualElements(browser, element1, element2) {
-  // NOTE: wdio wraps puppeteer and generate ids by itself just incrementing a counter
-  // NOTE: appium for ios could return different ids for same element
-  if (browser.isDevTools || browser.isIOS) {
-    return browser.execute((element1, element2) => element1 === element2, element1, element2).catch(() => false)
-  }
-  if (!element1 || !element2) return false
-  const elementId1 = extractElementId(element1)
-  const elementId2 = extractElementId(element2)
-  return elementId1 === elementId2
-}
-
-// #endregion
-
-// #region COMMANDS
-
-async function executeScript(browser, script, ...args) {
-  return browser.execute(script, ...args)
-}
-async function mainContext(browser) {
-  await browser.switchToFrame(null)
-  return browser
-}
-async function parentContext(browser) {
-  await browser.switchToParentFrame()
-  return browser
-}
-async function childContext(browser, element) {
-  await browser.switchToFrame(element)
-  return browser
-}
-async function findElement(browser, selector) {
-  const element = await browser.$(selector)
-  return !element.error ? element : null
-}
-async function findElements(browser, selector) {
-  const elements = await browser.$$(selector)
-  return Array.from(elements)
-}
-async function getElementRegion(browser, element) {
-  const extendedElement = await browser.$(element)
-  if (utils.types.isFunction(extendedElement, 'getRect')) {
-    return extendedElement.getRect()
-  } else {
-    const size = await extendedElement.getSize()
-    const location = utils.types.has(size, ['x', 'y']) ? size : await extendedElement.getLocation()
-    return {x: location.x, y: location.y, width: size.width, height: size.height}
-  }
-}
-async function getElementAttribute(browser, element, name) {
-  return browser.getElementAttribute(extractElementId(element), name)
-}
-async function getWindowSize(browser) {
-  if (utils.types.isFunction(browser.getWindowRect)) {
-    return browser.getWindowRect()
-  } else if (utils.types.isFunction(browser.getWindowSize)) {
-    return await browser.getWindowSize()
-  }
-}
-async function setWindowSize(browser, {width, height} = {}) {
-  if (utils.types.isFunction(browser.setWindowRect)) {
-    await browser.setWindowRect(0, 0, width, height)
-  } else {
-    await browser.setWindowPosition(0, 0)
-    await browser.setWindowSize(width, height)
-  }
-}
-async function getOrientation(browser) {
-  const orientation = await browser.getOrientation()
-  return orientation.toLowerCase()
-}
-async function getDriverInfo(browser) {
-  const driverInfo = {
-    sessionId: browser.sessionId,
-    isMobile: browser.isMobile,
-    isNative: browser.isMobile && !browser.capabilities.browserName,
-    deviceName: browser.capabilities.desired
-      ? browser.capabilities.desired.deviceName
-      : browser.capabilities.deviceName,
-    platformName: browser.capabilities.platformName || browser.capabilities.platform,
-    platformVersion: browser.capabilities.platformVersion,
-    browserName: browser.capabilities.browserName,
-    browserVersion: browser.capabilities.browserVersion,
-    pixelRatio: browser.capabilities.pixelRatio,
-  }
-
-  if (driverInfo.isNative) {
-    const capabilities = utils.types.has(browser.capabilities, ['pixelRatio', 'viewportRect', 'statBarHeight'])
-      ? browser.capabilities
-      : await browser.getSession()
-
-    driverInfo.pixelRatio = capabilities.pixelRatio
-
-    try {
-      const {statusBar, navigationBar} = await browser.getSystemBars()
-      driverInfo.statusBarHeight = statusBar.visible ? statusBar.height : 0
-      driverInfo.navigationBarHeight = navigationBar.visible ? navigationBar.height : 0
-    } catch (err) {
-      driverInfo.statusBarHeight = capabilities.statBarHeight || (capabilities.viewportRect || {}).top || 0
-      driverInfo.navigationBarHeight = 0
-    }
-  }
-
-  return driverInfo
-}
-async function takeScreenshot(driver) {
-  return driver.takeScreenshot()
-}
-async function visit(browser, url) {
-  return browser.url(url)
-}
-async function click(browser, element) {
-  if (isSelector(element)) element = await findElement(browser, element)
-  const extendedElement = await browser.$(element)
-  await extendedElement.click()
-}
-async function performAction(browser, actions) {
-  return browser.touchAction(actions)
-}
-async function getElementText(browser, element) {
-  return browser.getElementText(extractElementId(element))
-}
-
-// #endregion
-
-async function build({type = 'web'} = {}) {
-  const capabilities = {
-    web: {
-      protocol: 'http',
-      hostname: 'localhost',
-      path: '/wd/hub',
-      port: 4444,
-      logLevel: 'silent',
-      capabilities: {
-        browserName: 'chrome',
-      },
-    },
-    android: {
-      protocol: 'https',
-      hostname: 'ondemand.saucelabs.com',
-      path: '/wd/hub',
-      port: 443,
-      logLevel: 'silent',
-      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,
-      },
-    },
-    androidx: {
-      protocol: 'https',
-      hostname: 'ondemand.saucelabs.com',
-      path: '/wd/hub',
-      port: 443,
-      logLevel: 'silent',
-      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.2.0/app_androidx.apk',
-        username: process.env.SAUCE_USERNAME,
-        accessKey: process.env.SAUCE_ACCESS_KEY,
-      },
-    },
-    ios: {
-      protocol: 'https',
-      hostname: 'ondemand.saucelabs.com',
-      path: '/wd/hub',
-      port: 443,
-      logLevel: 'silent',
-      capabilities: {
-        name: 'iOS Screenshoter Test',
-        deviceName: 'iPhone 11 Pro Simulator',
-        platformName: 'iOS',
-        platformVersion: '13.4',
-        appiumVersion: '1.19.2',
-        automationName: 'XCUITest',
-        app: 'https://applitools.jfrog.io/artifactory/Examples/IOSTestApp/1.5/app/IOSTestApp-1.5.zip',
-        username: process.env.SAUCE_USERNAME,
-        accessKey: process.env.SAUCE_ACCESS_KEY,
-      },
-    },
-    'web-ios': {
-      protocol: 'https',
-      hostname: 'ondemand.saucelabs.com',
-      path: '/wd/hub',
-      port: 443,
-      logLevel: 'silent',
-      capabilities: {
-        name: 'iOS Web Screenshoter Test',
-        deviceName: 'iPhone 11 Pro Simulator',
-        browserName: 'safari',
-        platformName: 'iOS',
-        platformVersion: '14.5',
-        appiumVersion: '1.20.1',
-        automationName: 'XCUITest',
-        username: process.env.SAUCE_USERNAME,
-        accessKey: process.env.SAUCE_ACCESS_KEY,
-      },
-    },
-  }
-
-  const browser = await webdriverio.remote(capabilities[type])
-
-  return [browser, () => browser.deleteSession()]
-}
-
-module.exports = {
-  isDriver,
-  isElement,
-  isSelector,
-  transformElement,
-  transformSelector,
-  extractSelector,
-  isEqualElements,
-  executeScript,
-  mainContext,
-  parentContext,
-  childContext,
-  findElement,
-  findElements,
-  getElementRegion,
-  getElementAttribute,
-  getWindowSize,
-  setWindowSize,
-  getOrientation,
-  getDriverInfo,
-  takeScreenshot,
-  visit,
-  click,
-  performAction,
-  getElementText,
-
-  build,
-}