Cypress Testing Best Practices and Tips for Assertions Techniques

Cypress Testing Best Practices and Tips for Assertions Techniques

“Cypress Testing – Assertions Techniques Best Practices and Tips” focuses on enhancing the efficiency and effectiveness of test assertions in Cypress, a popular JavaScript end-to-end testing framework.

Cypress testing plays a crucial role in ensuring the reliability and correctness of web application tests. Developers and testers use these to validate expected outcomes, allowing them to assert conditions about the application’s state during test execution. Automation Testing.

We can summarise the key features of Assertions in Cypress Testing as:

  • Rich Assertions: Comprehensive checks for element properties (existence, visibility, text content, attributes).  
  • Seamless Integration: Assertions smoothly blend into test syntax, improving readability and maintenance.  
  • Automatic Retry: Robust handling of asynchronous tasks, minimizing test flakiness. 
  • Expressive Tests: Empowers developers to create clear, comprehensive, and efficient tests, boosting confidence in the testing process. 

Assertions in Cypress Testing:

Verify that an element exists in the DOM:

Syntax: .should(‘exist’)

Example:

Verify that an element does not exist in the DOM:

Syntax: .should(‘ not.exist ‘) 

Example:

Verify that an element is visible/Not Visible:

Syntax: .should(‘be.visible ‘)  .should(‘not.be.visible ‘) 

Example:

Verify that an element is hidden:

Syntax: .should(‘be.hidden) 

Example:

Verify that an element has the expected value that the user has entered in the textbox: 

Syntax: .should(‘have.value’, ‘expectedValue’)  

Example:

Verify that a string includes the expected substring:

Syntax: .should(‘include’, ‘expectedSubstring’)

Example:

Verify that a string matches a regular expression pattern:

Syntax: .should(‘match’, /regexPattern/) 

Example:

Verify the length of an array or the number of elements matched:

Syntax: .should(‘have.length’, expectedLength) 

Example:

Verify if the element is focused: 

Syntax: .should(‘have.focus’)
.should(‘be.focused’)

Example:

Verify the title of the page: 

Syntax: .title().should(‘include’, ‘Example Domain’)  

Example:

Verify the URL:

Syntax: .url().should(‘eq’, ‘https://www.spurqlabs.com’);  

Example:

Verify multiple assertions at a time: 

Example:

Property Assertion in Cypress Testing

Verify that an element has the expected attribute value:

Syntax: .should(‘have.attr’, ‘attributeName’, ‘expectedValue’) 

Example:

Verify that an element has a specific CSS property with the expected value:

Syntax: .should(‘have.css’, propertyName, Value) 

Example:

Verify that an element has the expected text content:

Syntax: .should(‘have.text’, expectedText) 

Example:

Verify that an input element has the expected value:

Syntax: .should(‘have.value’, expectedValue )  

Example:

Verify that a given value is NaN, or “not a number”:

Syntax: .should(‘be.a.NaN’) 

Example:

Verify an element or collection of elements is empty: 

Syntax: .should(‘be.empty’) 
   .should(‘not.be.empty’) 

Example:

Verify if a checkbox or radio button is checked:

Syntax: .should(‘be.checked’) 

Example:

Verify if a checkbox or radio button is not checked:

Syntax: .should(‘not.be.checked’) 

Example:

Verify if it is an array:

Syntax: .should(‘be.an’,’array’)

Example:

Verify if an object has specific keys:

Syntax: .should(‘have.keys’,[‘id’,’name’,’email’])

Example:

Verify if a value is one of a specific set of values:

Syntax: .should(‘be.oneOf’,[‘value1′,’value2′,’value3’])

Example:

Verify that a numeric value is within a certain range of another value:

Syntax: .should(‘be.closeTo’, expectedValue, delta)) 
      .should(‘be.within’, Start range, End range);

Example:

Verify Object assertion: 

Syntax: .should(‘have.property’, ‘propertyName’,’actualPropertyValue’)

Example:

Check is() block Assertions:

In the context of Cypress Testing, the .is() block typically utilizes conditions that check various states or attributes of an element. Here are some examples of selectors and conditions you might use inside the .is() block: 

  • Check if an element is visible:
  • Check if a button or input is enabled:
  • Check if an input field is readonly:
  • Check if an element contains specific text:
  • Check if an element has a specific attribute value:
  • Create custom conditions based on your specific requirements:

Conclusion:

Cypress Testing with its rich set of functionalities and integration benefits, empowers developers to create expressive and comprehensive tests. The combination of these features fosters a more efficient and confident testing process, ultimately contributing to the overall reliability of web applications.