How to use defaultPrefilter method in Cypress

I got the solution. There are 3 other iframes in the page and each iframe is inside a container. I intended to perform action on element insode the 2nd iframe and by default my code was trying to work on element in 1st iframe.

Cyress did not give the error about multiple iframes being found found. So it threw me off with the 0x0 pixel error. Following worked for me:

  cy.get('parentContainer').within(()=>{
        cy.get('iframeselector',{timeout: 150000})
        .its('0.contentDocument.body').should('not.be.empty')
        .then(cy.wrap).find('p').should('be.visible').clear().type('abc')
})

The cleanest way is using cy.each()

const order = ['130', '100' , '1']

cy.get('[data-object-type="playlists"]').each(($el, index) => {
  expect($el.attr('data-object-id')).to.eq(order[index])
})

where $el.attr('data-object-id') uses jQuery to extract the id attribute.

An equivalent using .invoke() would be

const order = ['130', '100' , '1']

cy.get('[data-object-type="playlists"]').each(($el, index) => {
  cy.wrap($el)
    .invoke('attr', 'data-object-id')
    .should('eq', order[index])
})

This has the advantage that .should() uses retry if the table is loaded asynchronously.

It is very difficult to test a situation where an action has not occured. With this type of assertion, you can really only say:

"The XHR request was not made within the 400ms that Cypress looked for this XHR request to have been made (or whatever you set your timeout to be)"

This doesn't really confirm that the XHR request was never called.

That being said, Cypress offers a way to retrieve all XHR requests made using the undocumented cy.state('requests'). You could check the length of that, filter them by alias, etc to probably determine what you want.

After a bit of investigating and help from the Auth0 team, I was successful in making this work.

Here is the code I used:

Cypress.Commands.add("login", () => {
  cy.clearLocalStorage();

  const email = "";
  const password = "";
  const client_id = "";
  const client_secret = "";
  const audience = "";
  const scope = "";

  cy.request({
    method: "POST",
    url: "",
    body: {
      grant_type: "password",
      username: email,
      password,
      audience,
      scope,
      client_id,
      client_secret,
    },
  }).then(({ body: { access_token, expires_in, id_token, token_type } }) => {
    cy.window().then((win) => {
      win.localStorage.setItem(
        `@@auth0spajs@@::${client_id}::${audience}::${scope}`,
        JSON.stringify({
          body: {
            client_id,
            access_token,
            id_token,
            scope,
            expires_in,
            token_type,
            decodedToken: {
              user: JSON.parse(
                Buffer.from(id_token.split(".")[1], "base64").toString("ascii")
              ),
            },
            audience,
          },
          expiresAt: Math.floor(Date.now() / 1000) + expires_in,
        })
      );
      cy.reload();
    });
  });
});

You have to make sure that the config you pass in is exactly the same as the config you use in the Auth0 Provider.

Once thing to note that tripped me up, was that I was also using refresh tokens. If this is the case make sure to add offline_access to your scope.

I have a public repo to download a working solution - https://github.com/charklewis/auth0-cypress.

The beforeEach() allows skipping.

Try this

  context("Conditional run", () => {
    let skip = false;
    before(() => {
        cy.get("div").then(($div) => {
            if (!Cypress.$("div[title='OK']", $comp).length) {
                skip = false
            } else {
                skip = true
            }
        });
    });

    beforeEach(function() {    // use regular function here
      if (skip) this.skip();
    })
  });

It might also work just putting the skip call in the before, since you want to skip all tests.

  context("Conditional run", () => {

    before(function() {    // use regular function here

        cy.get("div").then(function($div) {    // not sure if function is needed here
            if (Cypress.$("div[title='OK']", $comp).length) {
                this.skip();
            }
        });
    });
  });

Why don't you directly target the input field using the following code

cy.get('input[name="teacher[0].number"]').type('8000-1612023')

Please find the screenshot below for a successful test. I would also recommend you to change the type of input in your HTML to tel

HTML:

<input required="" type="tel" name="teacher[0].number" value="">

Cypress:

describe('Trial', function() {
  it('Test', function() {
    cy.visit('http://localhost:8080/trials/')
    cy.get('input[name="teacher[0].number"]').type('8000-1612023')
  })
});

Test Result:

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 generally want to set up the data so that each scenario is present in the table for different tests (one test per scenario). Then it's just a simple matter of asserting the disabled class, for example

Scenario 1

cy.contains('cbutton1').should('not.have.class', 'disabled')    
cy.contains('xbutton1').should('have.class', 'disabled')
...  // etc

I'm assuming that the presence of the disabled class is the key thing to test, seems logical.

You can also do this in a data-driven way if there's a lot of scenarios to handle.

I'm not sure the cy.contains('xbutton1') gets you where you need to go.

In your DOM, the first disabled element has <p>iris description!</p>. If this is the element that would show up in the table cell, then

cy.contains('iris description!').should('have.class', 'disabled')

would not work. You may have to navigate to the parent, like this

cy.contains('p', 'iris description!')   // more specific, grabs the <p>
  .parents('[class="hardwareCardRow"]') // get the parent row
  .find('[data-cy-id="cbutton1"]')      // go cell that should be disabled
  .should('have.class', 'disabled')     // assert it is disabled

Data-driven tests might look something like this

const scenarios = [
  { option: 'Option1', cellText: 'iris description!', disabledItem: 'cbutton1' },
  { option: 'Option2', cellText: 'lily description!', disabledItem: 'cbutton2' },
  // etc
}

scenarios.forEach(data => {
  
  it(`should be disabled, testing ${data.option}`, () => {  // back-ticks on description
                                                            // for template literal
    cy.contains('p', data.cellText)
      .parents('[class="hardwareCardRow"]') 
      .find(`[data-cy-id="${data.disabledItem}"]`) // back-ticks on the selector
      .should('have.class', 'disabled')    

  })
})

You can use should(callback) for checking the text when criteria is more complicated.

Using should() gives you retry and is preferred over .then().

cy.get('#accountType')
  .should($el => {
    const text = $el.text().toUpperCase()          // make sure case matches
    expect(['CHECKING', 'SAVINGS']).to.include(text)   
  })