This function draws red square by coordinates provided from webdriver error. So screenshot will show what element is covered

drawClickPointAttempt.ts

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)}`);
  }
}