Cypress GraphQL End to End Automation Framework Boilerplate

Cypress isn’t just for UI testing; it’s also a robust tool for API testing, whether your backend uses REST or GraphQL.

Imagine you’re developing an application with a backend service that requires validation of CRUD operations (Create, Read, Update, Delete). Instead of turning to separate tools or software for backend validation, you can employ Cypress for this purpose.

In your testing suite, there might be a file named API-Testing.spec.js. Within this file, you've scripted test cases designed to execute CRUD operations through network requests. Each test sends a request and then verifies the response, ensuring the backend behaves as expected.

Here’s what each test might encompass:

• Create ©: Dispatch a request to introduce a new record, then verify through the response that it was added accurately.
• Read (R): Retrieve data for a specific record and ascertain that the data matches expectations.
• Update (U): Modify a record’s data, and then inspect the response to ensure the update took effect correctly.
• Delete (D): Erase a record and confirm via the response that it was successfully removed.

For backends using GraphQL, the testing approach remains consistent. However, you’d be dispatching GraphQL queries and mutations and then examining the results.

End to End Boilerplate Plate for GraphQL

Setup a project

Setting up Cypress for end-to-end testing is straightforward. Here’s a detailed step-by-step guide on how to set up the Cypress framework:

Prerequisites: Nodejs, NPM, Cypress and Graphql APIs

Installation Step:

1. Clone this repository (https://github.com/Nitpathak/cypressGraphqlDemo)
2. Navigate to the Repository: Once cloned, open your terminal or command prompt and move to the repository directory.
3. Initialise a New NPM Package: Run the command npm init to set up your npm package.
4. Install Cypress: Get Cypress up and running with npm install cypress — save -dev.

Design Pattern for this Project: The boilerplate uses the Page Object Model (POM) design pattern. POM helps in making the code more readable, maintainable, and reusable.

Test Execution: You can execute your tests in two ways:

1. Terminal: Run the command npm run cypress:run to execute the tests in headless mode.
2. Cypress Test Runner:

• Use the command npm run cypress:open.
• Inside the Cypress Test Runner:
• Choose E2E Testing.
• Pick a browser: Either Chrome or Electron.
• Click on Start E2E Testing in {your chosen browser}.

Reporting: The boilerplate uses Mochawesome to generate elegant HTML test reports.

1. Installation: To set this up, install the necessary dependencies with npm i cypress-mochawesome-reporter.
2. Configuration: Update the configuration file
3. Add to cypress/support/e2e.js :import ‘cypress-mochawesome-reporter/register’;

Github Integration: With the provided .github/workflows/main.yml, this boilerplate ensures:

1. Dependencies remain up-to-date.
2. Tests are consistently run using the latest dependencies.