@applitools/screenshoter 3.2.9 → 3.3.3

package/test/e2e/ios.spec.js

@@ -1,9 +1,10 @@
 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')
-const screenshoter = require('../../index')
+const takeScreenshot = require('../../index')
 
 const env = {
   url: 'https://ondemand.saucelabs.com/wd/hub',
@@ -11,13 +12,22 @@ 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.5/app/IOSTestApp-1.5.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,
   },
+
+  // url: 'http://0.0.0.0:4723/wd/hub',
+  // capabilities: {
+  //   deviceName: 'iPhone 11 Pro',
+  //   platformName: 'iOS',
+  //   platformVersion: '14.5',
+  //   automationName: 'XCUITest',
+  //   app: 'https://applitools.jfrog.io/artifactory/Examples/IOSTestApp/1.9/app/IOSTestApp.zip',
+  // },
 }
 
 describe('screenshoter ios', () => {
@@ -77,6 +87,30 @@ describe('screenshoter ios', () => {
     return fullApp({type: 'collection'})
   })
 
+  it('take full app screenshot (table view with collapsing header)', () => {
+    return fullApp({type: 'collapsing'})
+  })
+
+  it('take full app screenshot (collection view with overlapped status bar)', () => {
+    return fullApp({type: 'overlapped'})
+  })
+
+  it('take full app screenshot with status bar (collection view with overlapped status bar)', () => {
+    return fullApp({type: 'overlapped', withStatusBar: true})
+  })
+
+  it('take full app screenshot (collection view with superview)', () => {
+    return fullApp({type: 'superview'})
+  })
+
+  it('take webview screenshot', () => {
+    return webview()
+  })
+
+  it('take full webview screenshot', () => {
+    return fullWebview()
+  })
+
   it('take region screenshot', () => {
     return region()
   })
@@ -95,8 +129,12 @@ 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 screenshot = await screenshoter({logger, driver, ...options})
+    const button = await driver.element(buttonSelector)
+    await button.click()
+
+    const screenshot = await takeScreenshot({logger, driver, ...options})
     try {
       if (options.withStatusBar) await sanitizeStatusBar(screenshot.image)
       const actual = await screenshot.image.toObject()
@@ -108,8 +146,19 @@ describe('screenshoter ios', () => {
     }
   }
   async function fullApp({type, ...options} = {}) {
-    let buttonSelector, expectedPath
-    if (type === 'collection') {
+    let buttonSelector, expectedPath, overlap
+    if (type === 'superview') {
+      overlap = {top: 200}
+      buttonSelector = {type: 'accessibility id', selector: 'Bottom to superview'}
+      expectedPath = `./test/fixtures/ios/app-fully-superview${options.withStatusBar ? '-statusbar' : ''}.png`
+    } else if (type === 'overlapped') {
+      overlap = {top: 200}
+      buttonSelector = {type: 'accessibility id', selector: 'Bottom to safe area'}
+      expectedPath = `./test/fixtures/ios/app-fully-overlapped${options.withStatusBar ? '-statusbar' : ''}.png`
+    } else if (type === 'collapsing') {
+      buttonSelector = {type: 'accessibility id', selector: 'Table view with stretchable header'}
+      expectedPath = `./test/fixtures/ios/app-fully-collapsing${options.withStatusBar ? '-statusbar' : ''}.png`
+    } else if (type === 'collection') {
       buttonSelector = {type: 'accessibility id', selector: 'Collection view'}
       expectedPath = `./test/fixtures/ios/app-fully-collection${options.withStatusBar ? '-statusbar' : ''}.png`
     } else if (type === 'table') {
@@ -123,13 +172,16 @@ describe('screenshoter ios', () => {
     const button = await driver.element(buttonSelector)
     await button.click()
 
-    const screenshot = await screenshoter({
+    await driver.init()
+
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       fully: true,
       framed: true,
       scrollingMode: 'scroll',
       wait: 1500,
+      overlap: {top: 10, bottom: 50, ...overlap},
       ...options,
     })
     try {
@@ -142,8 +194,72 @@ 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()
+    console.log(webview)
+    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 screenshot = await screenshoter({
+    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,
       region: {x: 30, y: 500, height: 100, width: 200},
@@ -153,7 +269,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'})
@@ -161,7 +277,7 @@ describe('screenshoter ios', () => {
     }
   }
   async function fullRegion(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       region: {x: 30, y: 10, height: 700, width: 200},
@@ -179,7 +295,7 @@ describe('screenshoter ios', () => {
     }
   }
   async function element(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       region: {type: 'accessibility id', selector: 'Table view'},
@@ -202,7 +318,7 @@ describe('screenshoter ios', () => {
     })
     await button.click()
 
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       region: {type: 'xpath', selector: '//XCUIElementTypeTable[1]'},

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

@@ -2,7 +2,7 @@ const assert = require('assert')
 const pixelmatch = require('pixelmatch')
 const {Driver} = require('@applitools/driver')
 const spec = require('@applitools/spec-driver-webdriverio')
-const screenshoter = require('../../index')
+const takeScreenshot = require('../../index')
 const makeImage = require('../../src/image')
 
 const env = {
@@ -18,9 +18,20 @@ const env = {
     username: process.env.SAUCE_USERNAME,
     accessKey: process.env.SAUCE_ACCESS_KEY,
   },
-}
 
-// TODO add tests for page without viewport meta tag
+  // url: 'http://0.0.0.0:4723/wd/hub',
+  // capabilities: {
+  //   name: 'iOS Web Screenshoter Test',
+  //   deviceName: 'iPhone 11 Pro',
+  //   browserName: 'safari',
+  //   platformName: 'iOS',
+  //   platformVersion: '14.5',
+  //   appiumVersion: '1.20.1',
+  //   automationName: 'XCUITest',
+  //   username: process.env.SAUCE_USERNAME,
+  //   accessKey: process.env.SAUCE_ACCESS_KEY,
+  // },
+}
 
 describe('screenshoter web ios', () => {
   const logger = {log: () => {}, warn: () => {}, error: () => {}, verbose: () => {}}
@@ -41,18 +52,33 @@ describe('screenshoter web ios', () => {
   })
 
   it('take viewport screenshot', () => {
-    return viewport()
+    return viewport({orientation: 'portrait'})
+  })
+
+  it('take viewport screenshot with landscape orientation', () => {
+    return viewport({orientation: 'landscape'})
   })
 
   it('take full page screenshot', () => {
-    return fullPage()
+    return fullPage({orientation: 'portrait'})
+  })
+
+  it('take full page screenshot with landscape orientation', () => {
+    return fullPage({orientation: 'landscape'})
   })
 
-  async function viewport(options) {
-    const screenshot = await screenshoter({logger, driver, ...options})
+  async function viewport({orientation = 'portrait', ...options} = {}) {
+    const expectedPath = `./test/fixtures/web-ios/page${orientation === 'landscape' ? '-landscape' : ''}.png`
+
+    await driver.target.setOrientation(orientation.toUpperCase())
+    await driver.visit(await driver.getUrl())
+
+    await driver.init()
+
+    const screenshot = await takeScreenshot({logger, driver, ...options})
     try {
       const actual = await screenshot.image.toObject()
-      const expected = await makeImage('./test/fixtures/web-ios/page.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: 'ios_viewport_failed'})
@@ -60,11 +86,18 @@ describe('screenshoter web ios', () => {
     }
   }
 
-  async function fullPage(options) {
-    const screenshot = await screenshoter({logger, driver, fully: true, ...options})
+  async function fullPage({orientation = 'portrait', ...options} = {}) {
+    const expectedPath = `./test/fixtures/web-ios/page-fully${orientation === 'landscape' ? '-landscape' : ''}.png`
+
+    await driver.target.setOrientation(orientation.toUpperCase())
+    await driver.visit(await driver.getUrl())
+
+    await driver.init()
+
+    const screenshot = await takeScreenshot({logger, driver, fully: true, ...options})
     try {
       const actual = await screenshot.image.toObject()
-      const expected = await makeImage('./test/fixtures/web-ios/page-fully.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: 'ios_full_page_failed'})

package/test/e2e/web.spec.js

@@ -2,7 +2,7 @@ const assert = require('assert')
 const pixelmatch = require('pixelmatch')
 const {Driver} = require('@applitools/driver')
 const spec = require('@applitools/spec-driver-webdriverio')
-const screenshoter = require('../../index')
+const takeScreenshot = require('../../index')
 const makeImage = require('../../src/image')
 
 const env = {
@@ -128,7 +128,7 @@ describe('screenshoter web', () => {
   })
 
   async function viewport(options) {
-    const screenshot = await screenshoter({logger, driver, ...options})
+    const screenshot = await takeScreenshot({logger, driver, ...options})
     try {
       const actual = await screenshot.image.toObject()
       const expected = await makeImage('./test/fixtures/web/page.png').toObject()
@@ -139,7 +139,7 @@ describe('screenshoter web', () => {
     }
   }
   async function fullPage(options) {
-    const screenshot = await screenshoter({logger, driver, fully: true, ...options})
+    const screenshot = await takeScreenshot({logger, driver, fully: true, ...options})
     try {
       const actual = await screenshot.image.toObject()
       const expected = await makeImage('./test/fixtures/web/page-fully.png').toObject()
@@ -150,7 +150,12 @@ describe('screenshoter web', () => {
     }
   }
   async function frame(options) {
-    const screenshot = await screenshoter({logger, driver, frames: [{reference: 'iframe[name="frame1"]'}], ...options})
+    const screenshot = await takeScreenshot({
+      logger,
+      driver,
+      frames: [{reference: 'iframe[name="frame1"]'}],
+      ...options,
+    })
     try {
       const actual = await screenshot.image.toObject()
       const expected = await makeImage('./test/fixtures/web/frame.png').toObject()
@@ -161,7 +166,7 @@ describe('screenshoter web', () => {
     }
   }
   async function fullFrame(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       frames: [{reference: 'iframe[name="frame1"]'}],
@@ -179,7 +184,7 @@ describe('screenshoter web', () => {
   }
   async function region(options) {
     const region = {x: 30, y: 500, height: 100, width: 200}
-    const screenshot = await screenshoter({logger, driver, region, ...options})
+    const screenshot = await takeScreenshot({logger, driver, region, ...options})
     try {
       const actual = await screenshot.image.toObject()
       const expected = await makeImage('./test/fixtures/web/region.png').toObject()
@@ -191,7 +196,7 @@ describe('screenshoter web', () => {
   }
   async function fullRegion(options) {
     const region = {x: 30, y: 500, height: 700, width: 200}
-    const screenshot = await screenshoter({logger, driver, region, fully: true, ...options})
+    const screenshot = await takeScreenshot({logger, driver, region, fully: true, ...options})
     try {
       const actual = await screenshot.image.toObject()
       const expected = await makeImage('./test/fixtures/web/region-fully.png').toObject()
@@ -202,7 +207,7 @@ describe('screenshoter web', () => {
     }
   }
   async function element(options) {
-    const screenshot = await screenshoter({logger, driver, region: '#overflowing-div-image', ...options})
+    const screenshot = await takeScreenshot({logger, driver, region: '#overflowing-div-image', ...options})
     try {
       const actual = await screenshot.image.toObject()
       const expected = await makeImage('./test/fixtures/web/element.png').toObject()
@@ -213,7 +218,7 @@ describe('screenshoter web', () => {
     }
   }
   async function fullElement(options) {
-    const screenshot = await screenshoter({logger, driver, region: '#overflowing-div-image', fully: true, ...options})
+    const screenshot = await takeScreenshot({logger, driver, region: '#overflowing-div-image', fully: true, ...options})
     try {
       const actual = await screenshot.image.toObject()
       const expected = await makeImage('./test/fixtures/web/element-fully.png').toObject()
@@ -224,7 +229,7 @@ describe('screenshoter web', () => {
     }
   }
   async function regionInFrame(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       frames: [{reference: 'iframe[name="frame1"]'}],
@@ -241,7 +246,7 @@ describe('screenshoter web', () => {
     }
   }
   async function fullRegionInFrame(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       frames: [{reference: 'iframe[name="frame1"]'}],
@@ -259,7 +264,7 @@ describe('screenshoter web', () => {
     }
   }
   async function elementInFrame(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       frames: [{reference: 'iframe[name="frame1"]'}],
@@ -276,7 +281,7 @@ describe('screenshoter web', () => {
     }
   }
   async function fullElementInFrame(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       frames: [{reference: 'iframe[name="frame1"]'}],
@@ -294,7 +299,7 @@ describe('screenshoter web', () => {
     }
   }
   async function frameInFrame(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       frames: [{reference: 'iframe[name="frame1"]'}, {reference: 'iframe[name="frame1-1"]'}],
@@ -310,7 +315,7 @@ describe('screenshoter web', () => {
     }
   }
   async function fullFrameInFrame(options) {
-    const screenshot = await screenshoter({
+    const screenshot = await takeScreenshot({
       logger,
       driver,
       frames: [{reference: 'iframe[name="frame1"]'}, {reference: 'iframe[name="frame1-1"]'}],

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

@@ -4,23 +4,28 @@ const findPattern = require('../../src/find-image-pattern')
 
 describe('pattern', () => {
   const fixtures = [
-    {name: 'iPhone_5S_landscape', position: {x: 0, y: 100}, pixelRatio: 2},
-    {name: 'iPhone_X_perfecto_portrait', position: {x: 0, y: 297}, pixelRatio: 3},
-    {name: 'iPhone_XR_perfecto_landscape', position: {x: 88, y: 100}, pixelRatio: 2},
-    {name: 'iPhone_XS_Max_perfecto_landscape', position: {x: 132, y: 150}, pixelRatio: 3},
-    {name: 'iPhone_XS_landscape', position: {x: 132, y: 150}, pixelRatio: 3},
-    {name: 'iPhone_XS_portrait', position: {x: 0, y: 282}, pixelRatio: 3},
-    {name: 'iPad_Air_portrait', position: {x: 0, y: 140}, pixelRatio: 2},
+    {name: 'iPhone_SE_portrait', position: {x: 0, y: 140}, offset: 0, pixelRatio: 2},
+    {name: 'iPhone_SE_landscape', position: {x: 0, y: 100}, offset: 0, pixelRatio: 2},
+    {name: 'iPhone_11_portrait', position: {x: 0, y: 282}, offset: 0, pixelRatio: 3},
+    {name: 'iPhone_11_landscape', position: {x: 132, y: 150}, offset: 0, pixelRatio: 3},
+    {name: 'iPhone_13_portrait', position: {x: 0, y: 141}, offset: 0, pixelRatio: 3},
+    {name: 'iPhone_13_landscape', position: {x: 141, y: 144}, offset: 0, pixelRatio: 3},
+    {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: 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},
   ]
 
-  fixtures.forEach(({name, position, pixelRatio}) => {
+  fixtures.forEach(({name, position, offset, pixelRatio}) => {
     it(name, async () => {
       const image = await makeImage(`./test/fixtures/pattern/${name}.png`)
       const result = findPattern(await image.toObject(), {
-        offset: 1 * pixelRatio,
-        size: 3 * pixelRatio,
-        mask: [0, 1, 0],
+        pixelRatio,
+        mask: [1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1],
+        offset,
+        size: 1,
       })
       assert.deepStrictEqual(result, position)
     })