How to use getElementsForSelector method in Cypress

I've encountered this issue myself and we've tried many different things at work on our app. Even though it's something which needs to be adapted, we're quite happy with our current solution.

But before I get to the solution, let me explain why this is a hard problem to solve without simply having a long wait before we start testing.

First of all, we need to wait for our page to be ready. Luckily for us, Cypress does that for us.

Then, we could wait for Angular to be bootstraped. One way of being aware of that is by checking if getAllAngularRootElements is available on the window object. And yes this function is apparently there even in prod mode!

  cy.window()
    .its('getAllAngularRootElements' as any)
    .should('exist');

But this isn't a perfect solution especially if... You use lazy loading.

Just because Angular bootstraped your app doesn't mean all your lazy modules are loaded! And this is where it gets really unlikely to find an automatic way of waiting for exactly what you want to be ready.

So how do we start testing as soon as we can and in a safe way? In my opinion the best option to do so is to have a check after every cy.visit call and wait for one element around what you're about to test, to exist. Example:

cy.visit(`some-page`);

cy.get(
  '.some-class-around-what-I-want-to-test',
  { timeout: 15000 }
).should('exist');

// ... rest of the test goes here

The code above will load the page, wait for the element you're targetting to exist for a maximum of 15 seconds but the important thing to note is that as soon as this element is available, it'll consider that check successful and move on. So if your app takes 2 seconds to display that element, your tests will starts straight after!

If you want to make it less repetitive for all your tests, you can create a function to open a given page and wait for its content to be there before doing something else. Example:

// at the top of the test file
const openProfilePage = () => {
  cy.visit('profile');
  cy.get(
    '.profile',
    { timeout: 15000 }
  ).should('exist');
}

// in every tests after or in a before each
openProfilePage();

// test something else

The text that you are getting is in string, you have to convert in into a Number (using parseInt) if you want to compare the two. And you can use this to access myAlias (As, under the hood, aliasing basic objects and primitives utilizes Mocha’s shared context object: that is, aliases are available as this.*)

cy.get('[data-cy=AmountAll]', {
    timeout: 15000
}).invoke('text').then((text) => {
    const amountAllBefore = parseInt(text.replace(/\D/g, '')) //this will only work if text.replace(/\D/g, '') returns a number but is string
    cy.wrap(amountAllBefore).as('myAlias')
})

cy.get('[data-cy=AmountAll]', {
    timeout: 15000
}).invoke('text').then((text) => {
    const amountAllAfter = = parseInt(text.replace(/\D/g, '')) //this will only work if text.replace(/\D/g, '') returns a number but is string
    expect(this.myAlias).to.be.greaterThan(amountAllAfter)
})

Shallow rendering (which you are using for your current tests) only renders one level deep. This means that you won't be able to simulate the render() method or the behaviour of child components using the shallow renderer. See the documentation here for more info.

If you want to effectively unit test this code example, you shouldn't try and simulate its child behaviour. Instead, you should test the <Parent /> and <Child /> separately. This prevents changes in your Child component affecting the test results in your Parent component, or vice versa. This is pretty much the whole reason the shallow renderer exists! From the documentation:

Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behaviour of child components.

I would write this test for the child component, using a mock function for its onChildClick prop:

test('triggers its onChildClick prop when clicked', () => {
    const mock = jest.fn()
    const wrapper = shallow(<Child onChildClick={mock} />)
    wrapper.find('.toggle').simulate('click')
    expect(mock).toHaveBeenCalledTimes(1)
})

And I would write this test for the parent, passing in the data to ensure the child is rendered:

test('sets its state when its child is clicked', (done) => {
    const wrapper = shallow(<App data={{ test: 'test' }}/>)
    expect(wrapper.state('enable')).toBe(false)

    wrapper.find('Child').props().onChildClick()
    expect(wrapper.state('enable')).toBe(true)
})

Just tried both of these tests and they work fine. I'm testing the full functionality of the components here, except the process is separated into units. The child triggers its onChildClick prop when the button is clicked, and triggering that prop inside the parent sets the state of enable to true.

