Searching inside shadow doms in protractor helper function

shadow$.ts

import { element, By } from 'protractor';

/**
 * Find element inside nested shadow doms:
 * shadow1(shadowDOM -> shadow2(shadowDOM -> shadow3(shadowDOM -> button)))
 *
 * @example
 * new SomeElement(shadow$(['shadow1', 'shadow2', 'shadow3'], 'button')).click()
 *
 * @param shadowDomCssSelectors
 * @param innerElement
 */
export function shadow$(shadowDomCssSelectors: string[], innerElementCssLocator: string) {
  return element(
    // eslint-disable-next-line prefer-arrow-callback
    By.js(function (_shadowDomCssSelectors, _innerElementCssLocator) {
      const findElementInShadowDom = (shadowRoot, cssSelector) => shadowRoot.querySelector(cssSelector);
      const getDeepestShadowRoot = (shadowContainersInNestedOrder) => shadowContainersInNestedOrder.reduce(
        (shadowRoot, shadowContainer) => findElementInShadowDom(shadowRoot, shadowContainer).shadowRoot,
        document.querySelector(shadowContainersInNestedOrder.shift()).shadowRoot,
      );
      return findElementInShadowDom(
        getDeepestShadowRoot(_shadowDomCssSelectors),
        _innerElementCssLocator,
      );
    }, shadowDomCssSelectors, innerElementCssLocator),
  );
}