@percy/selenium-webdriver - npm Package Compare versions

Comparing version 2.0.5 to 2.1.0-beta.0

index.js

@@ -14,11 +14,127 @@ // Collect client and environment information
 const { DriverMetadata } = require('./driverMetadata');
+const log = utils.logger('selenium-webdriver');
 
+const getWidthsForMultiDOM = (userPassedWidths, eligibleWidths) => {
+  // Deep copy of eligible mobile widths
+  let allWidths = [];
+  if (eligibleWidths?.mobile?.length !== 0) {
+    allWidths = allWidths.concat(eligibleWidths?.mobile);
+  }
+  if (userPassedWidths.length !== 0) {
+    allWidths = allWidths.concat(userPassedWidths);
+  } else {
+    allWidths = allWidths.concat(eligibleWidths.config);
+  }
+
+  return [...new Set(allWidths)].filter(e => e); // Removing duplicates
+};
+
+async function changeWindowDimensionAndWait(driver, width, height, resizeCount) {
+  try {
+    const caps = await driver.getCapabilities();
+    if (typeof driver?.sendDevToolsCommand === 'function' && caps.getBrowserName() === 'chrome') {
+      await driver?.sendDevToolsCommand('Emulation.setDeviceMetricsOverride', {
+        height,
+        width,
+        deviceScaleFactor: 1,
+        mobile: false
+      });
+    } else {
+      await driver.manage().window().setRect({ width, height });
+    }
+  } catch (e) {
+    log.debug(`Resizing using CDP failed, falling back to driver resize for width ${width}`, e);
+    await driver.manage().window().setRect({ width, height });
+  }
+
+  try {
+    await driver.wait(async () => {
+      /* istanbul ignore next: no instrumenting injected code */
+      await driver.executeScript('return window.resizeCount') === resizeCount;
+    }, 1000);
+  } catch (e) {
+    log.debug(`Timed out waiting for window resize event for width ${width}`, e);
+  }
+}
+
+// Captures responsive DOM snapshots across different widths
+async function captureResponsiveDOM(driver, options) {
+  const widths = getWidthsForMultiDOM(options.widths || [], utils.percy?.widths);
+  const domSnapshots = [];
+  const windowSize = await driver.manage().window().getRect();
+  let currentWidth = windowSize.width; let currentHeight = windowSize.height;
+  let lastWindowWidth = currentWidth;
+  let resizeCount = 0;
+  // Setup the resizeCount listener if not present
+  /* istanbul ignore next: no instrumenting injected code */
+  await driver.executeScript('PercyDOM.waitForResize()');
+  for (let width of widths) {
+    if (lastWindowWidth !== width) {
+      resizeCount++;
+      await changeWindowDimensionAndWait(driver, width, currentHeight, resizeCount);
+      lastWindowWidth = width;
+    }
+
+    if (process.env.RESPONSIVE_CAPTURE_SLEEP_TIME) {
+      await new Promise(resolve => setTimeout(resolve, parseInt(process.env.RESPONSIVE_CAPTURE_SLEEP_TIME) * 1000));
+    }
+
+    let domSnapshot = await captureSerializedDOM(driver, options);
+    domSnapshot.width = width;
+    domSnapshots.push(domSnapshot);
+  }
+
+  // Reset window size back to original dimensions
+  await changeWindowDimensionAndWait(driver, currentWidth, currentHeight, resizeCount + 1);
+  return domSnapshots;
+}
+
+async function captureSerializedDOM(driver, options) {
+  /* istanbul ignore next: no instrumenting injected code */
+  let { domSnapshot } = await driver.executeScript(options => ({
+    /* eslint-disable-next-line no-undef */
+    domSnapshot: PercyDOM.serialize(options)
+  }), options);
+  /* istanbul ignore next: no instrumenting injected code */
+  domSnapshot.cookies = await driver.manage().getCookies() || [];
+  return domSnapshot;
+}
+
+function isResponsiveDOMCaptureValid(options) {
+  if (utils.percy?.config?.percy?.deferUploads) {
+    return false;
+  }
+  return (
+    options?.responsive_snapshot_capture ||
+    options?.responsiveSnapshotCapture ||
+    utils.percy?.config?.snapshot?.responsiveSnapshotCapture ||
+    false
+  );
+}
+
+async function captureDOM(driver, options = {}) {
+  const responsiveSnapshotCapture = isResponsiveDOMCaptureValid(options);
+  if (responsiveSnapshotCapture) {
+    return await captureResponsiveDOM(driver, options);
+  } else {
+    return await captureSerializedDOM(driver, options);
+  }
+}
+
+async function currentURL(driver, options) {
+  /* istanbul ignore next: no instrumenting injected code */
+  let { url } = await driver.executeScript(options => ({
+    /* eslint-disable-next-line no-undef */
+    url: document.URL
+  }), options);
+  return url;
+}
+
 // Take a DOM snapshot and post it to the snapshot endpoint
