How to use @medv/finder - 6 common examples

iframeWindow.onclick = (e) => {
      const { target } = e;

      e.stopPropagation();
      e.preventDefault();

      if (target.clicked) {
        target.clicked = false;
        // remove from array
        setRecords(pre => pre.filter(record => record.target !== target));
      } else {
        target.clicked = true;
        const selector = finder(target, {
          root: iframeDocument,
          idName: () => false,
          className: () => false,
          tagName: () => false,
        });
        const cloneNode = target.cloneNode(true);
        cloneNode.style.backgroundColor = null;
        setRecords(pre => pre.concat({
          selector,
          target,
          innerText: cloneNode.innerText,
          href: cloneNode.href,
        }));
      }
    };
  }

_recordEvent (e) {
    if (this._previousEvent && this._previousEvent.timeStamp === e.timeStamp) return
    this._previousEvent = e

    // we explicitly catch any errors and swallow them, as none node-type events are also ingested.
    // for these events we cannot generate selectors, which is OK
    try {
      const optimizedMinLength = (e.target.id) ? 2 : 10 // if the target has an id, use that instead of multiple other selectors
      const selector = this._dataAttribute
        ? finder(e.target, {seedMinLength: 5, optimizedMinLength: optimizedMinLength, attr: (name, _value) => name === this._dataAttribute})
        : finder(e.target, {seedMinLength: 5, optimizedMinLength: optimizedMinLength})

      const msg = {
        selector: selector,
        value: e.target.value,
        tagName: e.target.tagName,
        action: e.type,
        keyCode: e.keyCode ? e.keyCode : null,
        href: e.target.href ? e.target.href : null,
        coordinates: EventRecorder._getCoordinates(e)
      }
      this._sendMessage(msg)
    } catch (e) {}
  }

global.copyToClipboard = () => {
    const { selectedEl } = global;
    if (!selectedEl) {
      return;
    }
    global.copiedEl && global.copiedEl.classList.remove("gs_copied");
    clearEl(selectedEl);
    const selector = finder(selectedEl);
    console.log("[GetSelector]: Copied to Clipboard: " + selector, selectedEl);
    copyToClipboard(selector);

    global.copiedEl = selectedEl;
    global.copiedEl.classList.add("gs_copied");
  };

LocatorBuilders.add('css:finder', function cssFinder(e) {
  return 'css=' + finder(e)
})

function parseEvent(event: Event): ParsedEvent {
  let selector: string;
  if ((event.target as Element).hasAttribute('data-cy')) selector = `[data-cy=${(event.target as Element).getAttribute('data-cy')}]`;
  else if ((event.target as Element).hasAttribute('data-test')) selector = `[data-test=${(event.target as Element).getAttribute('data-test')}]`;
  else if ((event.target as Element).hasAttribute('data-testid')) selector = `[data-testid=${(event.target as Element).getAttribute('data-testid')}]`;
  else selector = finder(event.target as Element);
  const parsedEvent: ParsedEvent = {
    selector,
    action: event.type,
    tag: (event.target as Element).tagName,
    value: (event.target as HTMLInputElement).value,
  };
  if ((event.target as HTMLAnchorElement).hasAttribute('href')) parsedEvent.href = (event.target as HTMLAnchorElement).href;
  if ((event.target as Element).hasAttribute('id')) parsedEvent.id = (event.target as Element).id;
  if (parsedEvent.tag === 'INPUT') parsedEvent.inputType = (event.target as HTMLInputElement).type;
  if (event.type === 'keydown') parsedEvent.key = (event as KeyboardEvent).key;
  return parsedEvent;
}