Skip to content

Instantly share code, notes, and snippets.

@Xotabu4
Created October 20, 2021 16:12
Show Gist options
  • Save Xotabu4/d0780422a891a1d610040f47b139e298 to your computer and use it in GitHub Desktop.
Save Xotabu4/d0780422a891a1d610040f47b139e298 to your computer and use it in GitHub Desktop.
This function draws red square by coordinates provided from webdriver error. So screenshot will show what element is covered
import { browser } from 'protractor';
/**
* This function tries to highlight 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
*/
export 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)}`);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment