How to use server.transformIndexHtml method in Cypress

I think the problem is, that you want to do conditional testing. Using cy.wait() is bad practice and is even mentioned in the docs itself.

Anti-Pattern

You almost never need to wait for an arbitrary period of time. There are always better ways to express this in Cypress.

You should not execute different actions upon response. In cypress testing it is expected, that you know the result of your action beforehand.

If user enters invalid email, you might expect form submisson to fail and an error to be displayed.

cy.get("#email-input").type('invalid_email.com');
cy.get("#password-input").type(userLoginDetail.password);
cy.get("form").submit();
cy.get(".email-error").should('be.visible');

In this case cypress will check them DOM until it finds the error or hits the defaultCommandTimeout from cypress config.

On the other hand, if you want to check if user is redirected correclty, you can simply check for a div on the success/redirected page.

cy.get("#email-input").type('valid@email.com');
cy.get("#password-input").type(userLoginDetail.password);
cy.get("form").submit();
cy.get(".success-page").should('be.visible');

However, if you still decide to execute an action depending on the servers response, cypress enables you to declaratively cy.wait() for requests and their responses.

cy.server()
cy.route({
  method: 'POST',
  url: '/myApi',
}).as('apiCheck')
cy.visit('/')
cy.wait('@apiCheck').then((xhr) => {
  assert.isNotNull(xhr.response.body.data, 'api call successfull')
})

If you want to use the :has() pseudo-selector, you should do so on the outer of the .each() loop.

But please beware, :has() pseudo-selector will fail if there are zero buttons already clicked.

let myArray: any = []

cy.get('li[class="xyz"]:has(button[aria-label="remove"])')  // implied filter
  .each($li => {
    // only element with remove attribute inside here
    cy.wrap($li)
      .find('div[class="theText"]')
      .invoke('text')
      .then(text => {
        myArray.push(text)
      })
  })
}).then(() => {
  cy.wrap(myArray).as('myArray')
})

The problem isn't reproducible, either with Chrome 93 or 96 (you mention both versions). The test passes when using that HTML in isolation.

Technically that error comes because of the type="number", from HTMLInputElement.setSelectionRange()

Note that according to the WHATWG forms spec selectionStart, selectionEnd properties and setSelectionRange method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection".

But Cypress has internal checks that avoid selectionStart for inputs of type number,

const canSetSelectionRangeElementRe = /^(text|search|URL|tel|password)$/

Since you are dealing with a phone number, the input type should (theoretically) be changed to type="tel".

<input type="tel" 
  name="phone_lead" id="phone_lead" 
  placeholder="+92 301 2345678" 
  class="required" 
  autocomplete="off">

From your description the only step missing is the support file import.

// cypress/support/e2e.js
import '@cypress/code-coverage/support'

I also have a .babelrc with the following, but I believe you can do without it if just covering e2e tests.

{
  "plugins": ["istanbul"]
}

Let me know if that's not it, I will give you step-by-step.

The colon after the function name indicates you are defining a method on a class, if so it needs to be referred from this

selectDayFromCurrent: (day) => {

  ...        

  cy.get(...).invoke('text').then(dateAttribute => {
    if (!dateAttribute.includes(futureMonth)) {
      cy.contains('Next Month').click()

      this.selectDayFromCurrent(day)

    } else {
      ...
    }
  })
},

Or you can avoid the use of this (which can be problematic) by moving the recursive function inside the method

selectDayFromCurrent: (day) => {

  function selectWithCorrectMonth(day) {
    ...        

    cy.get(...).invoke('text').then(dateAttribute => {
      if (!dateAttribute.includes(futureMonth)) {
        cy.contains('Next Month').click()

        selectWithCorrectMonth(day)

      } else {
        ...
      }
    })
  }

  selectWithCorrectMonth(day)

},

You are returning the value inside your Promise function. Promises however can't return values, they can only resolve with a value. This means you'll have to use Promises throughout your code like this:

function getText(byclassName) {
    return new Promise((resolve, reject) => {
        cy.get(byclassName).invoke('text')
            .then(campaign => {
                cy.log('campaign', campaign);
                resolve(campaign);
            });
    });
}

it('finds the role', function () {
    cy.visit(...);

    return getText('.myClass').then(elementText => {
        cy.log('campaign', elementText);

        expect(elementText).to.equal(...);
    });
})

This might help: in package.json set the flag nonGlobalStepDefinitions to false, and define the directory tests are coming from: "stepDefinitions": "cypress/integration/"

{
  "devDependencies": {
    "cypress": "^9.1.0",
    "cypress-cucumber-preprocessor": "^4.3.0"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "stepDefinitions": "cypress/integration/"
  }
}

Try this:

cy.get('#twotabsearchtextbox').click().get('#searchDropdownBox').select('Books',{force: true})

You will need to enable search inside the shadow-root(s).

Add the option to the test config, or global config (cypress.config.js).

it('tests inside shadow DOM', {includeShadowDom: true}, () => {

  cy.get('ion-card:nth-child(3) input[formControlName="startDate"]')
    .type(myDate)

})