21 May 2024 Leave a comment Tech-Help
When writing tests in Cypress, developers often need to assert whether an element exists. This can be done in two ways:
cy.get('button').contains('Save')cy.get('button').contains('Save').should('exist')
Both methods will cause the test to fail if the ‘Save’ button does not exist. This raises the question: is the .should('exist') assertion redundant?
Analyzing the Use of .should('exist')
For the specific use case of asserting whether an element exists, the .should('exist') assertion is indeed redundant. The .contains() function yields a DOM element, and according to the documentation, .should() yields the same element it was given as input. In this scenario, using .should('exist') does not add any additional validation.
Readability and Maintainability
However, adding .should('exist') can improve code readability and maintainability. It makes the intent of the test clearer to someone reading the code. Additionally, a more meaningful assertion like .should('be.visible') can be used. This is particularly useful in scenarios where an element might be hidden or pushed out of view due to CSS issues.
Practical Example
Consider the following example:
cy.get('button').contains('Save'); // Passes test
cy.get('button').contains('Save').should('exist'); // Passes test
cy.get('button').contains('Save').should('be.visible'); // Fails test if element is not visible
In this case, the first two lines will pass the test if the ‘Save’ button exists, regardless of its visibility. The third line will fail if the button is not visible, providing a more user-centric validation.
Additional Considerations
It’s important to note that until Cypress v4.0, chaining .should('exist') is necessary if you are chaining negative assertions. This is because the default .should('exist') assertion is skipped when chaining custom assertions.
For instance:
describe('test', () => {
it('test', () => {
cy.get('.first-item').should('not.have.class', 'is-selected'); // Passes even if .first-item does not exist
});
});
In this example, the element .first-item does not exist, but the assertion passes. Therefore, adding .should('exist') ensures the element’s presence before applying further assertions.
Conclusion
While .should('exist') can be seen as redundant for basic existence checks, it enhances readability and maintainability of your tests. Additionally, using assertions like .should('be.visible') can provide more meaningful validations from a user’s perspective.
Enhancing Your Test Automation with Repeato
For those looking to streamline their test automation further, consider using Repeato. Repeato is a no-code test automation tool for iOS and Android that helps you create, run, and maintain automated tests for your apps. Its intuitive test recorder and scripting interface make it particularly fast to edit and run tests. Repeato’s approach, based on computer vision and AI, ensures robust and reliable test results.
Moreover, Repeato already supports testing websites inside an Android emulator or device, with explicit web testing support coming later this summer. This makes it an excellent choice for comprehensive test automation.
For more detailed information, visit our documentation or check out our download page.
