How to use onClickErase method in Cypress

The problem is with these two type defns in cypress.d.ts

// cypress.d.ts

/**
 * Get one or more DOM elements by selector.
 * The querying behavior of this command matches exactly how $(…) works in jQuery.
 * @see https://on.cypress.io/get
 * @example
 *    cy.get('.list>li')    // Yield the <li>'s in <.list>
 *    cy.get('ul li:first').should('have.class', 'active')
 *    cy.get('.dropdown-menu').click()
 */
get<E extends Node = HTMLElement>(
  selector: string, 
  options?: Partial<Loggable & Timeoutable & Withinable & Shadow>)
  : Chainable<JQuery<E>>

/**
 * Get one or more DOM elements by alias.
 * @see https://on.cypress.io/get#Alias
 * @example
 *    // Get the aliased ‘todos’ elements
 *    cy.get('ul#todos').as('todos')
 *    //...hack hack hack...
 *    //later retrieve the todos
 *    cy.get('@todos')
 */
get<S = any>(
  alias: string, 
  options?: Partial<Loggable & Timeoutable & Withinable & Shadow>)
  : Chainable<S>

You can "fix" it by reversing the order,

// cypress/support/index.ts

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      // change the order of these two dfns
      get<S = any>(alias: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<S>
      get<E extends Node = HTMLElement>(selector: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<E>>
    }
  }
}

Now cy.get('@alias') types to any (because of get<S = any>), which is valid since aliases store any type.

But also the selector version is getting typed to any as well, it seems the identical type signatures make one of the defns redundant.

As Mikhail Bolotov points out, a different command name solves the issue, but I would define it as a custom command in /cypress/support/index.ts and call it getAlias since it has to work for any type.

To answer your original question, the cypress.env.json file needs to be placed inside the root of your project, right next to the cypress.json file.

By creating a separate cypress.env.json file you're able to access nested values, like so:

//cypress.env.js
{
    "user": {
        "username": "Jane",
        "password": "SuperPassword",
        "someOtherData": "veryImportantData"
    }
}

and then

//somewhere in myCypressTest.spec.ts
Cypress.env("user").username      //returns "Jane"
Cypress.env("user").password      //returns "SuperPassword"
Cypress.env("user").someOtherData //returns "veryImportantData"

It's not really documented accurately anywhere unfortunately. I didn't need to change any paths, just moved the cypress.env.json outside the Cypress folder where I had originally placed it, and it started working.

After much nashing-of-teeth, I think I have an answer.

I think the root cause is that mdc-select-item has display:flex, which allows it to exceed the bounds of it's parents (strictly speaking, this feels like the wrong application of display flex, if I remember the tutorial correctly, however...).

Cypress does a lot of parent checking when determining visibilty, see visibility.coffee,

## WARNING:
## developer beware. visibility is a sink hole
## that leads to sheer madness. you should
## avoid this file before its too late.
...
when $parent = parentHasDisplayNone($el.parent())
  parentNode = $elements.stringify($parent, "short")

  "This element '#{node}' is not visible because its parent '#{parentNode}' has CSS property: 'display: none'"
...
when $parent = parentHasNoOffsetWidthOrHeightAndOverflowHidden($el.parent())
  parentNode  = $elements.stringify($parent, "short")
  width       = elOffsetWidth($parent)
  height      = elOffsetHeight($parent)

  "This element '#{node}' is not visible because its parent '#{parentNode}' has CSS property: 'overflow: hidden' and an effective width and height of: '#{width} x #{height}' pixels."

But, when using .should('be.visible'), we are stuck with parent properties failing child visibility check, even though we can actually see the child.
We need an alternate test.

The work-around

Ref jquery.js, this is one definition for visibility of the element itself (ignoring parent properties).

jQuery.expr.pseudos.visible = function( elem ) {
  return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
}

so we might use that as the basis for an alternative.

