@applitools/screenshoter 3.3.1 → 3.3.2

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

@@ -9,12 +9,12 @@
       }
     },
     "node_modules/@applitools/screenshoter": {
-      "version": "3.3.0",
+      "version": "3.3.1",
       "resolved": "file:../dry-run.tgz",
-      "integrity": "sha512-zYK7fJkhpV4xrOXwkOo/WAjdH8m9vLaWZVaGAGv9iFWdVp/WkdoFfEfU0uo4TAiJeodkq90QWB5krBljy+CBKA==",
+      "integrity": "sha512-Nn4m2tV2g1+ECbNzbJ4NJzvpx02lYAZ6MM4HXuT16ShCZPXi2fCuvnJEZX3D5j/EkZjEB6yFZWXrKT70m2Djew==",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
-        "@applitools/snippets": "2.1.8",
+        "@applitools/snippets": "2.1.10",
         "@applitools/utils": "1.2.4",
         "png-async": "0.9.4"
       },
@@ -23,9 +23,9 @@
       }
     },
     "node_modules/@applitools/snippets": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.8.tgz",
-      "integrity": "sha512-7CGFsbL9vAd6MBiGLVKHpKYywPXN499/fJMzEAVCLuGCY81CIc/PchqPFWrZZKZOY/IV21RJmE3MvqZAeXTIXA==",
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.10.tgz",
+      "integrity": "sha512-LGjtd8IZOwbhETqKRDX9CX85+BskkFUkuMuLvriSDEEQiSm0MpFbbcJVMjYaVL2qobaJbY+3WvK0g7+gkZuuqA==",
       "engines": {
         "node": ">=8.9.0"
       }
@@ -47,17 +47,17 @@
   "dependencies": {
     "@applitools/screenshoter": {
       "version": "file:../dry-run.tgz",
-      "integrity": "sha512-zYK7fJkhpV4xrOXwkOo/WAjdH8m9vLaWZVaGAGv9iFWdVp/WkdoFfEfU0uo4TAiJeodkq90QWB5krBljy+CBKA==",
+      "integrity": "sha512-Nn4m2tV2g1+ECbNzbJ4NJzvpx02lYAZ6MM4HXuT16ShCZPXi2fCuvnJEZX3D5j/EkZjEB6yFZWXrKT70m2Djew==",
       "requires": {
-        "@applitools/snippets": "2.1.8",
+        "@applitools/snippets": "2.1.10",
         "@applitools/utils": "1.2.4",
         "png-async": "0.9.4"
       }
     },
     "@applitools/snippets": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.8.tgz",
-      "integrity": "sha512-7CGFsbL9vAd6MBiGLVKHpKYywPXN499/fJMzEAVCLuGCY81CIc/PchqPFWrZZKZOY/IV21RJmE3MvqZAeXTIXA=="
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@applitools/snippets/-/snippets-2.1.10.tgz",
+      "integrity": "sha512-LGjtd8IZOwbhETqKRDX9CX85+BskkFUkuMuLvriSDEEQiSm0MpFbbcJVMjYaVL2qobaJbY+3WvK0g7+gkZuuqA=="
     },
     "@applitools/utils": {
       "version": "1.2.4",

package/CHANGELOG.md

@@ -4,6 +4,11 @@
 ## Unreleased
 
 
+## 3.3.2 - 2021/12/20
+
+- add basic support of webview screenshots on ios
+- updated to @applitools/snippets@2.1.10 (from 2.1.8)
+
 ## 3.3.1 - 2021/12/17
 
 - no changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/screenshoter",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "Applitools universal screenshoter for web and native applications",
   "keywords": [
     "applitools",
@@ -49,12 +49,12 @@
     }
   },
   "dependencies": {
-    "@applitools/snippets": "2.1.8",
+    "@applitools/snippets": "2.1.10",
     "@applitools/utils": "1.2.4",
     "png-async": "0.9.4"
   },
   "devDependencies": {
-    "@applitools/driver": "1.4.2",
+    "@applitools/driver": "1.4.5",
     "@applitools/sdk-release-kit": "0.13.4",
     "@applitools/spec-driver-webdriverio": "1.2.2",
     "@applitools/test-utils": "1.0.10",

package/src/find-image-pattern.js

@@ -1,7 +1,8 @@
 function findImagePattern(image, pattern) {
   for (let pixel = 0; pixel < image.width * image.height; ++pixel) {
     if (isPattern(image, pixel, pattern)) {
-      return {x: (pixel % image.width) - pattern.offset, y: Math.floor(pixel / image.width) - pattern.offset}
+      const patterOffset = pattern.offset * pattern.pixelRatio
+      return {x: (pixel % image.width) - patterOffset, y: Math.floor(pixel / image.width) - patterOffset}
     }
   }
   return null

package/src/take-viewport-screenshot.js

@@ -7,6 +7,9 @@ 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)
@@ -15,14 +18,9 @@ function makeTakeViewportScreenshot(options) {
         return makeTakeMainContextScreenshot(options)
       }
     } catch (ignored) {}
