How to use elementMatcher method in Cypress

You can use cy.visit with the href attribute, then write an assertion and go back easily xD

cy.get('li').each((item) => {
  const title = item.find('h1').first().text();
  const link = item.find('a').first();

  cy.visit(link.attr('href'));

  cy.get('h1').should('have.text', title);
  cy.go('back');
});

Code below will help you to stub window.open and further assert it that function has been triggered:

it('opens the about page', () => {
  cy.visit('/')
  cy.window().then(win => {
    cy.stub(win, 'open').as('Open')
  })
  cy.get('.your-selector').click()
  cy.get('@Open').should('have.been.calledOnceWithExactly', yourUrl)
})

You also can stub window.open in cy.on hook as you did, what helps you to yield new window object each time after page reload. However, if you want to actually open the new Url in existing tab instead of new one you can use this code below by passing "_self" param to overwrite old "_blank":

cy.window().then(win => {
          cy.stub(win, 'open').callsFake((url) => {
            return win.open.wrappedMethod.call(win, url, '_self');
          }).as('Open');
        });

callsFake function dynamically withdraws url which has been placed into original window.open(url, "_blank"), or you can manually change url inside .call(win, url, '_self'); with static one, so regardless on which link or button you clicked, which triggers window.open, they all will open the same url.

This is a test comparing two generated strings and if they are not equal after clicking a button:

    it('Test generating new password', () => {
        let password1;
        cy.get('#password').should(($div) => {
            password1 = $div.text();
        });
        cy.get('#generate-button').click();
        cy.get('#password').should(($div) => {
            const password2 = $div.text();
            expect(password1).not.equal(password2);
        });
    });

If I understand correctly, these are XPath and selector equivalents (https://example.org/ happens to have a similar DOM structure):

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('https://example.org/');

    const [elemByXPath] = await page.$x('//div[h1[contains(., "Example Domain")]]//a');

    const elemBySelector = await page.evaluateHandle(
      () => [...document.querySelectorAll('div')]
              .find(
                div => [...div.querySelectorAll('h1')]
                         .some(h1 => h1.innerText.includes('Example Domain'))
              )
              .querySelector('a')
    );

    console.log(elemByXPath.toString());
    console.log(elemBySelector.toString());

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

$ele.find('.orderTemplate-name').contains('automated test title') gives an error

$ele.find(...).contains is not a function

because there is no .contains() in jQuery.

You can use the pseudo-selector :contains, but you must test the .length of the result

if ($ele.find('.orderTemplate-name:contains("automated test title")').length) {

cy.get('#deleteBtn').click() is a bit dodgy because it always searches from the top of the document, not within the row.

If the delete action is slow to remove the row, it might still find the previous delete button because .each() will run quite fast.

Add .within() to fix that

cy.get('tbody tr').each(($row) => {
  if ($row.find('.orderTemplate-name:contains("automated test title")').length) {
    cy.wrap($row).within(() => {
      cy.get('#deleteBtn').click()
    })
  }
})

Simpler to add :contains() condition inside the row selector

cy.get('tbody tr:contains("automated test title")').each(($row) => {
  cy.wrap($row).find('#deleteBtn').click()
})

I agree with your comment, detached-from-DOM error is most likely due to re-render after a delete.

This function might get better results

const deleteRow = (selector, rowsToDelete) => {

  if (rowsToDelete === 0) return

  // Fresh query each iteration
  cy.get('tbody tr:contains("automated test title")').eq(0)
    .as('rowDeleted')
    .find('#deleteBtn').click()
  
  // Need some way to make sure delete action has finished
  cy.get('@rowDeleted')
    .should('not.exist')

  // Do the next one
  deleteRow(selector, --rowsToDelete) 
}

const selector = 'tbody tr:contains("automated test title")'

cy.get(selector).then($rows => {  
  const rowsToDelete = $rows.length  // obtain the count
  deleteRow(selector, rowsToDelete)
})

should('have.length', 5) will expect that the previous command returned a subject with exactly 5 elements but you want to test that the URL you're looking for is within the first five links. I believe you can do it like this:

cy.visit('https://www.google.com/search?q=nasa');
cy.get('.rc:lt(5) > .r > a[href*="wiki/NASA"]').click({ force: true });
// `{ force: true }` because it's covered by another element or something.

This will test that there's an <a> within the first 5 results containing wiki/NASA in its href attribute.

According to this post, and according to cypress suggestions for custom commands and page objects I suggest the next custom command:

Cypress.Commands.add("validateIfElementExistsInDom", (selector) => {
    cy.get('body')
        .then($body => {
            expect($body.find(selector).length > 0).to.be.true
        })
    
})

And you can use it in the test like :

cy.validateIfElementExistsInDom(fieldName)
    

And a general return boolean function example:

Cypress.Commands.add("validateIfElementExistsInDomAsBoolean", (selector) => {
   return cy.get('body')
        .then($body => {
            return cy.wrap($body.find(selector).length > 0) //Cy wrap is needed so the function is chainable
        })
})

//in test code
cy.validateIfElementExistsInDomAsBoolean(fieldName)
    .then(boolean => expect(boolean).to.be.true)

You can open browser with different TZ from server by adding specific timezone before open, in this way

"scripts": {
  "cypress:open": "TZ=America/New_York cypress open",
  "cypress:run": "TZ=America/New_York cypress run"
}

You can do something like this:

let lenBefore;

it('Step 5 - get the before table row count', () => {
  cy.getByTestId('user-management-roles-table-container').find("tr").its('length').then((len) => {
    lenBefore = len;
    cy.log('Initial table Length is: ' + lenBefore);
  });
});

it('Step 6 - Click on the 3 dots', () => {
  cy.getByTestId('button-group-buttonGroup-dropdown-button').first().click();
  cy.getByTestId('select-menu-buttonGroup-items-wrapper').should('be.visible');
});

it('Step 7 - Click on the "Delete" button', () => {
  cy.getByTestId('select-menu-buttonGroup-value-delete').click();
});

it('Step 5 - get the after table row count', () => {
  cy.getByTestId('user-management-roles-table-container').find("tr").its('length').then((lenAfter) => {
    cy.log('After table Length is: ' + lenAfter);
    expect(lenBefore).to.equal(lenAfter - 1);
  });
});