-module.exports = async function percySnapshot(driver, name, options) {
+const percySnapshot = async function percySnapshot(driver, name, options) {
   if (!driver) throw new Error('An instance of the selenium driver object is required.');
   if (!name) throw new Error('The `name` argument is required.');
   if (!(await module.exports.isPercyEnabled())) return;
-  let log = utils.logger('selenium-webdriver');
   if (utils.percy?.type === 'automate') {
-    throw new Error('Invalid function call - percySnapshot(). Please use percyScreenshot() function while using Percy with Automate. For more information on usage of percyScreenshot, refer https://docs.percy.io/docs/integrate-functional-testing-with-visual-testing');
+    throw new Error('Invalid function call - percySnapshot(). Please use percyScreenshot() function while using Percy with Automate. For more information on usage of percyScreenshot, refer https://www.browserstack.com/docs/percy/integrate/functional-and-visual');
   }
@@ -29,11 +145,6 @@
     await driver.executeScript(await utils.fetchPercyDOM());
-
     // Serialize and capture the DOM
     /* istanbul ignore next: no instrumenting injected code */
-    let { domSnapshot, url } = await driver.executeScript(options => ({
-      /* eslint-disable-next-line no-undef */
-      domSnapshot: PercyDOM.serialize(options),
-      url: document.URL
-    }), options);
-
+    let domSnapshot = await captureDOM(driver, options);
+    let url = await currentURL(driver, options);
     // Post the DOM to the snapshot endpoint with snapshot options and other info
@@ -56,2 +167,5 @@ const response = await utils.postSnapshot({
 
+module.exports = percySnapshot;
+module.exports.percySnapshot = percySnapshot;
+
 module.exports.request = async function request(data) {
@@ -80,5 +194,4 @@ return await utils.captureAutomateScreenshot(data);
   if (!(await module.exports.isPercyEnabled())) return;
-  let log = utils.logger('selenium-webdriver');
   if (utils.percy?.type !== 'automate') {
-    throw new Error('Invalid function call - percyScreenshot(). Please use percySnapshot() function for taking screenshot. percyScreenshot() should be used only while using Percy with Automate. For more information on usage of PercySnapshot(), refer doc for your language https://docs.percy.io/docs/end-to-end-testing');
+    throw new Error('Invalid function call - percyScreenshot(). Please use percySnapshot() function for taking screenshot. percyScreenshot() should be used only while using Percy with Automate. For more information on usage of PercySnapshot(), refer doc for your language https://www.browserstack.com/docs/percy/integrate/overview');
   }
@@ -85,0 +198,0 @@

package.json

 {
   "name": "@percy/selenium-webdriver",
   "description": "Selenium client library for visual testing with Percy",
-  "version": "2.0.5",
+  "version": "2.1.0-beta.0",
   "license": "MIT",
@@ -15,3 +15,3 @@ "author": "Perceptual Inc.",
     "access": "public",
-    "tag": "latest"
+    "tag": "beta"
   },
@@ -34,7 +34,7 @@ "main": "index.js",
   "dependencies": {
-    "@percy/sdk-utils": "^1.28.0",
+    "@percy/sdk-utils": "^1.29.5-beta.0",
     "node-request-interceptor": "^0.6.3"
   },
   "devDependencies": {
-    "@percy/cli": "^1.28.0",
+    "@percy/cli": "^1.29.5-beta.0",
     "@types/selenium-webdriver": "^4.0.9",
@@ -41,0 +41,0 @@ "cross-env": "^7.0.2",

README.md

@@ -67,3 +67,3 @@ # @percy/selenium-webdriver
 - `name` (**required**) - The snapshot name; must be unique to each snapshot
-- `options` - [See per-snapshot configuration options](https://docs.percy.io/docs/cli-configuration#per-snapshot-configuration)
+- `options` - [See per-snapshot configuration options](https://www.browserstack.com/docs/percy/take-percy-snapshots/overview#per-snapshot-configuration)
 
@@ -186,2 +186,2 @@ ## Upgrading
 
-Refer to docs here: [Percy on Automate](https://docs.percy.io/docs/integrate-functional-testing-with-visual-testing)
+Refer to docs here: [Percy on Automate](https://www.browserstack.com/docs/percy/integrate/functional-and-visual)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23704

increased by20.45%

Lines of code

341

increased by42.68%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

3

increased by200%

Dependency changes

• Updated@percy/sdk-utils@^1.29.5-beta.0