drawRedSquare.ts

/**
 * @experimental
 * This function tries to highligh exact point at webpage where click was failed,
 * by placing special red square into failed coordinate.
 * So allure screenshots will show exact failing location
 * @param error exception object
 */
async function drawClickPointAttempt(error: Error) {
    try {
        const text = error.message;
        const regex = /Element.*is not clickable at point \((.*), (.*)\)/gm;
        const res = regex.exec(text);
        if (!res) {
            return;
        }
        console.log(`[drawClickPoint] ${regex} matched ${text}`);
        const x = Number(res[1]);
        const y = Number(res[2]);
        console.log(`[drawClickPoint] Coordinates extracted from error x: ${x} y: ${y}`);
        // noinspection CssInvalidPropertyValue
        const drawScript = `document.body.insertAdjacentHTML('beforeend', ` +
            `'<webdriver-unclickable-point style="position: absolute;` +
            `background: #ff00003b;width: 30px;height: 30px;` +
            `left: ${x}px;top: ${y}px;z-index: 99999999;` +
            `transform:translateX(-50%) translateY(-50%);">` +
            `</webdriver-unclickable-point>');`;
        await browser.executeScript(drawScript);
    } catch (err) {
        console.log('[drawClickPoint] Cannot draw click point for screenshot: ', JSON.stringify(err));
    }
}