cypress-image-diff-js/dist/command.js

Visual regression testing tool with cypress

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _merge = _interopRequireDefault(require("lodash/merge"));

var _cypressRecurse = require("cypress-recurse");

var _config = _interopRequireDefault(require("./config.default"));

var _utils = require("./utils.browser");

var compareSnapshotCommand = function compareSnapshotCommand() {
  var userConfig = Cypress.env('cypressImageDiff') || _config["default"];

  var height = Cypress.config('viewportHeight') || 1440;
  var width = Cypress.config('viewportWidth') || 1980; // Force screenshot resolution to keep consistency of test runs across machines

  Cypress.config('viewportHeight', parseInt(height, 10));
  Cypress.config('viewportWidth', parseInt(width, 10));
  Cypress.Commands.add('compareSnapshot', {
    prevSubject: 'optional'
  }, function (subject, orignalOptions) {
    var _ref = typeof orignalOptions === 'string' ? {
      name: orignalOptions
    } : orignalOptions,
        name = _ref.name,
        _ref$testThreshold = _ref.testThreshold,
        testThreshold = _ref$testThreshold === void 0 ? userConfig.FAILURE_THRESHOLD : _ref$testThreshold,
        _ref$retryOptions = _ref.retryOptions,
        retryOptions = _ref$retryOptions === void 0 ? userConfig.RETRY_OPTIONS : _ref$retryOptions,
        _ref$exactName = _ref.exactName,
        exactName = _ref$exactName === void 0 ? false : _ref$exactName,
        cypressScreenshotOptions = _ref.cypressScreenshotOptions,
        _ref$nameTemplate = _ref.nameTemplate,
        nameTemplate = _ref$nameTemplate === void 0 ? userConfig.NAME_TEMPLATE : _ref$nameTemplate; // IN-QUEUE-FOR-BREAKING-CHANGE: Ternary condition here is to avoid a breaking change with the new option nameTemplate, will be simplified once we remove the exactName option
    // eslint-disable-next-line no-nested-ternary


    var testName = nameTemplate ? (0, _utils.getFileName)({
      nameTemplate: nameTemplate,
      givenName: name,
      specName: Cypress.spec.name,
      browserName: Cypress.browser.name,
      width: Cypress.config('viewportWidth'),
      height: Cypress.config('viewportHeight')
    }) : exactName ? name : "".concat(Cypress.spec.name.replace('.js', '')).concat(/^\//.test(name) ? '' : '-').concat(name);
    var defaultRetryOptions = {
      limit: 1,
      log: function log(percentage) {
        var prefix = percentage <= testThreshold ? 'PASS' : 'FAIL';
        cy.log("".concat(prefix, ": Image difference percentage ").concat(percentage));
      },
      error: "Image difference greater than threshold: ".concat(testThreshold)
    };
    (0, _cypressRecurse.recurse)(function () {
      // Clear the comparison/diff screenshots/reports for this test
      cy.task('deleteScreenshot', {
        testName: testName
      });
      cy.task('deleteReport', {
        testName: testName
      });
      var screenshotOptions = (0, _merge["default"])({}, userConfig.CYPRESS_SCREENSHOT_OPTIONS, cypressScreenshotOptions);
      var objToOperateOn = subject ? cy.get(subject) : cy;
      var screenshotted = objToOperateOn.screenshot(testName, screenshotOptions);

      if (userConfig.FAIL_ON_MISSING_BASELINE === false) {
        // copy to baseline if it does not exist
        screenshotted.task('copyScreenshot', {
          testName: testName
        });
      } // Compare screenshots


      var options = {
        testName: testName,
        testThreshold: testThreshold,
        failOnMissingBaseline: userConfig.FAIL_ON_MISSING_BASELINE,
        specFilename: Cypress.spec.name,
        specPath: Cypress.spec.relative,
        inlineAssets: userConfig.INLINE_ASSETS
      };
      return cy.task('compareSnapshotsPlugin', options);
    }, function (percentage) {
      return percentage <= testThreshold;
    }, Object.assign({}, defaultRetryOptions, retryOptions));
  });
  Cypress.Commands.add('hideElement', {
    prevSubject: 'optional'
  }, function (subject) {
    var hide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

    if (hide) {
      cy.get(subject).invoke('attr', 'style', "display: none;");
    } else {
      cy.get(subject).invoke('attr', 'style', "display: '';");
    }

    return undefined;
  });
};

module.exports = compareSnapshotCommand;