@progress/kendo-e2e
Version:
Kendo UI end-to-end test utilities.
188 lines • 7.85 kB
JavaScript
;
/* eslint @typescript-eslint/no-var-requires: "off" */
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.capture = capture;
const fs = __importStar(require("fs"));
const { promisify } = require('util');
const webdriver = require('selenium-webdriver');
const { Builder, By } = webdriver;
const chrome = require('selenium-webdriver/chrome');
const firefox = require('selenium-webdriver/firefox');
const path = require('path');
const looksSameCallback = require('looks-same');
const looksSame = promisify(looksSameCallback);
const sharp = require('sharp');
const WIDTH = 1024;
const HEIGHT = 768;
function capture(_a) {
return __awaiter(this, arguments, void 0, function* ({ browser, host, pages, root, output, viewportSize, selector, tolerance, createDiff }) {
const size = viewportSize || { width: WIDTH, height: HEIGHT };
const ChromeOptions = new chrome.Options()
.addArguments('--headless=new')
.addArguments('--force-device-scale-factor=1')
.addArguments('--disable-extensions')
.addArguments('--disable-notifications')
.addArguments('--ignore-certificate-errors')
.windowSize(size);
const FirefoxOptions = new firefox.Options()
.addArguments('--headless')
.windowSize(size);
const driver = new Builder()
.forBrowser(browser)
.setChromeOptions(ChromeOptions)
.setFirefoxOptions(FirefoxOptions)
.build();
yield setViewportSize(driver, size);
// console.time('runTests');
try {
for (const page of pages) {
const name = path.basename(page, '.html');
const url = host + page;
const relativePath = path.relative(root, page);
const outputPath = path.dirname(path.join(output, relativePath));
fs.mkdirSync(outputPath, { recursive: true });
// console.group(`Running test for ${url}...`);
// console.time('runTest');
yield runTest({ driver, url, name, outputPath, selector, tolerance, createDiff });
// console.timeEnd('runTest');
// console.groupEnd();
}
}
catch (e) {
console.error('Error during capture:', e);
}
finally {
// console.time('driver quit');
yield driver.quit();
}
});
}
function setViewportSize(driver, size) {
return __awaiter(this, void 0, void 0, function* () {
const { innerSize, outerSize } = yield driver.executeScript(`
return {
outerSize: {
width: window.outerWidth,
height: window.outerHeight
},
innerSize: {
width: window.innerWidth,
height: window.innerHeight
}
}
`);
const chromeSize = {
width: outerSize.width - innerSize.width,
height: outerSize.height - innerSize.height
};
const width = size.width + chromeSize.width;
const height = size.height + chromeSize.height;
yield driver.manage().window().setRect(width, height);
});
}
function elementOrViewport(driver, selector) {
return __awaiter(this, void 0, void 0, function* () {
let element;
try {
element = yield driver.findElement(By.css(selector));
// console.log(`Taking screenshot of element ${selector}`);
return element;
}
catch (e) {
// console.log('Taking screenshot of viewport');
return driver;
}
});
}
const writeFile = (png, filename) => __awaiter(void 0, void 0, void 0, function* () {
const optimized = yield sharp(png).png().toBuffer();
fs.writeFileSync(filename, optimized);
});
const createDiffImage = (current, reference, filename, tolerance) => {
const diffImageSettings = {
reference,
current,
diff: filename,
highlightColor: '#ff00ff',
strict: false,
tolerance: tolerance
};
looksSame.createDiff(diffImageSettings);
};
function runTest(_a) {
return __awaiter(this, arguments, void 0, function* ({ driver, url, name, outputPath, selector, tolerance, createDiff }) {
// console.time('driver.get url');
yield driver.get(url);
// console.timeEnd('driver.get url');
// console.time('driver.findElement');
const element = yield elementOrViewport(driver, selector);
// console.timeEnd('driver.findElement'); // eslint-disable-line padding-line-between-statements
// console.time('driver.takeScreenshot');
const data = yield element.takeScreenshot();
// console.timeEnd('driver.takeScreenshot'); // eslint-disable-line padding-line-between-statements
const png = Buffer.from(data, 'base64');
const filename = `./${outputPath}/${name}.png`;
const diffname = `./${outputPath}/${name}_diff_${Date.now()}.png`;
if (!fs.existsSync(filename)) {
// initial run, write file
yield writeFile(png, filename);
return true;
}
// console.time('looksSame.compare');
const { equal } = yield looksSame(png, filename, { strict: false, tolerance: tolerance });
// console.timeEnd('looksSame.compare');
// overwrite file only if there are visual differences
if (!equal) {
if (createDiff) {
// console.time('looksSame.createDiff');
createDiffImage(png, filename, diffname, tolerance);
// console.timeEnd('looksSame.createDiff');
}
yield writeFile(png, filename);
}
return true;
});
}
//# sourceMappingURL=capture.js.map