#
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:
#
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.
"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).
#
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
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 "Test Script" box:
A Modal will open where you can paste your script and click upload:
#
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
#
Adding Assertions
During recording, use these assertion types:
Visibility Assertions
await expect(page.getByText('Buy groceries')).toBeVisible();
State Assertions
await expect(page.getByRole('checkbox')).toBeChecked();
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:
Choose your desired testing framework:
- Playwright
- Cypress
- Selenium
Click on the icon of your chosen framework.
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.
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.
Once generation is complete, you can find your generated test project in the "Test Generations History" table at the bottom of the page.
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)
- The downloaded package will contain:
- All necessary configuration files
- Project dependencies
- Generated test scripts tailored for your selected framework