# UI Testing Guide

KushoAI's UI testing feature empowers you to create and manage comprehensive end-to-end (E2E) UI tests. With our powerful toolset, you can develop, record, and maintain complex test scenarios that ensure your application's UI functions correctly across different user flows.

# Overview

The UI testing process involves three main steps:

Setting up your test environment
Recording user interactions
Managing and executing test variations

# Getting Started

# Create Your First UI E2E Test

Navigate to "UI Testing" in the sidebar menu
Click "Create Your First UI Test" and provide a descriptive name for your test suite
tip "Naming Convention"
Use clear, descriptive names for your test suites (e.g., "UserAuthentication" or "CheckoutFlow")
Click "Create" to initialize your test suite
You will be redirected to test suite creation page.

# Installing the Recorder Extension

The Kusho UI Test Recorder is available as a Chrome extension that seamlessly integrates with your browser.

note "Prerequisites"

- Google Chrome browser (version 88 or higher)
- Stable internet connection
- Administrator privileges for installation

# Installation Steps

Install the extension:
- Visit the Chrome Web Store
- Click "Add to Chrome"
- Confirm the installation when prompted
Verify the installation:
- Look for the Kusho icon in your browser's extension toolbar
- Click the icon to ensure it opens the recorder panel

# How the Recorder Works

Navigate to your webpage and click on the Kusho UI Recorder extension icon. This will open the sidebar and start the recording session.

You'll see the record button in the toolbar:
```
Everything you do will be recorded, and you can view the generated code in the sidebar.
```
Perform the workflow you want to record. All actions will be automatically captured and converted into code in the sidebar.

Here are detailed instructions on how to use the recorder:

The recorder's toolbar provides various functions to help you create and manage your tests:

# Recording Controls

- Start/Stop recording your interactions
- Temporarily pause the recording
- Resume a paused recording
- Execute the next action step by step

# Assertion Tools

- Select an element to generate its locator
- Add visibility checks for elements
- Verify element text content
- Verify input field values
- Create visual comparisons

# Code Management

- Copy the generated test code
- Clear all recorded actions

# Settings

Target Language Selector - Choose your preferred programming language and test framework:
- Node.js (Library or Test Runner)
- Java (JUnit or Library)
- Python (Pytest, Library, or Library Async)
- .NET C# (MSTest, NUnit, or Library)
- Debugger (JSONL)
- Switch between light and dark themes

Each tool is designed to help you create comprehensive and reliable UI tests. You can combine these features to:

Record precise user interactions
Add various types of assertions
Generate code in your preferred language
Debug and refine your test cases

# Test generation process

We structure UI tests in three main phases. For each phase, you'll use the recorder extension to capture the necessary actions:

# Test generation process

Before you can start recording your tests, you'll need the Kusho UI Test Recorder extension installed in your Chrome browser. This extension is essential for capturing user interactions and generating Playwright test scripts automatically.

When you access the test recording page, our system will check if you have the extension installed. If it's not detected, you'll be prompted to install it from the Chrome Web Store. Once installed, you can immediately start recording your tests without any additional configuration.

"Extension Found"

Ready to start recording tests

The Chrome extension allows you to:

• Record browser interactions
• Generate Playwright test scripts
• Export recorded actions
• Modify recording settings

Last updated: 12/29/2024

Let's create a complete test suite for our demo todo app at https://ui-testing-todo-app.vercel.app/login. We'll record three phases: setup (login), test execution (todo operations), and teardown (cleanup).

The setup phase handles authentication and initial state setup. For our todo app, we'll create a login script.

Open your application (https://ui-testing-todo-app.vercel.app/login)
Click the Kusho Recorder extension icon in Chrome
Record these login steps:
- Enter username and password
- Click login button
- Verify successful login
Click "Stop Recording" in the extension

The recorder will generate a login script like this:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://ui-testing-todo-app.vercel.app/login');
  const page1 = await context.newPage();
  await page1.goto('https://ui-testing-todo-app.vercel.app/login');
  await page1.getByPlaceholder('Username').click();
  await page1.getByPlaceholder('Username').fill('admin');
  await page1.getByPlaceholder('Username').press('Tab');
  await page1.getByPlaceholder('Password').fill('password');
  await page1.getByRole('button', { name: 'Login' }).click();

  // ---------------------
  await context.close();
  await browser.close();
})();

