Step-by-Step Guide to Automation Framework with Cypress

Prerequisites

1. Node.js: Install Node.js (version 10 or higher) from the official website.

2. npm: Node Package Manager comes with Node.js.

Step 1: Setting Up Your Project

Begin by setting up a new project directory and installing Cypress. Initialize the project with npm and install Cypress as a development dependency.

1. Initialize a New Project: Create a new directory for your project and initialize it as an npm project.

bash

mkdir cypress-automation
cd cypress-automation
npm init -y        

2. Install Cypress:

Install Cypress as a dev dependency.

bash

npm install cypress --save-dev        

3. Open Cypress:

Open Cypress to generate the necessary files and folders.

bash

npx cypress open        

Step 2: Project Structure

Cypress will create the following structure:

cypress-automation/
├── cypress/
│   ├── fixtures/
│   ├── integration/
│   ├── plugins/
│   └── support/
├── node_modules/
├── cypress.json
├── package.json
└── package-lock.json        

• fixtures: Contains test data files.
• integration: Contains your test files.
• plugins: Contains plugins to extend Cypress functionality.
• support: Contains reusable utilities and custom commands.

Step 3: Configuration

Cypress automatically creates a structured directory for your tests. Configure Cypress in the cypress.json file, specifying the base URL and viewport settings.

Open cypress.json and add your configuration. For example:

json

{
  "baseUrl": "https://localhost:3000",
  "viewportWidth": 1280,
  "viewportHeight": 720,
  "video": false
}        

Step 4: Writing Tests

Create test files in the cypress/integration directory. For example, you can write tests to visit the homepage, search for a product, add it to the cart, and complete the checkout process.

1. Create a Test File:

Create a new test file in the "cypress/integration" directory, e.g., "ecommerce_test.js."

2. Write the Test Scenarios:

Here's an example with detailed test scenarios for an e-commerce application.

1. Visit the Homepage

javascript

describe('E-commerce Application', () => {
  it('Visits the Homepage', () => {
    cy.visit('/')
    cy.contains('Welcome to Our Store')
  })
})        

2. Search for a Product

javascript

describe('E-commerce Application', () => {
  it('Searches for a product', () => {
    cy.visit('/')
    cy.get('input[placeholder="Search for products"]').type('Laptop{enter}')
    cy.url().should('include', 'search?q=Laptop')
    cy.contains('Results for "Laptop"')
  })
})        

3. Add a Product to the Cart

javascript

describe('E-commerce Application', () => {
  it('Adds a product to the cart', () => {
    cy.visit('/')
    cy.get('input[placeholder="Search for products"]').type('Laptop{enter}')
    cy.contains('Add to Cart').first().click()
    cy.get('.cart-icon').click()
    cy.contains('Your Cart')
    cy.contains('Laptop')
  })
})        

4. Complete the Checkout Process

javascript

describe('E-commerce Application', () => {
  it('Completes the checkout process', () => {
    cy.visit('/')
    cy.get('input[placeholder="Search for products"]').type('Laptop{enter}')
    cy.contains('Add to Cart').first().click()
    cy.get('.cart-icon').click()
    cy.contains('Checkout').click()
    cy.get('input[name="firstName"]').type('John')
    cy.get('input[name="lastName"]').type('Doe')
    cy.get('input[name="address"]').type('123 Main St')
    cy.get('input[name="city"]').type('Anytown')
    cy.get('select[name="state"]').select('CA')
    cy.get('input[name="zip"]').type('12345')
    cy.get('input[name="cardNumber"]').type('4111111111111111')
    cy.get('input[name="expiry"]').type('12/25')
    cy.get('input[name="cvv"]').type('123')
    cy.contains('Place Order').click()
    cy.contains('Thank you for your purchase!')
  })
})        

Step 5: Organizing Tests

Organize your tests into different files and folders within the cypress/integration directory based on features or modules. For example:

cypress/
└── integration/
    ├── homepage/
    │   └── visit_homepage_spec.js
    ├── search/
    │   └── search_product_spec.js
    ├── cart/
    │   └── add_to_cart_spec.js
    └── checkout/
        └── checkout_process_spec.js        

Step 6: Custom Commands and Utilities

Enhance your tests with custom commands and fixtures. Create reusable commands in cypress/support/commands.js and store test data in JSON files within the cypress/fixtures directory.

javascript

// cypress/support/commands.js
Cypress.Commands.add('searchProduct', (productName) => {
  cy.get('input[placeholder="Search for products"]').type(`${productName}{enter}`)
})        

Use the custom command in your tests:

javascript

describe('E-commerce Application', () => {
  it('Searches for a product using custom command', () => {
    cy.visit('/')
    cy.searchProduct('Laptop')
    cy.url().should('include', 'search?q=Laptop')
    cy.contains('Results for "Laptop"')
  })
})        

Step 7: Using Fixtures for Test Data

Store your test data in JSON files inside the "cypress/fixtures" directory. For example, "user.json":

json

{
  "firstName": "John",
  "lastName": "Doe",
  "address": "123 Main St",
  "city": "Anytown",
  "state": "CA",
  "zip": "12345",
  "cardNumber": "4111111111111111",
  "expiry": "12/25",
  "cvv": "123"
}        

Use the fixture data in your tests:

javascript

describe('E-commerce Application', () => {
  beforeEach(() => {
    cy.fixture('user').then((user) => {
      this.user = user;
    })
  })

  it('Completes the checkout process using fixture data', function() {
    cy.visit('/')
    cy.searchProduct('Laptop')
    cy.contains('Add to Cart').first().click()
    cy.get('.cart-icon').click()
    cy.contains('Checkout').click()
    cy.get('input[name="firstName"]').type(this.user.firstName)
    cy.get('input[name="lastName"]').type(this.user.lastName)
    cy.get('input[name="address"]').type(this.user.address)
    cy.get('input[name="city"]').type(this.user.city)
    cy.get('select[name="state"]').select(this.user.state)
    cy.get('input[name="zip"]').type(this.user.zip)
    cy.get('input[name="cardNumber"]').type(this.user.cardNumber)
    cy.get('input[name="expiry"]').type(this.user.expiry)
    cy.get('input[name="cvv"]').type(this.user.cvv)
    cy.contains('Place Order').click()
    cy.contains('Thank you for your purchase!')
  })
})        

Step 8: Adding Plugins

Add plugins in cypress/plugins/index.js to extend Cypress functionality. For example, to use the cypress-file-upload plugin:

javascript

const fileUpload = require('cypress-file-upload');

module.exports = (on, config) => {
  // Register the file upload plugin
  fileUpload(on, config);
  return config;
};        

Step 9: Running Tests

Run your tests using the Cypress GUI for development and debugging or headless mode for continuous integration.

1. Run Tests in the Cypress GUI:

bash

npx cypress open        

2. Run Tests in Headless Mode:

bash

npx cypress run        

Step 10: Continuous Integration

Integrate your Cypress tests with a CI/CD pipeline to automate the testing process. Here's an example using GitHub Actions:

yaml

name: Cypress Tests

on: [push, pull_request]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Install dependencies
      run: npm install
    - name: Run Cypress tests
      run: npx cypress run        

Conclusion

By following these steps, we can set up a robust Cypress automation framework for a real-time e-commerce application. This guide covers project setup, writing detailed tests, organizing tests, using custom commands and fixtures, and integrating with CI/CD. As we develop our framework, we can add more advanced features and plugins to enhance our testing capabilities.

Continue exploring Cypress’s documentation and features to build more advanced and robust automation scripts. Happy testing!