Examples & Tutorials

Learn Cuppet Core through practical examples and step-by-step tutorials

🚀

Getting Started

🎯 Quick Start with Template Repository

The fastest way to get started is using the Cuppet Template Repository . It includes:

  • Complete project structure with examples
  • Pre-configured environments (dev, staging, production)
  • Ready-to-run test suites
  • GitHub Actions CI/CD workflows
  • Best practices and documentation
Use Template Repository Generate from Template
BEGINNER
Quick Start with Template Repository
Get up and running in minutes using the pre-configured template with examples and best practices.
  1. Create from Template: Use the template repository to create your project
    # Option 1: Clone directly
    git clone https://github.com/MiroslavRusev/cuppet.git my-test-project
    cd my-test-project
    
    # Option 2: Use GitHub template feature
    # Visit: https://github.com/MiroslavRusev/cuppet/generate
  2. Install Dependencies: Set up the project dependencies
    yarn install
  3. Explore the Structure: The template includes organized folders and examples
    project/
    ├── config/           # Environment configurations
    ├── features/
    │   ├── app/         # Custom components & step definitions
    │   └── tests/       # Your feature files
    ├── files/           # Test files for uploads
    ├── jsonFiles/       # Test data storage
    ├── reports/         # Test reports
    └── screenshots/     # Failure screenshots
  4. Run Example Tests: Execute the pre-configured test suite
    # Run all example tests in development environment
    yarn test exampleAll dev features/tests
    
    # Run specific feature file
    yarn test exampleAll dev features/tests/example.feature
  5. Customize for Your Project: Modify configurations and add your tests
    • Update `config/default.json` with your application URL
    • Add your feature files in `features/tests/`
    • Define custom selectors in `features/app/commonComponents/`
    • Add project-specific step definitions if needed

💡 Template Benefits

The template repository includes pre-configured examples for web testing, API testing, mobile testing, accessibility audits, and performance testing. It also includes GitHub Actions workflows for CI/CD integration.

BEGINNER
Manual Setup - Your First Test
Learn how to manually set up Cuppet Core from scratch and write your first web automation test.
  1. Install Cuppet Core: Add the package to your project
    yarn add @cuppet/core @cucumber/cucumber config
  2. Create Configuration: Set up your test configuration
    {
      "jsonFilePath": "jsonFiles/test-data.json",
      "screenshotsPath": "screenshots/",
      "credentials": {
        "baseUrl": "https://demoqa.com/"
      },
      "browserOptions": {
        "args": ["--no-sandbox"],
        "viewport": {
          "default": { "width": 1920, "height": 1080 }
        }
      }
    }
  3. Configure Cucumber: Set up Cucumber to use Cuppet Core step definitions
    module.exports = {
        default: {
            requireModule: ['@cuppet/core'],
            require: [
                'node_modules/@cuppet/core/features/app/stepDefinitions/*.js',
                'features/step-definitions/**/*.js'
            ],
            format: ['progress', 'json:reports/cucumber-report.json'],
            formatOptions: {
                snippetInterface: 'async-await'
            }
        }
    };
  4. Write Your First Feature: Create a simple test scenario
    Feature: First Test
      As a new user of Cuppet Core
      I want to test basic functionality
      So that I can understand how the framework works
    
      Scenario: Visit homepage and check title
        Given I go to "/"
        Then I should see "ToolsQA"
        And I should see the element with selector "h1"
  5. Run Your Test: Execute the test
    npx cucumber-js

💡 Pro Tip

Start with simple navigation and visibility tests before moving to complex interactions. This helps you understand the framework's capabilities.

🌐

Web Testing Examples

