@applitools/screenshoter 3.2.5 → 3.2.9

package/.bongo/dry-run/package-lock.json

@@ -1,13 +1,56 @@
 {
+  "name": "dry-run",
+  "lockfileVersion": 2,
   "requires": true,
-  "lockfileVersion": 1,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@applitools/screenshoter": "file:../dry-run.tgz"
+      }
+    },
+    "node_modules/@applitools/screenshoter": {
+      "version": "3.2.8",
+      "resolved": "file:../dry-run.tgz",
+      "integrity": "sha512-GjN+h/vj5/lKFjJPm302jD0xSFIOoSG7gPU/ogEUcCS9l5FDcMW27PRMA/xGlolKrabmCgDHJqVbAXE1WCgjyQ==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@applitools/snippets": "2.1.7",
+        "@applitools/utils": "1.2.4",
+        "png-async": "0.9.4"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      }
+    },
+    "node_modules/@applitools/snippets": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.7.tgz",
+      "integrity": "sha512-Tr4Gj7Qov/oPy+8WI4oVmmubxqpOzr8P3Wjzpl6rA57xKLg6/TiIg5oZNb4+jEmO2ShjNYLaEwRWHl7kPgb4fw==",
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/@applitools/utils": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.4.tgz",
+      "integrity": "sha512-w7ma6FFGyqhdP6LEcuHFWOcH7EzBjnoAX3UfbFWcTHA3QXnXPX37Y2ENYRodfwkorP1cUKyUHwNXJB/BMIj/hg==",
+      "engines": {
+        "node": ">= 8.9.0"
+      }
+    },
+    "node_modules/png-async": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/png-async/-/png-async-0.9.4.tgz",
+      "integrity": "sha512-B//AXX9TkneKfgtOpT1mdUnnhk2BImGD+a98vImsMU8uo1dBeHyW/kM2erWZ/CsYteTPU/xKG+t6T62heHkC3A=="
+    }
+  },
   "dependencies": {
     "@applitools/screenshoter": {
       "version": "file:../dry-run.tgz",
-      "integrity": "sha512-4dg3I0S18BIPhwzVzASacB3gOR5nKVzybivZJRsyJ2l/BQVY2g3FtV4oZp1RjkCty/FIQpv9E/BPrF/yE7Dylg==",
+      "integrity": "sha512-GjN+h/vj5/lKFjJPm302jD0xSFIOoSG7gPU/ogEUcCS9l5FDcMW27PRMA/xGlolKrabmCgDHJqVbAXE1WCgjyQ==",
       "requires": {
         "@applitools/snippets": "2.1.7",
-        "@applitools/utils": "1.2.3",
+        "@applitools/utils": "1.2.4",
         "png-async": "0.9.4"
       }
     },
@@ -17,9 +60,9 @@
       "integrity": "sha512-Tr4Gj7Qov/oPy+8WI4oVmmubxqpOzr8P3Wjzpl6rA57xKLg6/TiIg5oZNb4+jEmO2ShjNYLaEwRWHl7kPgb4fw=="
     },
     "@applitools/utils": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.3.tgz",
-      "integrity": "sha512-MZXsrzeHTvjFLzpfyKRDUmZWzNxH3gWd3reqYf+1kYimALKB3CO82VDNmkaGJykrRbxEP03Yqha7fHJj9eKslQ=="
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@applitools/utils/-/utils-1.2.4.tgz",
+      "integrity": "sha512-w7ma6FFGyqhdP6LEcuHFWOcH7EzBjnoAX3UfbFWcTHA3QXnXPX37Y2ENYRodfwkorP1cUKyUHwNXJB/BMIj/hg=="
     },
     "png-async": {
       "version": "0.9.4",

package/.bongo/dry-run/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@applitools/screenshoter": "file:../dry-run.tgz"
+  }
+}

package/CHANGELOG.md

@@ -4,6 +4,22 @@
 ## Unreleased
 
 