-  } else if (driver.browserName === 'Safari') {
-    if (driver.isIOS) {
-      // safari on ios takes screenshot with browser and os interfaces
-      return makeTakeMarkedScreenshot(options)
-    } else if (driver.browserVersion === '11') {
-      // safari 11 on macs takes full page screenshot
-      return makeTakeSafari11Screenshot(options)
-    }
+  } else if (driver.browserName === 'Safari' && driver.browserVersion === '11') {
+    // safari 11 on macs takes full page screenshot
+    return makeTakeSafari11Screenshot(options)
   }
 
   return makeTakeDefaultScreenshot(options)
@@ -119,6 +117,8 @@ function makeTakeMarkedScreenshot({driver, stabilization = {}, debug, logger}) {
 
   async function getViewportRegion() {
     const marker = await driver.mainContext.execute(snippets.addPageMarker)
+    await utils.general.sleep(100)
+
     try {
       const image = makeImage(await driver.takeScreenshot())
 

package/test/e2e/android.spec.js

@@ -20,6 +20,17 @@ const env = {
       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',
@@ -100,6 +111,10 @@ describe('screenshoter', () => {
       return fullApp({type: 'non-scrollable'})
     })
 
+    it.skip('take webview screenshot', () => {
+      return webview()
+    })
+
     it('take region screenshot', () => {
       return region()
     })
@@ -136,6 +151,10 @@ describe('screenshoter', () => {
       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})
     })
@@ -161,7 +180,10 @@ describe('screenshoter', () => {
   }
   async function fullApp({type, x, ...options} = {}) {
     let buttonSelector, expectedPath, scrollingElementSelector
-    if (type === 'overlapped') {
+    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') {
@@ -212,6 +234,27 @@ 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 takeScreenshot({
       logger,

package/test/e2e/ios.spec.js

@@ -1,5 +1,6 @@
 const assert = require('assert')
 const pixelmatch = require('pixelmatch')
+const utils = require('@applitools/utils')
 const {Driver} = require('@applitools/driver')
 const spec = require('@applitools/spec-driver-webdriverio')
 const makeImage = require('../../src/image')
@@ -11,10 +12,10 @@ const env = {
     name: 'iOS Screenshoter Test',
     deviceName: 'iPhone 11 Pro Simulator',
     platformName: 'iOS',
-    platformVersion: '13.4',
-    appiumVersion: '1.19.2',
+    platformVersion: '14.5',
+    appiumVersion: '1.21.0',
     automationName: 'XCUITest',
-    app: 'https://applitools.jfrog.io/artifactory/Examples/IOSTestApp/1.8/app/IOSTestApp.zip',
+    app: 'https://applitools.jfrog.io/artifactory/Examples/IOSTestApp/1.9/app/IOSTestApp.zip',
     username: process.env.SAUCE_USERNAME,
     accessKey: process.env.SAUCE_ACCESS_KEY,
   },
@@ -24,7 +25,8 @@ const env = {
   //   deviceName: 'iPhone 11 Pro',
   //   platformName: 'iOS',
   //   platformVersion: '14.5',
-  //   app: '/Users/kyrylo/Downloads/IOSTestApp.zip',
+  //   automationName: 'XCUITest',
+  //   app: 'https://applitools.jfrog.io/artifactory/Examples/IOSTestApp/1.9/app/IOSTestApp.zip',
   // },
 }
 
@@ -101,6 +103,14 @@ describe('screenshoter ios', () => {
     return fullApp({type: 'superview'})
   })
 
+  it('take webview screenshot', () => {
+    return webview()
+  })
+
+  it('take full webview screenshot', () => {
+    return fullWebview()
+  })
+
   it('take region screenshot', () => {
     return region()
   })
@@ -119,6 +129,10 @@ describe('screenshoter ios', () => {
 
   async function app(options = {}) {
     const expectedPath = `./test/fixtures/ios/app${options.withStatusBar ? '-statusbar' : ''}.png`
+    const buttonSelector = {type: 'accessibility id', selector: 'Empty table view'}
+
+    const button = await driver.element(buttonSelector)
+    await button.click()
 
     const screenshot = await takeScreenshot({logger, driver, ...options})
     try {
@@ -180,7 +194,70 @@ describe('screenshoter ios', () => {
       throw err
     }
   }
+  async function webview(options) {
+    const expectedPath = `./test/fixtures/ios/webview.png`
+    const buttonSelector = {type: 'accessibility id', selector: 'Web view'}
+
+    const button = await driver.element(buttonSelector)
+    await button.click()
+    await driver.target.getContexts()
+    await utils.general.sleep(500)
+    const [, webview] = 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
+    } finally {
+      await driver.target.switchContext('NATIVE_APP')
+    }
+  }
+  async function fullWebview(options) {
+    const expectedPath = `./test/fixtures/ios/webview-fully.png`
+    const buttonSelector = {type: 'accessibility id', selector: 'Web view'}
+
+    const button = await driver.element(buttonSelector)
+    await button.click()
+    await driver.target.getContexts()
+    await utils.general.sleep(500)
+    const [, webview] = await driver.target.getContexts()
+    await driver.target.switchContext(webview)
+
+    await driver.init()
+    const screenshot = await takeScreenshot({
+      logger,
+      driver,
+      wait: 1500,
+      fully: true,
+      scrollingMode: 'scroll',
+      ...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: 'full_webview_failed', suffix: Date.now()})
+      throw err
+    } finally {
+      await driver.target.switchContext('NATIVE_APP')
+    }
+  }
   async function region(options) {
+    const expectedPath = `./test/fixtures/ios/region.png`
+    const buttonSelector = {type: 'accessibility id', selector: 'Empty table view'}
+
+    const button = await driver.element(buttonSelector)
+    await button.click()
+
+    await driver.init()
     const screenshot = await takeScreenshot({
       logger,
       driver,
@@ -191,7 +268,7 @@ describe('screenshoter ios', () => {
     })
     try {
       const actual = await screenshot.image.toObject()
-      const expected = await makeImage('./test/fixtures/ios/region.png').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: 'region_failed'})

package/test/it/find-pattern.spec.js

@@ -13,7 +13,7 @@ describe('pattern', () => {
     {name: 'iPad_5th_portrait', position: {x: 0, y: 140}, offset: 0, pixelRatio: 2},
     {name: 'iPad_5th_landscape', position: {x: 0, y: 140}, offset: 0, pixelRatio: 2},
     {name: 'iPad_9th_portrait', position: {x: 0, y: 136}, offset: 0, pixelRatio: 2},
-    {name: 'iPad_9th_landscape', position: {x: 641, y: 137}, offset: 1, pixelRatio: 2},
+    {name: 'iPad_9th_landscape', position: {x: 640, y: 136}, offset: 1, pixelRatio: 2},
     {name: 'iPhone_XS_portrait_noviewport', position: {x: 0, y: 282}, offset: 0, pixelRatio: 3},
     {name: 'iPhone_XS_portrait_nomarker', position: null, pixelRatio: 3},
   ]