describe('Testing select options', function() {

  // Change this function if other criteria are required.
  const isVisible = (elem) => !!( 
    elem.offsetWidth || 
    elem.offsetHeight || 
    elem.getClientRects().length 
  )

  it('checks select option is visible', function() {

    const doc = cy.visit('http://localhost:4200')
    cy.get("mdc-select").contains("installation type").click()

    //cy.get('mdc-select-item').contains("ITEM1").should('be.visible') //this will fail
    cy.get('mdc-select-item').contains("ITEM1").then (item1 => {
      expect(isVisible(item1[0])).to.be.true
    });
  });

  it('checks select option is not visible', function() {

    const doc = cy.visit('http://localhost:4200')
    cy.get("mdc-select").contains("installation type").click()

    cy.document().then(function(document) {

      const item1 = document.querySelectorAll('mdc-select-item')[0]
      item1.style.display = 'none'

      cy.get('mdc-select-item').contains("ITEM1").then (item => {
        expect(isVisible(item[0])).to.be.false
      })
    })
  });

  it('checks select option is clickable', function() {

    const doc = cy.visit('http://localhost:4200')
    cy.get("mdc-select").contains("installation type").click()
    
    //cy.get('mdc-select-item').contains("ITEM1").click()    // this will fail
    cy.get('mdc-select-item').contains("ITEM1").then (item1 => {
    
      cy.get('mdc-select-item').contains("ITEM2").then (item2 => {
        expect(isVisible(item2[0])).to.be.true  //visible when list is first dropped
      });
          
      item1.click();
      cy.wait(500)
          
      cy.get('mdc-select-item').contains("ITEM2").then (item2 => {
        expect(isVisible(item2[0])).to.be.false  // not visible after item1 selected
      });
    });
    
  })

Footnote - Use of 'then' (or 'each')

The way you normally use assertion in cypress is via command chains, which basically wraps the elements being tested and handles things like retry and waiting for DOM changes.

However, in this case we have a contradiction between the standard visibility assertion .should('be.visible') and the framework used to build the page, so we use then(fn) (ref) to get access to the unwrapped DOM. We can then apply our own version of the visibility test using stand jasmine expect syntax.

It turns out you can also use a function with .should(fn), this works as well

it('checks select option is visible - 2', function() {
  const doc = cy.visit('http://localhost:4200')
  cy.get("mdc-select").contains("installation type").click()

  cy.get('mdc-select-item').contains("ITEM1").should(item1 => {
    expect(isVisible(item1[0])).to.be.true
  });
});

Using should instead of then makes no difference in the visibility test, but note the should version can retry the function multiple times, so it can't be used with click test (for example).

From the docs,

What’s the difference between .then() and .should()/.and()?

Using .then() simply allows you to use the yielded subject in a callback function and should be used when you need to manipulate some values or do some actions.

When using a callback function with .should() or .and(), on the other hand, there is special logic to rerun the callback function until no assertions throw within it. You should be careful of side affects in a .should() or .and() callback function that you would not want performed multiple times.

You can also solve the problem by extending chai assertions, but the documentation for this isn't extensive, so potentially it's more work.

I think the step .invoke('attr', 'href') is just returning the first, see .attr()

Get the value of an attribute for the first element in the set of matched elements

So, maybe

cy.get('[foo="bar"] a')
  .then($els => {
    const hrefs = [...$els].map(el => el.getAttribute('href'))
    cy.writeFile('./cypress/downloads/results.txt', hrefs)
  })

Well this seems to work, so it tells me I have some more to learn about .should()

cy.get('.check-box-sub-text').should('not.exist');

You need to tell Typescript that some of parameters are optional:

// index.d.ts
declare namespace Cypress {
  interface JQuery<HTMLElement> {
    rsChoose(text?, num?, all?): JQuery<HTMLElement>
  }
}

Also if you use Typescript I recommend you to add types to your parameters ;)

You can use each()to iterate through an array-like structure (arrays or objects with a length property). Something like:

cy.get('data-testid').each(($el, index, $list) => {
    //$el is the unique element
    //index starts with 0 and with each iteration its value increases by 1
    //$list contains the number of unique elements
})

In JavaScript you should do like this.

JS

setTimeout(function(){ 
    $("p").show(); // Content you want to show
 }, 1000); // Delay you want to add, here it's 1 sec.

I had the same issue. For some reason, in our other app doing angular update automatically deleted some code in test.ts, namely:

   const context = require.context('./', true, /\.spec\.ts$/);
   context.keys().forEach(context);

and the declaration of require above that.

I did that in my other app manually and so far it works. Maybe someone knows the reason for this change.