Cypress

I tried the following command on my Mac and it worked:

npx cypress open

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.

You may use .then(); quoting from the cypress documentation for .then():

.then() is modeled identically to the way Promises work in JavaScript. Whatever is returned from the callback function becomes the new subject and will flow into the next command (with the exception of undefined).

Try something like this:

var testArray: any[] = new Array();

cy
    .get('element')
    .each(($el) => {
        testArray.push($el.text());
        cy.log(testArray.toString());
    ).then(() => cy.log(testArray.toString())
});

    cy.get('your_button').then(($button) => {
        if(cy.get($button).should('not.be.disabled')){
            //your logical code for button ACTIVE
        }
        else{
            //your logical code for button NOT ACTIVE
        }
    })

Where is your page visit?

If it's here, it won't work

cy.visit(...)
cy.intercept('POST' , '*/api/Availability/*').as('availability') 
cy.wait('@availability').its('response.statusCode').should('eq', 200)

You need to set up the intercept before the app sends the api request.

cy.intercept('POST' , '*/api/Availability/*').as('availability') 
cy.visit(...)
cy.wait('@availability').its('response.statusCode').should('eq', 200)

Solution 1:

You can use the wrap() method which yields the object passed as a param if it resolves like so:

context('Travel Portal Regression Test', () => {
  beforeEach(() => {
    cy.fixture('travelData').then((data) => cy.wrap(data).as('getTravelData'));
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.get('@getTravelData').then((res) => cy.log(res.FIRSTNAME));
  });
});

Solution 2:

You can declare a variable called travelData on the upper scope of your test spec & reassign its value to data received from the json file like so:

context('Travel Portal Regression Test', () => {
  let travelData;

  beforeEach(() => {
    cy.fixture('travelData').then((data) => {
      travelData = data;
      return travelData;
    });
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.log(travelData.FIRSTNAME);
  });
});

Here it's the screenshot with the test results:

Try this:

cy.get('select option:contains(C)').should('not.exist')

To test the individual texts in the array of elements returned by .getMyCoolType(),

sportPage.getFirstCard().within(() => {
  sportPage.getSecondSection().within(() => {
    sportPage
      .getMyCoolType()
      .should('exist')
      .each(($item, $index) => {
        cy.wrap($item)
          .invoke('text')
          .then((text) => {
            cy.log($index.toString());
            cy.log(text);
            if ($index !== 0) {
              expect(text.trim()).to.equal('Yoga');
            }
          });
      })
  });
});

Or to test all items after the loop

sportPage.getFirstCard().within(() => {
  sportPage.getSecondSection().within(() => {
    sportPage
      .getMyCoolType()
      .should('exist')
      .each(($item, $index) => {
        cy.wrap($item)
          .invoke('text')
          .then((text) => {
            if ($index !== 0) values.push(text);
            cy.log($index.toString());
            cy.log(text);
          });
      })
      .then(() => expect(values.every(item => item === 'Yoga')).to.equal(true) );
  });
});

You might also get away with this

sportPage.getFirstCard().within(() => {
  sportPage.getSecondSection().within(() => {
    sportPage
      .getMyCoolType()
      .should('exist')
      .then(($items) => {
        const texts = [...$items].map(item => item.text()); // map elements into texts
        return texts.slice(1);                              // ignoring the first one
      })
      .then((items) => expect(items.every(item => item === 'Yoga')).to.equal(true) );
  });
});

I was able to solve this by

//cypress/support/index.js

Cypress.Server.defaults({
  ignore: xhr => {
    return Cypress.config().blockHosts.some(blockedHost =>  // get blockHosts from cypress.json using Cypress.config()
      Cypress.minimatch(new URL(xhr.url).host, blockedHost)  // if current url matches any blockedHost item, return true
    )
  }
})

more details on https://github.com/cypress-io/cypress/discussions/16536