@progress/kendo-e2e
Version:
Kendo UI end-to-end test utilities.
207 lines • 8.87 kB
JavaScript
;
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());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.snapshotImage = snapshotImage;
exports.snapshotViewPort = snapshotViewPort;
const fs = __importStar(require("fs"));
const looks_same_1 = __importDefault(require("looks-same"));
const selenium_webdriver_1 = require("selenium-webdriver");
const scripts_1 = require("./scripts");
const writeFile = fs.promises.writeFile;
const existsAsync = (path) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield fs.promises.access(path, fs.constants.F_OK);
return true;
}
catch (_a) {
return false;
}
});
const defaults = {
hideSelectors: [],
sleep: 0,
tolerance: 0,
ignoreCaret: true,
timeout: 3000,
};
const looksSame = (image, outputPath, options) => new Promise((resolve, reject) => {
(0, looks_same_1.default)(image, outputPath, options, (err, result) => {
if (err)
reject(err);
else
resolve(result);
});
});
/**
* Takes a screenshot of a single element (by selector) and compares/updates the reference image.
*
* Behavior is:
* 1. Wait for the element to appear.
* 2. Optionally sleep, then hide any selectors passed in `hideSelectors`.
* 3. Call the WebElement.takeScreenshot() API to get only that element’s bitmap.
* 4. If a file already exists at outputPath, compare it (with looks-same). If identical, stop.
* Otherwise, overwrite the file (unless SKIP_IMAGE_UPLOAD_AND_FAIL is set, in which case throw).
* 5. Restore hidden elements.
*
* @param driver A WebDriver instance.
* @param selector CSS selector for the element to snapshot. (First match only.)
* @param outputPath Path where the screenshot PNG should live (and be compared/overwritten).
* @param options Optional hideSelectors, sleep, tolerance, etc.
*/
function snapshotImage(driver, selector, outputPath, options) {
return __awaiter(this, void 0, void 0, function* () {
const { hideSelectors, sleep, tolerance, ignoreCaret, timeout } = Object.assign(Object.assign({}, defaults), options);
// 1) Wait until the element is present and visible
const waitCondition = (driver) => __awaiter(this, void 0, void 0, function* () {
try {
const myElement = yield driver.findElement(selenium_webdriver_1.By.css(selector));
return yield myElement.isDisplayed();
}
catch (_a) {
return false;
}
});
yield driver.wait(waitCondition, 10000, `Failed to find element by selector ${selector}.`);
const result = { same: false };
let same = false;
let elementPngBuffer;
try {
// 2) Optional sleep, then hide any selectors
if (sleep && sleep > 0) {
yield driver.sleep(sleep);
}
yield driver.executeScript(scripts_1.hideElements, hideSelectors);
// 3) Locate the element and take its built-in screenshot
const element = yield driver.findElement(selenium_webdriver_1.By.css(selector));
const base64png = yield element.takeScreenshot();
elementPngBuffer = Buffer.from(base64png, 'base64');
// 4) If the reference already exists, compare;
yield driver.wait(() => __awaiter(this, void 0, void 0, function* () {
if (yield existsAsync(outputPath)) {
// compare the two buffers (looks-same returns { equal: boolean })
const comparison = yield looksSame(elementPngBuffer, outputPath, {
tolerance,
ignoreCaret,
});
return comparison.equal;
}
return false;
}), timeout, `Actual element screenshot did not match reference within ${timeout}ms`);
same = true;
}
catch (_a) {
console.warn(`Element screenshot did not match or timed out for ${outputPath}`);
}
finally {
// 5) If not same, either overwrite or throw, then restore hidden elements
if (!same) {
if (!process.env.SKIP_IMAGE_UPLOAD_AND_FAIL) {
yield writeFile(outputPath, elementPngBuffer);
}
else {
throw new Error(`Snapshot mismatch for ${outputPath}. SKIP_IMAGE_UPLOAD_AND_FAIL is set, so not updating.`);
}
}
yield driver.executeScript(scripts_1.restoreElements, hideSelectors);
}
result.same = same;
return result;
});
}
/**
* Takes an image snapshot of view port.
*
* The image is compared using [looks-same](https://www.npmjs.com/package/looks-same) before overwriting.
*
* @example
* await snapshotViewPort(driver, `${artifactsPath}/column-menu.png`, {
* hideSelectors: ['div#demoToolbar']
* });
*
* @param driver WebDriver instance
* @param outputPath The path to the screenshot file to be created or updated.
* @param options Screenshot options.
*/
function snapshotViewPort(driver, outputPath, options) {
return __awaiter(this, void 0, void 0, function* () {
const { hideSelectors, sleep, tolerance, ignoreCaret, timeout } = Object.assign(Object.assign({}, defaults), options);
// Wait until screenshot match expected image
const snapshotResult = { same: false };
let same = false;
let image;
try {
if (sleep > 0) {
yield driver.sleep(sleep);
}
yield driver.executeScript(scripts_1.hideElements, hideSelectors);
yield driver.wait(() => __awaiter(this, void 0, void 0, function* () {
const data = yield driver.takeScreenshot();
image = Buffer.from(data, 'base64');
if (yield existsAsync(outputPath)) {
const result = yield looksSame(image, outputPath, { tolerance: tolerance, ignoreCaret: ignoreCaret });
return result.equal;
}
else {
return false;
}
}), timeout);
same = true;
}
catch (_a) {
console.warn(`Actual screenshot do not match ${outputPath}`);
}
finally {
if (!same) {
yield writeFile(outputPath, image);
}
yield driver.executeScript(scripts_1.restoreElements, hideSelectors);
}
snapshotResult.same = same;
return snapshotResult;
});
}
//# sourceMappingURL=snapshot-image.js.map