Creating SmartTests

Introduction to TestChimp Web IDE

TestChimp Web IDE for creating and managing SmartTests

The TestChimp Web IDE provides a powerful interface for creating and managing SmartTests. It offers:

• Code editor: Full Playwright script editing with syntax highlighting and IntelliSense
• Test execution: Run tests directly from the IDE with multiple execution modes
• Test organization: Organize tests into folders following standard Playwright structure
• GitHub sync: Keep your tests synchronized with your codebase

Standard Playwright Folder Structure

The TestChimp Web IDE follows the same folder structure as standard Playwright projects, making it easy to sync with your codebase:

tests/
  ├── fixtures/     # Artifacts (file uploads, etc.)
  ├── pages/        # Page Object Models (POMs)
  └── e2e/          # End-to-end test files
playwright.config.js  # Playwright configuration file

This structure allows you to:

• Easily sync with your codebase: The folder structure matches standard Playwright projects, so you can seamlessly sync tests between TestChimp and your repository
• Organize tests logically: Use fixtures for artifacts (file uploads), pages for Page Object Models, and e2e for your test files
• Maintain consistency: The playwright.config.js file at the root allows you to configure test settings, base URLs, and other Playwright options

Note: TestChimp currently supports artifacts (file uploads) in the fixtures folder, but general test fixtures (custom test setup/teardown) are not currently supported.

Authoring Methods

There are three ways to create SmartTests in the Web IDE:

1. Create from Chrome Extension

The Chrome extension allows you to record your interactions and create SmartTests:

1. Install the Chrome extension and sign in with your TestChimp account
2. Navigate to your test site in the browser
3. Open the Chrome extension
4. Go to the Record tab
5. Click "Start Step Capture"

Chrome Extension Record tab with Start Step Capture button

6. Perform your test steps by navigating through your app
7. Click "End Step Capture" - which will create the test
8. The extension generates Playwright code that you can review and refine in the Web IDE

2. Create from Scenario Description

You can create SmartTests by describing scenarios in plain English:

1. Navigate to the SmartTests section in the Web IDE
2. Right-click on a folder (or use the context menu) and select "New Test From Scenario..."
3. Describe the scenario you want to test in natural language
4. The TestChimp agent will execute the given scenario, and along the way capture the actions as Playwright steps to generate the script

Example: "As a user, I want to log in to the application, navigate to the dashboard, and verify that my profile information is displayed correctly."

When you provide a scenario description, TestChimp's agent will:

• Navigate through your application following the scenario
• Capture each action (clicks, form fills, navigation, etc.) as it executes
• Generate a SmartTest script with the corresponding Playwright code
• Create the test file in your selected folder

3. Create Blank Test and Paste Existing Script

If you already have Playwright tests, you can create a blank test and paste your existing script:

1. Navigate to the SmartTests section in the Web IDE
2. Right-click on a folder (or use the context menu) and select "New Blank Test"
3. Enter a name for your test
4. A blank test template will be created with the basic Playwright structure
5. Paste your existing Playwright script into the editor
6. Save the test

This method is perfect for:

• Migrating existing Playwright tests to TestChimp
• Copying tests from other projects
• Starting with a template and customizing it

Playwright Best Practices

When creating SmartTests, you can utilize all the abstractions / support files of playwright such as hooks, pages, suties, fixtures etc.:

Page Object Models (POMs)

Organize your page interactions using Page Object Models:

class LoginPage {
  constructor(private page: Page) {}
  
  async goto() {
    await this.page.goto('https://example.com/login');
  }
  
  async fillUsername(username: string) {
    await this.page.fill('#username', username);
  }
  
  async clickLogin() {
    await this.page.click('button[type="submit"]');
  }
}

Artifacts

TestChimp currently supports artifacts for file uploads and similar use cases. Note that general test fixtures (custom test setup/teardown) are not currently supported.

For file uploads, you can use artifacts:

// Upload a file using an artifact
await page.setInputFiles('input[type="file"]', 'path/to/file.pdf');

Config Files

Configure your tests using playwright.config.js or playwright.config.ts:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  use: {
    baseURL: 'https://example.com',
    screenshot: 'only-on-failure',
  },
});

Hooks

Use hooks for setup and teardown:

test.beforeEach(async ({ page }) => {
  // Setup before each test
  await page.goto('https://example.com');
});

test.afterEach(async ({ page }) => {
  // Cleanup after each test
  await page.close();
});

These patterns help create maintainable, reusable SmartTests that work seamlessly with TestChimp's agent capabilities.