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

The UI testing process involves three main steps:

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

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

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

3. Click "Create" to initialize your test suite

4. You will be redirected to test suite creation page.

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

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

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

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:

   Record

   
   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:

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

• Record - Start/Stop recording your interactions
• Pause - Temporarily pause the recording
• Resume - Resume a paused recording
• Step Over - Execute the next action step by step

• Pick Locator - Select an element to generate its locator
• Assert Visibility - Add visibility checks for elements
• Assert Text - Verify element text content
• Assert Value - Verify input field values
• Assert Snapshot - Create visual comparisons

• Copy - Copy the generated test code
• Clear - Clear all recorded actions

• 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)
• Color Mode - 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

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

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.

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

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.

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.

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:

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

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

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:

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

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.

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:

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

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

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

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

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)

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