100Days of Code Challenge

About the Community The Treehouse
,
22

Day 18 of 100daysofcode : Advanced Automation using Cypress

Here’s an advanced automation testing script using Cypress. The script tests key functionalities of a sample e-commerce website, such as logging in, searching for a product, adding it to the cart, and completing a checkout process.

Prerequisites

Ensure you have Cypress installed and set up. Run the following in your project folder:

npm install cypress --save-dev

Cypress Script

// cypress/e2e/ecommerce_advanced_test.cy.js

describe('E-Commerce Website - Advanced Automation Test', () => {
  const baseUrl = 'https://example-ecommerce.com'; // Replace with the actual website URL

  before(() => {
    cy.visit(baseUrl); // Navigate to the website
  });

  it('Logs in successfully', () => {
    cy.get('a[href="/login"]').click(); // Click on the Login link
    cy.get('input[name="email"]').type('testuser@example.com'); // Enter email
    cy.get('input[name="password"]').type('TestPassword123!'); // Enter password
    cy.get('button[type="submit"]').click(); // Submit login form

    // Assert successful login
    cy.get('.user-profile').should('contain', 'Welcome, Test User'); 
  });

  it('Searches for a product and adds it to the cart', () => {
    cy.get('input[placeholder="Search"]').type('Wireless Mouse{enter}'); // Search for a product
    cy.get('.product-list').should('contain', 'Wireless Mouse'); // Assert product appears

    // Select the product
    cy.get('.product-card').contains('Wireless Mouse').click();

    // Add the product to the cart
    cy.get('button').contains('Add to Cart').click();

    // Assert product is added to the cart
    cy.get('.cart-notification').should('contain', 'Wireless Mouse added to your cart');
  });

  it('Completes the checkout process', () => {
    cy.get('.cart-icon').click(); // Open the cart
    cy.get('button').contains('Proceed to Checkout').click(); // Proceed to checkout

    // Fill in shipping information
    cy.get('input[name="address"]').type('123 Cypress St, Test City, TX');
    cy.get('input[name="zip"]').type('12345');
    cy.get('input[name="phone"]').type('1234567890');

    // Choose payment method and complete the payment
    cy.get('input[name="payment"][value="credit-card"]').check();
    cy.get('input[name="card-number"]').type('4111111111111111');
    cy.get('input[name="expiry"]').type('12/25');
    cy.get('input[name="cvv"]').type('123');
    cy.get('button').contains('Place Order').click();

    // Assert order completion
    cy.get('.order-confirmation').should('contain', 'Thank you for your order');
  });

  after(() => {
    // Log out after tests
    cy.get('.user-menu').click();
    cy.get('a').contains('Logout').click();

    // Assert successful logout
    cy.get('a[href="/login"]').should('be.visible');
  });
});

Key Features of the Script:

  1. Modularized Tests: Each test case handles a specific functionality, making the script easier to debug and maintain.
  2. Dynamic Selectors: Uses robust and descriptive selectors to ensure test stability.
  3. Assertions: Verifies that each step is successful with should() assertions.
  4. Reusable Code: Leverages Cypress commands like cy.get() and chaining for efficiency.
  5. Complete Flow: Covers login, search, cart, checkout, and logout processes.

Run the Test

To execute the test, run the following command:

npx cypress open

From the Cypress Test Runner, select the ecommerce_advanced_test.cy.js file to run the test.
lebanon-mug