CYPRESS automate testing

What is Cypress?

Cypress is a JavaScript-based framework for end-to-end testing. It’s built on top of Mocha and runs in the browser, enabling asynchronous testing. According to the Cypress docs, Cypress can help you write integration tests and unit tests in addition to end-to-end tests.

Cypress includes the following features:

• Time travel: Cypress takes snapshots as your tests run
• Debugging: Readable errors and stack traces make debugging easier
• Automatic waiting: Automatically waits for commands and assertions before moving on
• Spies, stubs, and clocks: Verify and control the behavior of functions, server responses, or timers
• Network Traffic Control: Control, stub, and test edge cases without involving the server
• Screenshots and videos: View screenshots were taken automatically on failure, or videos of your entire test suite when run from the CLI
• Cross-browser Testing: Run tests within Firefox and Chrome-family browsers (including Edge and Electron) locally.

How to write a real test?

1. Set up the application state.
2. Take an action.
3. Make an assertion about the resulting application state.

You might also see this phrased as “Given, When, Then”, or “Arrange, Act, Assert”. But the idea is: First you put the application into a specific state, then you take some action in the application that causes it to change, and finally you check the resulting application state.

Today, we’ll take a narrow view of these steps and map them cleanly to Cypress commands:

1. Visit a web page.
2. Query for an element.
3. Interact with that element.
4. Assert about the content on the page.

How to write a real test?

Structure of testing

• Before you start writing test cases, you must add them into a describe function.
• In this scenario beforeEach( ) function is work before every it functions. it means, reloads the page with every test case.
• You can add your test cases in the it( ) function.
• You can use visit( ) function to route any URL .

how to use cy.get() function

• You can use get( ) function for detect elements in web page. get function required a string parameter of elements unique key. you can use element ID , class or data-cy key as an element's unique key. And also you must Be careful element’s key is unique for the whole web page.

Adding Data-cy Attributes for Cypress Testing

Hints for Adding Data-cy Attributes for Cypress Testing

<Button data-cy={'<page_name>-<which_area>-<type_of_element>'}>
cy.get('[data-cy = page-area-eliment]')

Normally you can create your data-cy key like above.

Page Object Pattern in Cypress

Designing an effective test automation framework is an art. Moreover, it needs viewing with different lenses like avoiding code duplication, maintainability, and improved readability of code. Various design patterns got designed and developed to standardize these aspects of software development. One of the essential design patterns is the “Page Object Pattern.” Moreover, Cypress also provides the flexibility to implement this pattern while developing an automation framework using Cypress.

What is the Page Object Design Pattern?

Page Object Model is a design pattern in the automation world that has been famous for its test maintenance approach and avoiding code duplication. A page object is a class that represents a page in the web application. Under this model, the overall web application breaks down into logical pages. Each page of the web application generally corresponds to one class in the page object, but can even map to multiple classes also, depending on the classification of the pages. This Page class will contain all the locators of the WebElements of that web page and will also contain methods that can perform operations on those WebElements.

◘ general_helper.ts 
class GeneralHelper {
/**
* @param locator: string
* @param content: string
*
* This function will test if content visible and verify its text
*/
static isVisibleAndHasCorrectContent(locator: string, content: string) {
cy.get(locator).should('be.visible');
cy.get(locator).should('have.text', content);
}
}
export default GeneralHelper;

we can use this type of helper class to create our test cases. This stops the redundancy of the code and makes it easier to reuse.

We can use this class like below,

import GeneralHelper from './general_helper';
GeneralHelper.isVisibleAndHasCorrectContent(tableHeaderStatusLocator, tableHeaderStatusText);

Wait for GQL query

we can pass any query type to hasOwnProperty( ) function.

Wait for needed GQL query (With endpoint name)

In here, you can pass endpoint name into includes ( ) function and you can wait for your needed endponit.

Wait for the needed GQL query and get attributes from the response object

here we can wait needed endpoint and catch a response object. After that, we can expand object according to react syntax.

Check if element exists or not