Writing accurate and reliable tests using Cypress assertions
Posted on
When writing automated tests, it's not enough to just simulate user actions, verifying the outcomes of those actions is equally important. That's where Cypress assertions come in. They help ensure your application behaves the way it is supposed to by checking the expected results after a test step is performed.
In this blog, you'll learn how to use assertions in Cypress to write accurate and reliable tests.
What Are Assertions in Cypress?
Assertions are checks you write to confirm that an application is in the correct state during testing. Cypress uses the Chai assertion library along with jQuery and Sinon.js, making it easy to write fluent and readable checks.
Cypress offers two main types of assertions:
- Implicit Assertions : Built directly into Cypress commands
- Explicit Assertions : Written manually using .should() or .then()
Common Use Cases for Assertions
// Check if an element is visible cy.get('.success-message').should('be.visible'); // Check if an element contains specific text cy.get('h1').should('contain.text', 'Welcome'); // Validate input field value cy.get('input[name="email"]').should('have.value', 'test@example.com'); // Verify URL cy.url().should('include', '/dashboard'); // Assert API response status cy.request('/api/users').its('status').should('eq', 200);
Difference Between .should() and .then()
- .should() is used for assertions and automatically retries until the assertion passes or times out.
- .then() is used to access and work with resolved values but does not retry automatically.
// Retry until text is visible cy.get('.notification').should('contain', 'Saved successfully'); // Use then() for custom logic (no retry) cy.get('.user').then(($user) => { expect($user.text()).to.equal('John Doe'); });
Chaining Assertions
You can combine multiple checks using chaining:
cy.get('.btn') .should('be.visible') .and('have.class', 'primary') .and('not.be.disabled');
Tips for Writing Reliable Assertions
- Use data attributes for selecting elements instead of CSS or text content.
- Rely on automatic waiting : Cypress waits for commands to complete and DOM to stabilize.
- Use retry-friendly commands : Prefer .should() over .then() when possible.
- Avoid hard waits like cy.wait(5000) : Instead, wait for elements or API responses with assertions.
- Keep tests clean and focused : Assert one thing at a time in a test step.
Handling Flaky Assertions
Flaky tests are a nightmare. Cypress helps reduce flakiness by:
- Automatically waiting for elements
- Retrying assertions
- Detecting timing issues
Still, if you see flaky behavior:
- Use .should() for retry logic
- Make sure your app is not still rendering or fetching data
- Mock APIs using cy.intercept() to control test timing
Cypress assertions are your best tool to ensure that your application behaves as expected under test. By mastering them, you can write accurate, reliable, and flaky-free tests that give confidence in your application quality.
Whether you're testing a login form, a shopping cart, or an API response, the right assertions can save hours of debugging and help catch bugs early.