Full-DOM rendering (with mount(<Parent />))is a lot more messy, and I only really find it useful for testing components that use DOM apis (which shouldn't happen much in React anyway). Have a look at the documentation again for a fuller explanation!

If you want to test larger-scale features of your app (which it looks like you do), I'd suggest using an end-to-end testing framework like Cypress.

Also, one last thing... you're using wrapper.find('toggle'), but if you want to find a node by its className, then you need to do wrapper.find('.toggle') instead.

Hope this helps!

If I make a minimal example app + test, it follows the rules you quoted above.

Test

it('overrides the intercept stub', () => {

  cy.visit('../app/intercept-override.html')
  
  cy.intercept('GET', 'someUrl', { statusCode: 200 })

  cy.get('button').click()

  cy.get('div')
    .invoke('text')
    .should('eq', '200')                               // passes

  cy.intercept('GET', 'someUrl', { statusCode: 404 })

  cy.get('button').click()

  cy.get('div')
    .invoke('text')
    .should('eq', '404')                               // passes
})

App

<button onclick="clicked()">Click</button>
<div>Result</div>
<script>
  function clicked() {
    fetch('someUrl').then(response => {
      const div = document.querySelector('div')
      div.innerText = response.status
    })
  }
</script>

So, what's different in your app?

Test revised according to comments

Main points that break the test

• unique aliases are needed
• the string-based url (2nd test) requires minimatch wildcard prefix ** to work

beforeEach(() => {
  cy.intercept('GET', /api\/test-id\/\d+/, { statusCode: 200 })
    .as('myalias1')
  cy.visit('../app/intercept-overide.html')
})

it('sees the intercept stub status 200', () => {
  cy.get('button').click()
  cy.wait('@myalias1')
  cy.get('div')
    .invoke('text')
    .should('eq', '200')
})

it('sees the intercept stub status 404', () => {
  cy.intercept('GET', '**/api/test-id/1', { statusCode: 404 })
    .as('myalias2')

  cy.get('button').click()
  cy.wait('@myalias2')
  cy.get('div')
    .invoke('text')
    .should('eq', '404')
})

App

<button onclick="clicked()">Click</button>
<div>Result</div>
<script>
  function clicked() {
    fetch('/api/test-id/1').then(response => { 
      // logs as "http://localhost:53845/api/test-id/1" in the Cypress test runner
      const div = document.querySelector('div')
      div.innerText = response.status
    })
  }
</script>

Minimatch

The 2nd intercept uses a string which will match using minimatch. Use this code to check the intercept will work with your app's URL

Cypress.minimatch(<full-url-from-app>, <url-in-intercept>)  // true if matching 

Eventually was able to implement solution for Chrome, thanks to: https://github.com/cypress-io/cypress/issues/6991

This solution worked for me with little adjustments

I found a useful setting to resolve this - followRedirect can be set to false to capture the 302 and fragment data.

Documentation link: https://docs.cypress.io/api/commands/request.html#Options

Eg:

cy.request({
  url: '/dashboard',
  followRedirect: false // turn off following redirects
})
  .then((resp) => {
    // redirect status code is 302
    expect(resp.status).to.eq(302)
    expect(resp.redirectedToUrl).to.eq('http://localhost:8082/unauthorized')
  })

cy.task() needs to use .then() to get the value, like this example.

cy.task("connectDB", "select user_id from user_details where first_name='XYZ'")
  .then(user_id => {
    cy.request({
      method: 'DELETE',
      url: 'localhost:8080/user/' + user_id
    }).then((res) => {
      expect(res.status).to.eq(200)                // passes
    })
  })

If you try to assign the return to a variable let user_id = cy.task("connectDB"... you will get a chainer object, but it's not much use without a .then() to extract the value.

You need to .restore() the first stub in order to use it again, other than that the code is fine.

cy.fixture('create-delete-group').then(gr => {

  for (let i = 0; i < gr.length; i++) {
    cy.window().then((win) => {
      const stub = cy.stub(win, 'prompt')      // save stub reference
        .returns(gr[i].groupNames)
      groupManaPage.elements.btnCreateGroup().click()

      cy.on('window:alert', (str) => {
        expect(str).to.equal('New group has been created successful!')

        stub.restore()                         // remove stub
      })
    
    })
  }
})

I might try this:

cy.get(".ibxudA").find('.WildnessText-kRKTej').should('have.text',"Wildness")

or

cy.get(".ibxudA").find('.WildnessText-kRKTej').invoke('text').then((text) => {
    expect(text.trim()).equal('Wildness')
});

This might be a similar question: How do you check the equality of the inner text of a element using cypress?