# 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:

  1. Setting up your test environment
  2. Recording user interactions
  3. Managing and executing test variations

# Getting Started

# Create Your First UI E2E Test

  1. Navigate to "UI Testing" in the sidebar menu UI Testing Menu

  2. Click "Create Your First UI Test" and provide a descriptive name for your test suite Create Test Suite

  3. Click "Create" to initialize your test suite

  4. You will be redirected to test suite creation page. Create Test Page

# Installing the Recorder Extension

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

# Installation Steps

  1. Install the extension:

    • Visit the Chrome Web Store
    • Click "Add to Chrome"
    • Confirm the installation when prompted
  2. 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

  1. 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.
    
  2. 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:

# Toolbar Features

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.

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).

# 1. Test Recording 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

  1. Open your application (https://ui-testing-todo-app.vercel.app/todos)

  2. Click the Kusho Recorder extension icon in Chrome

  3. 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 "Test Script" 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:

  1. Todo Creation

    • Add new todos
    • Handle empty inputs
    • Test special characters
    • Verify character limits
  2. Data Validation

    • Verify todo count
    • Validate edited content
    • Test persistence

# Adding Assertions

During recording, use these assertion types:

  1. Visibility Assertions

    await expect(page.getByText('Buy groceries')).toBeVisible();
  2. State Assertions

    await expect(page.getByRole('checkbox')).toBeChecked();
  3. Content Assertions

    await expect(page.getByTestId('todo-count')).toHaveText('2 items left');

Here's the revised markdown document with image syntax and information about viewing previously generated projects:

# Generate Test

# Output Project Control

After recording and uploading your test script, you'll be presented with a "Select Output Framework" option:

Output Framework Selection
Output Framework Selection

  1. Choose your desired testing framework:

    • Playwright
    • Cypress
    • Selenium
  2. Click on the icon of your chosen framework.

  3. Click the "Generate Tests" button to start the AI-powered test generation process.

For fields like dropdown, radio, or multi-select, you may need to provide additional information to create better test cases. This is a work in progress, and efforts are being made to make this process as seamless as possible.

Additional Information Needed
Additional Information Needed

When prompted, add comma-separated values to the fields the webapp is asking for. Then click on submit. This will start the generation process, and you can wait for Kusho to do its magic. A complete Playwright project with AI-generated tests will be created for you.

Although necessary scenarios will be created automatically, a modal will also open allowing you to add as many additional scenarios as you need:

Test Scenarios Modal
Test Scenarios Modal

  • You can simply write down your scenarios in the provided text area.
  • To add more scenarios, click on the "Add Another Scenario" button.
  • If you don't want to add any scenarios, just click on "Generate" to start the generation process.
  1. The system will generate a complete project structure and test files for your selected framework, incorporating the recorded test steps and any additional scenarios you specified.

  2. Once generation is complete, you can find your generated test project in the "Test Generations History" table at the bottom of the page.

  3. Use the "Download Generated Project" button in the Actions column to download the full project package for your chosen framework (Playwright, Cypress, or Selenium).

# Viewing Previously Generated Projects

You can view your previously generated projects in the "Test Generations History" table at the bottom of the page. This table displays information such as:

  • ID
  • Framework used
  • Status
  • Completion date and time
  • Actions (e.g., Download button)

Test Generations History
Test Generations History

  1. The downloaded package will contain:
    • All necessary configuration files
    • Project dependencies
    • Generated test scripts tailored for your selected framework