flagpole/dist/puppeteerelement.js

Simple and fast DOM integration, headless or headful browser, and REST API testing framework.

"use strict";
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 });
const domelement_1 = require("./domelement");
const util_1 = require("./util");
class PuppeteerElement extends domelement_1.DOMElement {
    constructor(input, context, name, path) {
        super(input, context, name, path);
        this._input = input;
        this._path = path || "";
    }
    get $() {
        return this._input;
    }
    static create(input, context, name = null, path) {
        return new Promise((resolve) => {
            const element = new PuppeteerElement(input, context, name, path);
            if (name === null) {
                element._name = String(path);
            }
            Promise.all([element._getTagName(), element._getSourceCode()]).then(() => {
                resolve(element);
            });
        });
    }
    toString() {
        return String(this.path);
    }
    getClassName() {
        return __awaiter(this, void 0, void 0, function* () {
            const classHandle = yield this._input.getProperty("className");
            return this._wrapAsValue(yield classHandle.jsonValue(), `Class Name of ${this.name}`);
        });
    }
    hasClassName(className) {
        return __awaiter(this, void 0, void 0, function* () {
            const classHandle = yield this._input.getProperty("className");
            const classString = String(yield classHandle.jsonValue());
            return this._wrapAsValue(classString.split(" ").indexOf(className) >= 0, `${this.name} has class ${className}`);
        });
    }
    find(selector) {
        return __awaiter(this, void 0, void 0, function* () {
            const element = yield this.$.$(selector);
            const name = `${selector} under ${this.name}`;
            const path = `${this.path} ${selector}`;
            if (element !== null) {
                return PuppeteerElement.create(element, this._context, name, path);
            }
            return this._wrapAsValue(null, name);
        });
    }
    findAll(selector) {
        return __awaiter(this, void 0, void 0, function* () {
            const elements = yield this.$.$$(selector);
            const out = [];
            yield util_1.asyncForEach(elements, (element, i) => __awaiter(this, void 0, void 0, function* () {
                out.push(yield PuppeteerElement.create(element, this._context, `${selector}[${i}] under ${this.name}`, `${this.path} ${selector}[${i}]`));
            }));
            return out;
        });
    }
    getClosest(selector = "*") {
        return __awaiter(this, void 0, void 0, function* () {
            const closest = yield this.$.$x(`ancestor-or-self::${selector}`);
            const name = `Closest ${selector} of ${this.name}`;
            const path = `${this.path}[ancestor-or-self::${selector}]`;
            if (closest.length > 0) {
                return PuppeteerElement.create(closest[0], this._context, name, path);
            }
            return this._wrapAsValue(null, name, this);
        });
    }
    getChildren(selector = "*") {
        return __awaiter(this, void 0, void 0, function* () {
            const children = yield this.$.$x(`child::${selector}`);
            const out = [];
            yield util_1.asyncForEach(children, (child, i) => __awaiter(this, void 0, void 0, function* () {
                const name = `Child ${selector} ${i} of ${this.name}`;
                const path = `${this.path}[child::${selector}][${i}]`;
                out.push(yield PuppeteerElement.create(child, this._context, name, path));
            }));
            return out;
        });
    }
    getParent() {
        return __awaiter(this, void 0, void 0, function* () {
            const parents = yield this.$.$x("..");
            const name = `Parent of ${this.name}`;
            const path = `${this.path}[..]`;
            if (parents.length > 0) {
                return PuppeteerElement.create(parents[0], this._context, name, path);
            }
            return this._wrapAsValue(null, name, this);
        });
    }
    getSiblings(selector = "*") {
        return __awaiter(this, void 0, void 0, function* () {
            const prevSiblings = yield this.$.$x(`preceding-sibling::${selector}`);
            const nextSiblings = yield this.$.$x(`following-sibling::${selector}`);
            const siblings = [];
            yield util_1.asyncForEach(prevSiblings.concat(nextSiblings), (sibling, i) => __awaiter(this, void 0, void 0, function* () {
                const name = `Sibling ${i} of ${this.name}`;
                const path = `${this.path}[sibling::${selector}][${i}]`;
                siblings.push(yield PuppeteerElement.create(sibling, this._context, name, path));
            }));
            return siblings;
        });
    }
    getPreviousSibling(selector = "*") {
        return __awaiter(this, void 0, void 0, function* () {
            const siblings = yield this.$.$x(`preceding-sibling::${selector}`);
            const name = `Previous Sibling of ${this.name}`;
            const path = `${this.path}[preceding-sibling::${selector}][0]`;
            if (siblings.length > 0) {
                return PuppeteerElement.create(siblings[0], this._context, name, path);
            }
            return this._wrapAsValue(null, name, this);
        });
    }
    getPreviousSiblings(selector = "*") {
        return __awaiter(this, void 0, void 0, function* () {
            const siblingElements = yield this.$.$x(`preceding-sibling::${selector}`);
            const siblings = [];
            yield util_1.asyncForEach(siblingElements, (sibling, i) => __awaiter(this, void 0, void 0, function* () {
                const name = `Previous Sibling ${i} of ${this.name}`;
                const path = `${this.path}[preceding-sibling::${selector}][${i}]`;
                siblings.push(yield PuppeteerElement.create(sibling, this._context, name, path));
            }));
            return siblings;
        });
    }
    getNextSibling(selector = "*") {
        return __awaiter(this, void 0, void 0, function* () {
            const siblings = yield this.$.$x(`following-sibling::${selector}`);
            const name = `Next Sibling of ${this.name}`;
            const path = `${this.path}[following-sibling::${selector}][0]`;
            if (siblings.length > 0) {
                return PuppeteerElement.create(siblings[0], this._context, name, path);
            }
            return this._wrapAsValue(null, name, this);
        });
    }
    getNextSiblings(selector = "*") {
        return __awaiter(this, void 0, void 0, function* () {
            const siblingElements = yield this.$.$x(`following-sibling::${selector}`);
            const siblings = [];
            yield util_1.asyncForEach(siblingElements, (sibling, i) => __awaiter(this, void 0, void 0, function* () {
                const name = `Next Sibling ${i} of ${this.name}`;
                const path = `${this.path}[following-sibling::${selector}][${i}]`;
                siblings.push(yield PuppeteerElement.create(sibling, this._context, name, path));
            }));
            return siblings;
        });
    }
    getInnerText() {
        return __awaiter(this, void 0, void 0, function* () {
            if (this._context.page == null) {
                throw new Error("Page is null.");
            }
            return this._wrapAsValue(yield this._context.page.evaluate((e) => e.innerText, this.$), `Inner Text of ${this.name}`);
        });
    }
    getInnerHtml() {
        return __awaiter(this, void 0, void 0, function* () {
            if (this._context.page == null) {
                throw new Error("Page is null.");
            }
            return this._wrapAsValue(yield this._context.page.evaluate((e) => e.innerHTML, this.$), `Inner Html of ${this.name}`);
        });
    }
    getOuterHtml() {
        return __awaiter(this, void 0, void 0, function* () {
            if (this._context.page === null) {
                throw new Error("Page is null.");
            }
            const html = yield this.$.executionContext().evaluate((e) => e.outerHTML, this.$);
            return this._wrapAsValue(html, `Outer Html of ${this.name}`);
        });
    }
    getProperty(key) {
        return __awaiter(this, void 0, void 0, function* () {
            const name = `${key} of ${this.name}`;
            const handle = yield this._input.getProperty(key);
            return this._wrapAsValue(yield handle.jsonValue(), name, this);
        });
    }
    getData(key) {
        return __awaiter(this, void 0, void 0, function* () {
            const name = `Data of ${this.name}`;
            const handle = yield this._input.getProperty(key);
            return this._wrapAsValue(yield handle.jsonValue(), name, this);
        });
    }
    getValue() {
        return __awaiter(this, void 0, void 0, function* () {
            const name = `Value of ${this.name}`;
            const handle = yield this._input.getProperty("value");
            return this._wrapAsValue(yield handle.jsonValue(), name, this);
        });
    }
    getText() {
        return __awaiter(this, void 0, void 0, function* () {
            const name = `Text of ${this.name}`;
            const handle = yield this._input.getProperty("textContent");
            const text = String(yield handle.jsonValue());
            return this._wrapAsValue(text, name, this);
        });
    }
    getBounds(boxType = "border") {
        return __awaiter(this, void 0, void 0, function* () {
            if (this._context.page == null) {
                throw new Error("Page is null.");
            }
            const allowedTypes = ["content", "padding", "border", "margin"];
            if (allowedTypes.indexOf(boxType) < 0) {
                throw new Error(`${boxType} is not a valid box type. Must be one of the following: ${allowedTypes.join(", ")}.`);
            }
            const boxModel = yield this
                ._input.boxModel();
            if (boxModel !== null) {
                return {
                    x: boxModel[boxType][0].x,
                    y: boxModel[boxType][0].y,
                    width: boxModel.width,
                    height: boxModel.height,
                    points: boxModel[boxType],
                };
            }
            return null;
        });
    }
    focus() {
        return __awaiter(this, void 0, void 0, function* () {
            if (this._context.page == null) {
                throw new Error("Page is null.");
            }
            yield this._input.focus();
            this._completedAction("FOCUS");
        });
    }
    hover() {
        return __awaiter(this, void 0, void 0, function* () {
            if (this._context.page == null) {
                throw new Error("Page is null.");
            }
            yield this._input.hover();
            this._completedAction("HOVER");
        });
    }
    tap() {
        return __awaiter(this, void 0, void 0, function* () {
            if (this._context.page == null) {
                throw new Error("Page is null.");
            }
            yield this._input.tap();
            this._completedAction("TAP");
        });
    }
    press(key, opts) {
        return __awaiter(this, void 0, void 0, function* () {
            if (this._context.page == null) {
                throw new Error("Page is null.");
            }
            yield this._input.press(key, opts || {});
            this._completedAction("PRESS", key);
        });
    }
    clearThenType(textToType, opts = {}) {
        return __awaiter(this, void 0, void 0, function* () {
            yield this.clear();
            yield this.type(textToType, opts);
        });
    }
    type(textToType, opts = {}) {
        return __awaiter(this, void 0, void 0, function* () {
            if (this._context.page == null) {
                throw new Error("Page is null.");
            }
            yield this._input.type(textToType, opts);
            this._completedAction("TYPE", textToType);
        });
    }
    clear() {
        return __awaiter(this, void 0, void 0, function* () {
            if (this._context.page == null) {
                throw new Error("Page is null.");
            }
            yield this._input.click({ clickCount: 3 });
            yield this._context.page.keyboard.press("Backspace");
            this._completedAction("CLEAR");
        });
    }
    fillForm(a, b) {
        return __awaiter(this, void 0, void 0, function* () {
            const element = this;
            const isForm = yield this._isFormTag();
            if (this._context.page == null) {
                throw new Error("Page is null.");
            }
            if (!isForm) {
                throw new Error("This is not a form element.");
            }
            const page = this._context.page;
            if (page === null) {
                throw new Error("Page is null");
            }
            const attributeName = typeof a === "string" ? a : "name";
            const formData = (typeof a === "string" ? b : a) || {};
            for (let name in formData) {
                const value = formData[name];
                const selector = `${element._path} [${attributeName}="${name}"]`;
                const inputs = yield page.$$(selector);
                if (inputs.length > 0) {
                    const input = inputs[0];
                    const tagName = String(yield (yield input.getProperty("tagName")).jsonValue()).toLowerCase();
                    const inputType = String(yield (yield input.getProperty("type")).jsonValue()).toLowerCase();
                    yield page.focus(selector);
                    if (tagName == "select") {
                        yield page.select(selector, value);
                    }
                    else if (tagName == "input") {
                        if (inputType == "radio" || inputType == "checkbox") {
                            const multiValues = util_1.toType(value) == "array" ? value : [value];
                            for (let i = 0; i < inputs.length; i++) {
                                let checkbox = inputs[i];
                                let isChecked = !!(yield (yield checkbox.getProperty("checked")).jsonValue());
                                let checkboxValue = String(yield (yield checkbox.getProperty("value")).jsonValue());
                                if ((multiValues.indexOf(checkboxValue) >= 0 && !isChecked) ||
                                    (multiValues.indexOf(checkboxValue) < 0 && isChecked)) {
                                    yield checkbox.click();
                                }
                            }
                        }
                        else if (inputType == "button" ||
                            inputType == "submit" ||
                            inputType == "reset") {
                        }
                        else {
                            yield this._context.clearThenType(selector, value);
                        }
                    }
                    else if (tagName == "button") {
                    }
                }
                this._completedAction("FILL");
            }
            return this;
        });
    }
    submit(a, b) {
        return __awaiter(this, void 0, void 0, function* () {
            if (!this._isFormTag()) {
                throw new Error("You can only use .submit() with a form element.");
            }
            if (this._context.page === null) {
                throw new Error("Page was null");
            }
            yield this._context.page.evaluate((form) => form.submit(), this.$);
            this._completedAction("SUBMIT");
        });
    }
    click(a, b) {
        return __awaiter(this, void 0, void 0, function* () {
            this._completedAction("CLICK");
            if (a || b) {
                const overloaded = util_1.getMessageAndCallbackFromOverloading(a, b, this._path);
                return this._loadSubScenario(overloaded);
            }
            else {
                yield this._input.click();
            }
        });
    }
    screenshot(a, b) {
        const localFilePath = typeof a == "string" ? a : undefined;
        const opts = (typeof a !== "string" ? a : b) || {};
        return this._input.screenshot({
            path: localFilePath || opts.path,
            encoding: "binary",
            omitBackground: opts.omitBackground || false,
        });
    }
    _getTagName() {
        return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
            const handle = yield this._input.getProperty("tagName");
            const value = String(yield handle.jsonValue());
            this._tagName = value.toLowerCase();
            resolve(value);
        }));
    }
    _getSourceCode() {
        return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
            const outerHtml = (yield this.getOuterHtml()).toString();
            this._sourceCode = outerHtml;
            resolve();
        }));
    }
    _getAttribute(key) {
        return __awaiter(this, void 0, void 0, function* () {
            const handle = yield this._input.getProperty(key);
            return yield handle.jsonValue();
        });
    }
}
exports.PuppeteerElement = PuppeteerElement;
//# sourceMappingURL=puppeteerelement.js.map