cypress-jquery-contains-cleanup.js

/**
 * Some jQuery overrides that help with text normalization
 * for our formatted templates that get linted and formatted in ways that
 * make it hard to match text content in Cypress.
 *
 * Really it targets the new lines followed by lots of spaces that the linter adds when breaking up multi part
 * buttons or other elements with large amounts of text
 * 
 * Include this in your support/index.js which is is processed and loaded automatically before your other test files.
 */
const $ = Cypress.$;
const originalText = $.fn.text;

/**
 * Custom jQuery pseudo selector that checks if the element contains the text, but replaces new lines followed
 * by lots of spaces with a single space
 *
 * Works pretty much how jQuery has implemented it.
 */
$.expr.pseudos.contains = $.expr.createPseudo(function (escapedSelectorText) {
  return function (elem) {
    // replaces only new lines with spaces, which is what our linter does when it formats the code
    const textContent = elem.textContent ?? originalText.apply(elem); //removes the escapes
    const normalizedText = textContent.trim().replace(/\n +/g, " ");
    return normalizedText.includes(unescapeSelector(escapedSelectorText));
  };
});

/**
 * Custom jQuery text function that normalizes the text content of the element
 * returns the text content of the element, but replaces new lines followed by lots of spaces with a single space
 */
$.fn.text = function () {
  const result = originalText.apply(this, arguments);
  if (typeof result === "string") {
    return result.replace(/\n +/g, " ").trim();
  }
  return result; // return for setters
};