# Key Setup Elements to Record

Browser Configuration
- Set viewport dimensions
- Configure cookie preferences
- Set up local storage
- Handle permission prompts
Authentication Setup
- Record login sequence
- Store authentication tokens
- Set user preferences
- Accept terms if needed
Data Preparation
- Create test data
- Configure app settings
- Set up test environment
- Prepare initial state

# Adding Verifications

During setup recording, use the toolbar to add verification steps:

Click the "Assert" button after important setup actions
Verify successful login state
Confirm environment configuration
Check data preparation results

The web app will save your setup script automatically and run it before your test cases execute. You can modify or re-record the setup steps anytime through the interface.

Remember: A solid setup script ensures reliable test execution by creating a consistent starting state for all your tests.

# 2. Test Execution Phase

After setting up your environment, you'll record test scripts directly through our web app interface. These scripts will automatically capture your interactions and generate the necessary Playwright code.

# 2. Test Execution Phase (Todo Operations)

After completing the setup phase, we'll record the main test scenarios for our todo app. This phase focuses on core todo operations like creating, updating, and completing tasks.

# Recording Todo Operations

Open your application (https://ui-testing-todo-app.vercel.app/todos)
Click the Kusho Recorder extension icon in Chrome

Record these todo operations:

test('todo operations', async ({ page }) => {
  // Create a new todo
  await page.getByPlaceholder('What needs to be done?').fill('Buy groceries');
  await page.keyboard.press('Enter');

  // Add another todo
  await page.getByPlaceholder('What needs to be done?').fill('Pay bills');
  await page.keyboard.press('Enter');

  // Mark todo as complete
  await page.getByRole('checkbox').first().check();

  // Verify todo states
  await expect(page.getByText('Buy groceries')).toHaveClass(/completed/);
  await expect(page.getByText('Pay bills')).not.toHaveClass(/completed/);

  // Edit a todo
  await page.getByText('Pay bills').dblclick();
  await page.getByRole('textbox').fill('Pay utility bills');
  await page.keyboard.press('Enter');

  // Verify the edit
  await expect(page.getByText('Pay utility bills')).toBeVisible();
});

Now Copy this script with either the button given on the sidepanel or directly copy it.

Navigate back to the Kusho webapp and click on the "Add Test" box:

UI Testing Menu

A Modal will open where you can paste your script and click upload:

UI Testing Menu

# Key Test Operations

Focus on testing these essential todo features:

Todo Creation
- Add new todos
- Handle empty inputs
- Test special characters
- Verify character limits
Data Validation
- Verify todo count
- Validate edited content
- Test persistence

# 3. Teardown Phase (Cleanup)

The teardown phase cleans up the application state after tests complete. For our todo app, we'll record logout and cleanup actions.

# Recording Cleanup Actions

Open your todo app
Click the Kusho Recorder extension icon
Record these cleanup steps:
- Delete all remaining todos
- Logout from the application
- Clear any local storage
Click "Stop Recording"

The recorder will generate cleanup code like this:

# Essential Cleanup Steps to Record

Browser Cleanup
- Log out of the application
- Clear cookies and session data
- Close any open modals or popups
- Clear form inputs
Application State
- Reset any modified settings
- Clear any uploaded files
- Remove test data entries
- Return to the initial page
Verification Steps
- Confirm logout success
- Verify redirects to login page
- Check that data is cleared
- Ensure clean starting state

# Best Practices While Recording

Record cleanup actions in a logical order
Add verification steps using the Assert buttons
Include error handling for critical cleanup steps
Test the teardown script independently
Keep cleanup actions focused and minimal

The web app will automatically save your teardown script and execute it after your test cases complete. You can edit or re-record the teardown steps at any time through the interface.

Remember: A good teardown script is essential for reliable test automation. Always verify that your cleanup actions successfully reset the application state.

Now when the script creation is done click on the Generate Tests button. UI Testing Menu

# Test Generation and Execution

# Generating Test Scenarios

After recording your test scripts, Kusho AI will automatically generate comprehensive test scenarios for you. However, you can also add your own specific test scenarios if desired:

Click the "Generate Tests" button in the toolbar
A Test Scenarios modal will appear:

Here you can:
- Review and customize test scenarios
- Add your own specific test scenarios by clicking "Add Another Scenario" (optional)
- Click "Generate" to proceed with test generation

note

Even if you don't add any custom scenarios, Kusho AI will automatically analyze your recordings and generate comprehensive test scenarios covering various test cases and edge conditions.

# Customizing Test Data

For form elements like dropdowns, radio buttons, or multi-select fields, you'll need to provide possible values to generate comprehensive test cases:

The system will:

Detect form fields from your recording
Present input boxes for each field
Ask for possible values to use in test generation

Simply enter comma-separated values for each field and click "Submit". For example:

Status: Active, Pending, Completed, Cancelled
Priority: High, Medium, Low

note "Work in Progress"

We're continuously improving this process to make it more seamless. Future updates will include automatic value detection and smart suggestions.

After submitting your values, Kusho AI will analyze your recordings and generate a complete Playwright test project customized to your application.

# Project Generation Process

Click "Generate" to start the AI-powered test generation
Kusho analyzes your:
- Recorded interactions
- Custom scenarios
- Test data variations
Generates a complete Playwright project

When generation completes, download your project:

# Generated Project Structure

playwright-project/
├── src/
│   ├── global-setup.ts     # Authentication & setup
│   ├── global-teardown.ts  # Cleanup procedures
│   └── utils.ts            # Helper functions
├── tests/
│   ├── auth.spec.ts        # Authentication tests
│   ├── core.spec.ts        # Main functionality
│   └── edge-cases.spec.ts  # Boundary conditions
├── playwright.config.ts    # Test configuration
├── package.json           # Dependencies
└── README.md             # Setup instructions

# Running Your Test Suite

# Prerequisites

Node.js (v14+)
npm/yarn
Supported browsers:
- Chrome/Chromium
- Firefox
- WebKit

# Quick Start

# Install dependencies
npm install

# Install browser drivers
npx playwright install

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Advanced Test Execution

# Run specific tests
npx playwright test auth.spec.ts
npx playwright test --grep "login"

# Browser selection
npx playwright test --project=chromium
npx playwright test --project=firefox

# Debugging
npx playwright test --debug
PWDEBUG=1 npx playwright test

# Parallel execution
npx playwright test --workers=4

# Test Reports

Generate and view detailed HTML reports:

# Run tests with report
npx playwright test --reporter=html

# View the report
npx playwright show-report

note "CI/CD Integration"

The generated project includes GitHub Actions workflows:
```yaml
name: E2E Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - name: Install dependencies
        run: npm ci
      - name: Run Playwright tests
        run: npx playwright test
```

# UI Testing Guide

# Overview

# Getting Started

# Create Your First UI E2E Test

tip "Naming Convention"

# Installing the Recorder Extension

note "Prerequisites"

# Installation Steps

# How the Recorder Works

# Toolbar Features

# Recording Controls

# Assertion Tools

# Code Management

# Settings

# Test generation process

# Test generation process

"Extension Found"

# 1. Setup Phase (Login)

# Recording Login Script

# Key Setup Elements to Record

# Adding Verifications

# 2. Test Execution Phase

# 2. Test Execution Phase (Todo Operations)

# Recording Todo Operations

# Key Test Operations

# 3. Teardown Phase (Cleanup)

# Recording Cleanup Actions

# Essential Cleanup Steps to Record

# Best Practices While Recording

# Test Generation and Execution

# Generating Test Scenarios

note

# Customizing Test Data

note "Work in Progress"

# Project Generation Process

# Generated Project Structure

# Running Your Test Suite

# Prerequisites

# Quick Start

# Advanced Test Execution

# Test Reports

note "CI/CD Integration"