INTERMEDIATE
Complete Form Testing
Learn how to test complex forms with validations, dropdowns, and file uploads.
Feature: Form Testing
  
  Background:
    Given I go to "/automation-practice-form"

  Scenario: Fill complete student registration form
    When I fill in "#firstName" with "John"
    And I fill in "#lastName" with "Doe"
    And I fill in "#userEmail" with "john.doe@example.com"
    And I click on the text "Male"
    And I fill in "#userNumber" with "1234567890"
    And I select "Computer Science" from "#subjectsContainer"
    And I click on the text "Sports"
    And I upload the "sample.jpg" in "#uploadPicture" field
    And I fill in "#currentAddress" with "123 Main Street"
    And I select "NCR" from "#state"
    And I select "Delhi" from "#city"
    And I click on the element "#submit"
    Then I should see "Thanks for submitting the form"

  Scenario: Form validation testing
    When I click on the element "#submit"
    Then I should see the element with selector ".was-validated"
    And I should see "Please fill out this field"
{
  "jsonFilePath": "jsonFiles/form-data.json",
  "screenshotsPath": "screenshots/forms/",
  "credentials": {
    "baseUrl": "https://demoqa.com/"
  },
  "filePath": "test-files/",
  "browserOptions": {
    "args": ["--no-sandbox", "--disable-web-security"],
    "viewport": {
      "default": { "width": 1920, "height": 1080 }
    }
  }
}
BEGINNER
E-commerce Testing
Test product browsing, cart functionality, and checkout process.
Feature: E-commerce Testing

  Scenario: Add product to cart and checkout
    Given I go to "/books"
    When I click on the text "Git Pocket Guide"
    Then I should see "Git Pocket Guide"
    And I should see the element with selector "#addToCartBtn"
    When I click on the element "#addToCartBtn"
    Then I should see "Book added to your collection"
    
    When I go to "/profile"
    Then I should see "Git Pocket Guide" in "Books" region
    
    When I click on the text "Delete"
    And I click on the text "OK"
    Then I should not see "Git Pocket Guide"

  Scenario: Search functionality
    Given I go to "/books"
    When I fill in "#searchBox" with "JavaScript"
    And I press key "Enter"
    Then I should see "Learning JavaScript Design Patterns"
    And I should not see "Git Pocket Guide"
🌍

API Testing Examples

INTERMEDIATE
RESTful API Testing
Test REST API endpoints with authentication, data validation, and error handling.
Feature: API Testing

  Background:
    Given I have request body
    """
    {
      "userName": "testuser",
      "password": "Test@123"
    }
    """

  Scenario: User registration and authentication
    When I send a "POST" request to "/Account/v1/User"
    Then the response code should be "201"
    And the property "username" should be an "string"
    And I store "userID" to "userId" variable

  Scenario: Generate authentication token
    When I send a "POST" request to "/Account/v1/GenerateToken"
    Then the response code should be "200"
    And the property "token" should be an "string"
    And the property "status" should be an "string"
    And I store "token" to "authToken" variable

  Scenario: Get user information
    When I send a "GET" request to "/Account/v1/User/{userId}"
    Then the response code should be "200"
    And the property "userId" should be an "string"
    And the property "username" should be an "string"
    And the property "books" should be an "array"

  Scenario: Add books to user collection
    Given I have request body
    """
    {
      "userId": "{userId}",
      "collectionOfIsbns": [
        {
          "isbn": "9781449325862"
        }
      ]
    }
    """
    When I send a "POST" request to "/BookStore/v1/Books"
    Then the response code should be "201"
{
  "jsonFilePath": "jsonFiles/api-data.json",
  "api": {
    "baseApiUrl": "https://bookstore.toolsqa.com/",
    "x-api-key": "your-api-key-here"
  },
  "basicAuth": {
    "authUser": "testuser",
    "authPass": "Test@123"
  }
}
📱

Mobile Testing Examples

ADVANCED
Android App Testing
Test native Android applications using Appium integration.
Feature: Mobile App Testing

  Scenario: Launch calculator app and perform calculation
    Given I go to "com.android.calculator2" app package and ".Calculator" activity
    Then I click on the element "id:digit_2" on mobile
    And I click on the element "id:op_add" on mobile
    And I click on the element "id:digit_3" on mobile
    And I click on the element "id:eq" on mobile
    Then I should see "5" on mobile
    
  Scenario: Test settings app navigation
    Given I go to "com.android.settings" app package and ".Settings" activity
    When I scroll to the element "text:About phone" on mobile
    And I click on the element "text:About phone" on mobile
    Then I should see "Android version" on mobile
{
  "jsonFilePath": "jsonFiles/mobile-data.json",
  "screenshotsPath": "screenshots/mobile/",
  "appiumCapabilities": {
    "platformName": "Android",
    "appium:automationName": "UiAutomator2",
    "appium:deviceName": "Android",
    "appium:platformVersion": "11",
    "appium:disableIdLocatorAutocompletion": true,
    "appium:newCommandTimeout": 60,
    "appium:connectHardwareKeyboard": true
  }
}

