@visi-aiq/aiq-playwright-ts

Overview

Visionet Test Automation Framework using Playwright TypeScript with Cucumber BDD - integrated with Web & API testing plus comprehensive Accessibility Testing with WCAG compliance and advanced reporting.

This comprehensive testing framework provides a robust solution for both web and API automation testing with advanced features like parallel execution across multiple browsers, intelligent healing capabilities, AI-powered enhancements, and industry-leading accessibility testing.

🚀 Features

Core Features

• 🎭 Playwright Integration: Modern browser automation with Chrome, Firefox, Edge, and WebKit support
• 🥒 Cucumber BDD: Behavior-driven development with Gherkin syntax
• 📊 Comprehensive Reporting: Allure reports with screenshots, traces, and detailed test results
• 🔄 Parallel Execution: Multi-browser parallel testing with intelligent thread management
• 🌐 Multi-Browser Support: Real browser testing (Chrome, Edge) and cross-browser compatibility
• 🔧 Auto-Healing: Self-healing test capabilities with intelligent element detection

♿ Accessibility Testing (NEW!)

• 🎯 WCAG Compliance: Automated WCAG 2.0, 2.1, 2.2 Level A, AA, AAA testing
• 📋 Section 508: US Federal accessibility compliance validation
• ⚡ axe-core Integration: Industry-standard accessibility engine
• 📈 Comprehensive Reports: Detailed HTML reports with violations, passes, and manual testing requirements
• 🔍 Element-Level Testing: Granular accessibility testing for specific page elements
• 🎨 Impact-Based Analysis: Critical, serious, moderate, and minor issue categorization
• 📎 Allure Integration: Separate attachments for violations, passes, and incomplete tests

API Testing

• 🔌 REST API Testing: Complete API testing suite with request/response validation
• 📝 Dynamic Payloads: Support for random data generation and runtime variables
• 🔍 JSON Path Validation: Advanced JSON response validation
• 📋 Visual API Reports: In-browser API details with toast notifications

Advanced Capabilities

• 🤖 AI Integration: GEN-AI powered test enhancements
• 📈 Trend Analysis: Execution trend tracking and flakiness detection
• 🎯 Smart Selectors: Auto-selector capture and optimization
• 💾 Runtime Data Management: Dynamic data handling and storage

📦 Installation

npm install @visi-aiq/aiq-playwright-ts

🏗️ Project Structure

├── features/              # Cucumber feature files
├── stepdef/              # Step definitions
├── service/              # Service layer (API, Web)
├── utils/                # Utility classes
├── helper/               # Helper classes
├── data/                 # Test data and generators
├── elements/             # Page object elements
├── workspace/
│   ├── config/           # Configuration files
│   ├── reports/          # Test reports
│   └── selectors/        # Element selectors
├── allure-results/       # Allure test results
└── allure-report/        # Generated Allure reports

⚙️ Configuration

Browser Configuration (workspace/config/config.properties)

# Browser Settings
BrowserName=chrome
Thread1=chrome     # Chromium browser
Thread2=firefox    # Firefox browser  
Thread3=edge       # Real Edge browser
Thread4=webkit     # WebKit/Safari browser

# Application Settings
AutomationType=WEB
BaseURI=https://your-api-base-url.com
AutomationExercise=https://www.automationexercise.com/

# Framework Settings
SealHeal=true
LocatorFolder=AutomationExercise

Cucumber Configuration (cucumber.json)

{
    "default": {
        "requireModule": ["ts-node/register"],
        "require": ["stepdef/**/*.ts", "support/**/*.ts"],
        "paths": ["features/**/*.feature"],
        "format": [
            "progress",
            "json:reports/cucumber-report.json",
            "html:reports/cucumber-report.html",
            "allure-cucumberjs/reporter"
        ],
        "formatOptions": {
            "resultsDir": "allure-results",
            "parallel": true
        },
        "parallel": 4,
        "tags": "@YourTag"
    }
}

🚀 Quick Start

1. Basic Web Test

Feature: Web Automation Example
  @WebTest
  Scenario: Login to application
    Given User navigate to "https://example.com"
    When User click on "Login" button
    And User enter "username" in "Username" field
    And User enter "password" in "Password" field
    And User click on "Submit" button
    Then User should see "Dashboard" page

2. API Testing Example

Feature: API Testing Example
  @APITest
  Scenario: Get user information
    Given User set base URI
    When User add headers key "Content-Type" and value "application/json"
    And User add method type "GET" and pass endpoint "/api/users/1"
    Then User verify status code is 200
    And User verify json path key "$.data.id" is matching with expected value "1"
    And User get json path key "$.data.email" and store it as "userEmail"

3. Mixed Web + API Test

Feature: E2E Testing Example
  @E2E
  Scenario: Complete user journey
    # API Setup
    Given User set base URI
    When User add method type "POST" and pass endpoint "/api/users"
    And User sets the payload as
    """
    {
      "name": "##FirstName",
      "email": "##Email",
      "password": "##RandomChars10"
    }
    """
    Then User verify status code is 201
    And User get json path key "$.id" and store it as "userId"
    
    # Web Validation
    Given User navigate to "https://example.com/users/$$userId"
    Then User should see "##FirstName" text on page

