Highlights data-qa attributes on the page

highlight-data-qa.js

var observer;

if (observer) {
  observer.disconnect();
}

observer = new MutationObserver((mutationsList, observer) => {
  mutationsList.forEach(mutation => {
			if (mutation.addedNodes?.length > 0) {
				mutation.addedNodes.forEach(highlightQaAttributes);
			}

			if (mutation.target) {
				highlightQaAttributes(mutation.target);
			}
		});
});

observer.observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true,
});

function highlightQaAttributes(qaParent) {
  if (!(qaParent instanceof Element)) {
    return;
  }

  const qaElements = Array.from(qaParent.querySelectorAll("*")).filter(
    (element) => getDataQaAttributes(element).length > 0
  );

  qaElements.forEach((element) => {
    element.classList.add("data-qa-highlight");
  });
}

(() => {
  const HIGHLIGHTER_STYLE_ID = "data-qa-highlighter";
  removeChildIfPresent(document, `#${HIGHLIGHTER_STYLE_ID}`);
  const style = document.createElement("style");
  style.innerHTML = `
	@keyframes data-qa-border-glow {
		from { box-shadow: 0 0px 1px 1px #ff00b1, inset 0 0px 2px 1px #ff006a; }
		to { box-shadow: 0 0px 1px 1px #ffc800, inset 0 0px 2px 1px #ff8700 }
	}
	.data-qa-highlight { animation: data-qa-border-glow 2s infinite alternate; }
  `;
  style.id = HIGHLIGHTER_STYLE_ID;
  document.body.appendChild(style);
})();

highlightQaAttributes(document.body);

function getDataQaAttributes(element) {
  return Array.from(element.attributes).filter((attribute) =>
    attribute.name.includes("data-qa")
  );
}

function removeChildIfPresent(element, query) {
  const children = element.querySelectorAll(query);
  if (children) {
    children.forEach((child) => child.remove());
  }
}