⚠️ Prerequisites for Mobile Testing

Make sure you have Android SDK, Appium Server, and a connected device or emulator before running mobile tests.

🔧

Advanced Features

ADVANCED
Accessibility & Performance Testing
Combine accessibility testing with performance audits for comprehensive quality assurance.
Feature: Quality Assurance Testing

  Background:
    Given I go to "/"
    And I save the path of the current page

  Scenario: Accessibility audit
    When I validate the saved page accessibility
    Then I should see "Accessibility report generated"

  Scenario: Performance audit
    Given I generate lighthouse report for the saved page
    Then I should see "Performance report generated"

  Scenario: Visual regression testing
    Given I generate reference screenshot for "/"
    When I go to "/"
    Then I compare "/" to reference screenshot

  Scenario: Complete quality check
    Given I go to "/forms/dynamic-form"
    When I save the path of the current page
    And I validate the saved page accessibility
    And I generate lighthouse report for the saved page
    And I generate reference screenshot for "/forms/dynamic-form"
    Then I should see "Quality audit completed"
{
  "jsonFilePath": "jsonFiles/quality-data.json",
  "screenshotsPath": "screenshots/quality/",
  "credentials": {
    "baseUrl": "https://demoqa.com/"
  },
  "browserOptions": {
    "args": ["--no-sandbox", "--disable-web-security"],
    "viewport": {
      "backstop": { "width": 1600, "height": 900 }
    }
  },
  "pa11yConfig": {
    "hideElements": ".advertisement",
    "standard": "WCAG2AA",
    "runners": ["axe", "htmlcs"]
  }
}
INTERMEDIATE
Data-Driven Testing
Use variables and JSON data storage for flexible, reusable test scenarios.
Feature: Data-Driven Testing

  Background:
    Given I clear the json file
    And I store "John Doe" in "testUser" variable
    And I store "john.doe@example.com" in "testEmail" variable

  Scenario: User registration with stored data
    Given I go to "/register"
    When I fill in "#firstName" with "{testUser}" variable from JSON
    And I fill in "#email" with "{testEmail}" variable from JSON
    And I store the entity id with variable name "userId" to the json file
    Then I should see "{testUser}" from json in element "#welcomeMessage"

  Scenario Outline: Multiple user registration
    Given I go to "/register"
    When I fill in "#firstName" with "{firstName}"
    And I fill in "#lastName" with "{lastName}"
    And I fill in "#email" with "{email}"
    And I click on the element "#register"
    Then I should see "Registration successful"
    
    Examples:
      | firstName | lastName | email                |
      | John      | Doe      | john.doe@test.com    |
      | Jane      | Smith    | jane.smith@test.com  |
      | Bob       | Johnson  | bob.johnson@test.com |
    

🎯 Complete Demo Projects & Templates

Ready-to-run projects demonstrating real-world testing scenarios:

🚀 Complete Template Repository E-commerce Testing Suite API Testing Examples Mobile App Testing

💡 New to Cuppet? Start with the Template Repository for the fastest setup with pre-configured examples, environments, and CI/CD workflows.

💡

Best Practices

🏗️ Project Structure

project/
├── config/
│   ├── default.json
│   ├── development.json
│   └── production.json
├── features/
│   ├── step-definitions/
│   │   └── custom-steps.js
│   └── tests/
│       ├── web-tests.feature
│       ├── api-tests.feature
│       └── mobile-tests.feature
├── test-files/
│   └── sample-upload.jpg
├── jsonFiles/
├── screenshots/
├── reports/
├── cucumber.js
└── package.json

📝 Writing Maintainable Tests

  • Use descriptive scenario names and step descriptions
  • Keep scenarios focused on single features or user flows
  • Use Background sections for common setup steps
  • Leverage data tables and scenario outlines for test variations
  • Use variables and JSON storage for dynamic data

🔧 Configuration Management

  • Separate configurations for different environments
  • Use environment variables for sensitive data
  • Keep base URLs and common selectors in configuration
  • Document all configuration options for team members