+## 3.2.9 - 2021/11/14
+
+- add support of scrollable elements that change its size during scrolling
+
+## 3.2.8 - 2021/10/30
+
+- updated to @applitools/utils@1.2.4 (from 1.2.3)
+
+## 3.2.7 - 2021/10/13
+
+- handle a case when scrolling element does not exist
+
+## 3.2.6 - 2021/10/12
+
+- handle a case when scrolling element does not exist
+
 ## 3.2.5 - 2021/10/5
 
 - fix issue with fractional image size after scaling

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/screenshoter",
-  "version": "3.2.5",
+  "version": "3.2.9",
   "description": "Applitools universal screenshoter for web and native applications",
   "keywords": [
     "applitools",
@@ -17,7 +17,8 @@
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/applitools/eyes.sdk.javascript1.git"
+    "url": "git://github.com/applitools/eyes.sdk.javascript1.git",
+    "directory": "packages/screenshoter"
   },
   "license": "SEE LICENSE IN LICENSE",
   "author": {
@@ -49,12 +50,15 @@
   },
   "dependencies": {
     "@applitools/snippets": "2.1.7",
-    "@applitools/utils": "1.2.3",
+    "@applitools/utils": "1.2.4",
     "png-async": "0.9.4"
   },
   "devDependencies": {
-    "@applitools/driver": "1.2.5",
-    "@applitools/sdk-release-kit": "0.13.3",
+    "@applitools/driver": "1.3.2",
+    "@applitools/sdk-release-kit": "0.13.4",
+    "@applitools/spec-driver-webdriverio": "1.2.0",
+    "@applitools/test-utils": "1.0.9",
+    "chromedriver": "^95.0.0",
     "eslint": "^7.9.0",
     "eslint-plugin-mocha-no-only": "^1.1.1",
     "eslint-plugin-node": "^11.1.0",
@@ -63,7 +67,7 @@
     "mocha": "^8.2.1",
     "pixelmatch": "^5.2.1",
     "prettier": "1.19.0",
-    "webdriverio": "^6.10.5"
+    "webdriverio": "^7.16.7"
   },
   "engines": {
     "node": ">= 8.9.0"

package/src/image.js

@@ -289,7 +289,10 @@ async function copy(dstImage, srcImage, offset) {
 }
 
 async function combine(firstImage, lastImage, srcImage, region) {
-  region = utils.geometry.intersect({x: 0, y: 0, width: firstImage.width, height: firstImage.height}, region)
+  region = utils.geometry.intersect(
+    {x: 0, y: 0, width: firstImage.width, height: firstImage.height},
+    utils.geometry.round(region),
+  )
 
   if (region.x === 0 && region.y === 0 && region.width >= firstImage.width && region.height >= firstImage.height) {
     return srcImage

package/src/screenshoter.js

@@ -27,6 +27,7 @@ async function screenshoter({
   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 =
@@ -54,13 +55,14 @@ async function screenshoter({
   try {
     if (!window) await scrollIntoViewport({...target, logger})
 
-    const screenshot = fully
-      ? await takeStitchedScreenshot({...target, withStatusBar, overlap, framed, wait, stabilization, debug, logger})
-      : await takeViewportScreenshot({...target, withStatusBar, wait, stabilization, debug, 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) {
+      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})
@@ -68,7 +70,9 @@ async function screenshoter({
 
     return screenshot
   } finally {
-    await target.scroller.restoreScrollbars()
+    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)
@@ -93,7 +97,7 @@ async function getTarget({window, context, region, fully, scrollingMode, logger}
     const scrollingElement = await context.main.getScrollingElement()
     return {
       context: context.main,
-      scroller: makeScroller({element: scrollingElement, scrollingMode, logger}),
+      scroller: scrollingElement ? makeScroller({element: scrollingElement, scrollingMode, logger}) : null,
     }
   } else if (region) {
     if (utils.types.has(region, ['x', 'y', 'width', 'height'])) {
@@ -102,7 +106,7 @@ async function getTarget({window, context, region, fully, scrollingMode, logger}
       return {
         context,
         region,
-        scroller: makeScroller({element: scrollingElement, scrollingMode, logger}),
+        scroller: scrollingElement ? makeScroller({element: scrollingElement, scrollingMode, logger}) : null,
       }
     } else {
       // region by element or selector
@@ -121,14 +125,14 @@ async function getTarget({window, context, region, fully, scrollingMode, logger}
         return {
           context: elementContext,
           region,
-          scroller: makeScroller({element: scrollingElement, scrollingMode, logger}),
+          scroller: scrollingElement ? makeScroller({element: scrollingElement, scrollingMode, logger}) : null,
         }
       } else {
         const scrollingElement = await context.getScrollingElement()
         return {
           context: elementContext,
           region: await element.getRegion(),
-          scroller: makeScroller({element: scrollingElement, scrollingMode, logger}),
+          scroller: scrollingElement ? makeScroller({element: scrollingElement, scrollingMode, logger}) : null,
         }
       }
     }
@@ -138,7 +142,7 @@ async function getTarget({window, context, region, fully, scrollingMode, logger}
       const scrollingElement = await context.getScrollingElement()
       return {
         context,
-        scroller: makeScroller({logger, element: scrollingElement, scrollingMode}),
+        scroller: scrollingElement ? makeScroller({logger, element: scrollingElement, scrollingMode}) : null,
       }
     } else {
       const scrollingElement = await context.parent.getScrollingElement()
@@ -146,7 +150,7 @@ async function getTarget({window, context, region, fully, scrollingMode, logger}
       return {
         context: context.parent,
         region: await element.getRegion(), // IMHO we should use CLIENT (without borders) region here
-        scroller: makeScroller({logger, element: scrollingElement, scrollingMode}),
+        scroller: scrollingElement ? makeScroller({logger, element: scrollingElement, scrollingMode}) : null,
       }
     }
   }

package/src/take-screenshot.js

@@ -150,7 +150,7 @@ function makeTakeNativeScreenshot({driver, stabilization = {}, debug, logger}) {
       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}
+        : {top: driver.statusBarHeight, bottom: driver.navigationBarHeight, left: 0, right: 0}
       image.crop(cropRegion)
       await image.debug({...debug, name, suffix: `viewport${withStatusBar ? '-with-statusbar' : ''}`})
     }

package/src/take-stitched-screenshot.js

@@ -26,6 +26,8 @@ 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})
   const firstImage = framed ? makeImage(image) : null
@@ -39,13 +41,13 @@ async function takeStitchedScreenshot({
 
   // 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)
@@ -84,11 +86,21 @@ async function takeStitchedScreenshot({
       ),
       compensateOffset,
     )
+
+    // TODO come up with generic solution
+    // The problem is that web default scrolling element treated differently than normal scrollable elements on the web and native
+    const cropRegionOffset = driver.isNative
+      ? utils.geometry.offsetNegative(
+          utils.geometry.location(await scroller.getClientRegion()),
+          utils.geometry.location(cropRegion),
+        )
+      : {x: 0, y: 0}
+
     const cropPartRegion = {
-      x: cropRegion.x + remainingOffset.x,
-      y: cropRegion.y + remainingOffset.y,
-      width: partRegion.width,
-      height: partRegion.height,
+      x: cropRegion.x + remainingOffset.x + cropRegionOffset.x,
+      y: cropRegion.y + remainingOffset.y + cropRegionOffset.y,
+      width: partRegion.width - cropRegionOffset.x,
+      height: partRegion.height - cropRegionOffset.y,
     }
     logger.verbose(`Actual offset is ${actualOffset}, remaining offset is ${remainingOffset}`)
 
@@ -105,6 +117,8 @@ async function takeStitchedScreenshot({
     await image.debug({...debug, name: partName, suffix: 'region'})
 
     const pasteOffset = utils.geometry.offsetNegative(utils.geometry.location(partRegion), initialOffset)
+    pasteOffset.y += cropRegionOffset.y
+    pasteOffset.x += cropRegionOffset.x
     await stitchedImage.copy(image, pasteOffset)
 
     stitchedSize = {width: pasteOffset.x + image.width, height: pasteOffset.y + image.height}

package/test/e2e/android.spec.js

@@ -1,10 +1,43 @@
 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 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,
+    },
+  },
+  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.2.0/app_androidx.apk',
+      username: process.env.SAUCE_USERNAME,
+      accessKey: process.env.SAUCE_ACCESS_KEY,
+    },
+  },
+}
+
 describe('screenshoter', () => {
   const logger = {log: () => {}, warn: () => {}, error: () => {}, verbose: () => {}}
   let driver, browser, destroyBrowser
@@ -20,7 +53,7 @@ describe('screenshoter', () => {
 
   describe('android app', () => {
     before(async () => {
-      ;[browser, destroyBrowser] = await spec.build({type: 'android'})
+      ;[browser, destroyBrowser] = await spec.build(env.android)
     })
 
     after(async () => {
@@ -53,8 +86,12 @@ describe('screenshoter', () => {
       return fullApp({type: 'recycler'})
     })
 
+    it('take full app screenshot (non-scrollable)', () => {
+      return fullApp({type: 'non-scrollable'})
+    })
+
     it('take region screenshot', () => {
-      region()
+      return region()
     })
 
     it.skip('take full region screenshot', () => {
@@ -68,7 +105,7 @@ describe('screenshoter', () => {
 
   describe('androidx app', () => {
     before(async () => {
-      ;[browser, destroyBrowser] = await spec.build({type: 'androidx'})
+      ;[browser, destroyBrowser] = await spec.build(env.androidx)
     })
 
     after(async () => {
@@ -114,6 +151,9 @@ describe('screenshoter', () => {
         buttonSelector = {type: 'id', selector: 'btn_recycler_view'}
         expectedPath = `./test/fixtures/android/app-fully-recycler${options.withStatusBar ? '-statusbar' : ''}.png`
       }
+    } else if (type === 'non-scrollable') {
+      buttonSelector = {type: 'id', selector: 'btn_edit_text'}
+      expectedPath = `./test/fixtures/android/app-fully-non-scrollable${options.withStatusBar ? '-statusbar' : ''}.png`
     } else {
       buttonSelector = {type: 'id', selector: 'btn_scroll_view_footer_header'}
       expectedPath = `./test/fixtures/android/app-fully-scroll${options.withStatusBar ? '-statusbar' : ''}.png`

package/test/e2e/external.spec.js

@@ -0,0 +1,84 @@
+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 screenshoter = require('../../index')
+
+describe.skip('external tests', () => {
+  const logger = {log: () => {}, warn: () => {}, error: () => {}, verbose: () => {}}
+  let browser, destroyBrowser
+
+  afterEach(async () => {
+    await destroyBrowser()
+  })
+
+  it('AGL - 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': 'android_agl_app',
+        '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(8000)
+    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(8000)
+    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)
+
+    // const billingBtn = await browser.$('//android.widget.FrameLayout[@content-desc="Billing"]')
+    // await billingBtn.click()
+    // await utils.general.sleep(25000)
+
+    const screenshot = await screenshoter({
+      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
+    }
+  })
+})

package/test/e2e/ios.spec.js

@@ -1,10 +1,25 @@
 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 env = {
+  url: 'https://ondemand.saucelabs.com/wd/hub',
+  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,
+  },
+}
+
 describe('screenshoter ios', () => {
   const logger = {log: () => {}, warn: () => {}, error: () => {}, verbose: () => {}}
   let driver, browser, destroyBrowser
@@ -25,7 +40,7 @@ describe('screenshoter ios', () => {
   }
 
   before(async () => {
-    ;[browser, destroyBrowser] = await spec.build({type: 'ios'})
+    ;[browser, destroyBrowser] = await spec.build(env)
   })
 
   after(async () => {

package/test/e2e/web-ios.spec.js

@@ -1,10 +1,25 @@
 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 screenshoter = require('../../index')
 const makeImage = require('../../src/image')
 
+const env = {
+  url: 'https://ondemand.saucelabs.com/wd/hub',
+  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,
+  },
+}
+
 // TODO add tests for page without viewport meta tag
 
 describe('screenshoter web ios', () => {
@@ -12,7 +27,7 @@ describe('screenshoter web ios', () => {
   let driver, browser, destroyBrowser
 
   before(async () => {
-    ;[browser, destroyBrowser] = await spec.build({type: 'web-ios'})
+    ;[browser, destroyBrowser] = await spec.build(env)
   })
 
   after(async () => {

package/test/e2e/web.spec.js

@@ -1,10 +1,17 @@
 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 screenshoter = require('../../index')
 const makeImage = require('../../src/image')
 
+const env = {
+  url: 'http://localhost:4444/wd/hub',
+  capabilities: {
+    browserName: 'chrome',
+  },
+}
+
 // TODO add overflowed regions tests
 
 describe('screenshoter web', () => {
@@ -12,7 +19,7 @@ describe('screenshoter web', () => {
   let driver, browser, destroyBrowser
 
   before(async () => {
-    ;[browser, destroyBrowser] = await spec.build({type: 'web'})
+    ;[browser, destroyBrowser] = await spec.build(env)
   })
 
   after(async () => {
@@ -37,10 +44,10 @@ describe('screenshoter web', () => {
   })
 
   it('take frame screenshot with "scroll" scrolling', () => {
-    frame({scrollingMode: 'scroll'})
+    return frame({scrollingMode: 'scroll'})
   })
   it('take frame screenshot with "css" scrolling', () => {
-    frame({scrollingMode: 'css'})
+    return frame({scrollingMode: 'css'})
   })
 
   it('take full frame screenshot with "scroll" scrolling', () => {
@@ -51,10 +58,10 @@ describe('screenshoter web', () => {
   })
 
   it('take region screenshot with "scroll" scrolling', () => {
-    region({scrollingMode: 'scroll'})
+    return region({scrollingMode: 'scroll'})
   })
   it('take region screenshot with "css" scrolling', () => {
-    region({scrollingMode: 'css'})
+    return region({scrollingMode: 'css'})
   })
 
   it('take full region screenshot with "scroll" scrolling', () => {

package/docker-compose.yaml

@@ -1,21 +0,0 @@
-{
-  "version": "3.4",
-  "services": {
-    "chrome": {
-      "image": "selenium/standalone-chrome",
-      "volumes": [
-        "/dev/shm:/dev/shm"
-      ],
-      "network_mode": "host"
-    },
-    "firefox": {
-      "image": "selenium/standalone-firefox",
-      "volumes": [
-        "/dev/shm:/dev/shm"
-      ],
-      "ports": [
-        "4445:4444"
-      ]
-    }
-  }
-}

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,
-}