@applitools/screenshoter 3.2.9 → 3.3.0

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: 641, y: 137}, 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)
     })

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/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,159 +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)
-  scrollingMode = driver.isNative ? 'scroll' : scrollingMode
-
-  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