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
-
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
-
Install Dependencies:
Set up the project dependencies
yarn install
-
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
-
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
-
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.
-
Install Cuppet Core:
Add the package to your project
yarn add @cuppet/core @cucumber/cucumber config
-
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 } } } }
-
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' } } };
-
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"
-
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
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 }
}
}
}
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
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
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
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"]
}
}
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:
💡 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