🎯 Available Step Definitions

Web Steps

• Given User navigate to {string}
• When User click on {string} button
• When User enter {string} in {string} field
• Then User should see {string} page

API Steps

• Given User set base URI
• When User add headers key {string} and value {string}
• When User add method type {string} and pass endpoint {string}
• When User sets the payload as [DocString]
• Then User verify status code is {int}
• Then User verify json path key {string} is matching with expected value {string}
• Then User get json path key {string} and store it as {string}

🔄 Parallel Execution

The framework supports parallel execution across multiple browsers:

# Run with parallel threads
npm run aiq

Thread Configuration:

• Thread 1: Chromium browser
• Thread 2: Firefox browser
• Thread 3: Real Edge browser
• Thread 4: WebKit browser

♿ Accessibility Testing

Overview

The framework includes comprehensive accessibility testing capabilities using axe-core and Playwright, providing automated WCAG compliance validation with detailed reporting.

Features

• 🎯 WCAG Compliance: Automated testing for WCAG 2.0, 2.1, 2.2 (Level A, AA, AAA)
• 📋 Section 508: US Federal accessibility standards validation
• 🔍 Element-Level Testing: Test specific elements or entire pages
• 📊 Impact Analysis: Categorizes issues by critical, serious, moderate, minor
• 📈 Comprehensive Reports: HTML reports with violations, passes, and manual testing requirements
• 📎 Allure Integration: Separate attachments for different test result types

Accessibility Step Definitions

# Basic accessibility scan
When User runs accessibility scan on current page

# WCAG compliance testing
When User runs WCAG 2.1 Level AA compliance scan on current page

# Element-specific testing
When User runs accessibility scan on "navigation" element

# Impact-based testing
When User runs accessibility scan for "critical" impact issues

# Validation with thresholds
Then User validates accessibility violations are less than or equal to 10

# Critical violations check
Then User validates no critical accessibility violations exist

Accessibility Test Example

Feature: Accessibility Testing
  @accessibility
  Scenario: Validate page accessibility compliance
    Given User navigate to 'AutomationExercise' application
    When User runs accessibility scan on current page
    Then User validates accessibility violations are less than or equal to 10
    And User validates no critical accessibility violations exist
    
  @accessibility @wcag
  Scenario: WCAG 2.1 Level AA compliance
    Given User navigate to 'AutomationExercise' application
    When User runs WCAG 2.1 Level AA compliance scan on current page
    Then User validates no critical accessibility violations exist

Accessibility Reports

The framework generates four types of accessibility attachments in Allure:

1. 🚨 Accessibility Violations Report: Detailed violations that need immediate attention
2. ✅ Accessibility Tests Passed Report: Comprehensive list of successful accessibility tests
3. ⚠️ Manual Testing Required Report: Tests requiring human verification
4. 📊 Accessibility Raw Data (JSON): Raw scan results for programmatic analysis

Running Accessibility Tests

# Run only accessibility tests
npm run test:accessibility

# Run accessibility demo tests
npm run test:accessibility-demo

# Run all tests (includes accessibility)
npm run aiq

📊 Reporting

Generate Reports

# Run tests and generate reports
npm run test

# Generate Allure report only
npm run report:aiq

Report Features

• Allure Reports: Comprehensive test reports with screenshots
• Cucumber Reports: HTML and JSON format reports
• Trend Analysis: Historical test execution trends
• Failure Analysis: Detailed failure analysis with flakiness detection

🎭 Browser Support

| Browser | Type | Configuration | |---------|------|---------------| | Chrome | Real Browser | Thread1=chrome | | Firefox | Standard | Thread2=firefox | | Edge | Real Browser | Thread3=edge | | WebKit | Engine | Thread4=webkit |

🔧 Available Scripts

# Development
npm run build              # Build TypeScript
npm run clean:allure       # Clean reports

# Testing
npm run aiq               # Run tests
npm run test              # Run tests + generate reports

# Reporting
npm run allure:generate   # Generate Allure report
npm run allure:open       # Open Allure report
npm run report:aiq        # Generate and open reports

🤖 AI Features

Random Data Generation

// Supported placeholders
##FirstName     // Random first name
##LastName      // Random last name
##Email         // Random email
##MobileNumber  // Random phone number
##RandomNum5    // 5-digit random number
##RandomChars10 // 10-character random string

Runtime Data Storage

# Store API response data
And User get json path key "$.id" and store it as "userId"

# Use stored data in subsequent steps
Given User navigate to "https://example.com/user/$$userId"

🔍 Advanced Features

Auto-Healing

The framework includes self-healing capabilities that automatically adapt to minor UI changes.

Visual API Testing

API responses are displayed in-browser with rich formatting and toast notifications.

Trend Analysis

Automatic tracking of test execution trends and flakiness detection.

📝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

🆘 Support

For support and questions:

• Issues: GitHub Issues
• Documentation: Project Homepage

🏢 About Visionet

This framework is developed and maintained by Visionet Systems Inc., providing enterprise-grade test automation solutions.

Happy Testing! 🚀