What is the difference between using `react-testing-library` and `cypress`?

You’ve answered your question in the first line. If you want to test your React app end-to-end, connected to APIs and deployed somewhere, you’d use Cypress. react-testing-library‘s aimed at a lower level of your app, making sure your components work as expected. With Cypress, your app might be deployed on an environment behind CDNs, using … Read more

Error trying to get attribute from element in Cypress

invoke() calls a jquery function on the element. To get the value of an input, use the function val(): cy.get(‘input’).invoke(‘val’).should(‘contain’, ‘mytext’) This is not the same as getting the value attribute which will not update with user input, it only presets the value when the element renders. To get an attribute, you can use the … Read more

How do you check the equality of the inner text of a element using cypress?

I think you can simplify this. Assuming you have HTML that looks like this: <div data-test-id=”Skywalker,Anakin”> <div class=”.channel-name”>Skywalker,Anakin</div> </div> You can write your assert like this: cy.get(‘[data-test-id=”Skywalker,Anakin”]’).should( “have.text”, “Skywalker,Anakin” ); This passed for me and if I modified the HTML to Skywalker,Anakin 1 it failed as you would expect. Cypress uses the have.text to look … Read more

Check if an error has been written to the console

This does exactly what I needed of catching any error in the console and do an assertion of the logs count. Just add the following in cypress/support/index.js Cypress.on(‘window:before:load’, (win) => { cy.spy(win.console, ‘error’); cy.spy(win.console, ‘warn’); }); afterEach(() => { cy.window().then((win) => { expect(win.console.error).to.have.callCount(0); expect(win.console.warn).to.have.callCount(0); }); });

How to wait for an element to be visible? [closed]

You can wait for the element to be visible like so: // Give this element 10 seconds to appear cy.get(‘[data-test=submitIsVisible]’, { timeout: 10000 }).should(‘be.visible’); According to Cypress’s Documentation: DOM based commands will automatically retry and wait for their corresponding elements to exist before failing. Cypress offers you many robust ways to query the DOM, all … Read more