Creating SmartTests

There are four ways to create a test in TestChimp:

1. From a blank test — write Playwright code in the editor, or use Simplified view to add and edit steps in a no-code UI.
2. From recorded steps — capture flows with the TestChimp Chrome extension.
3. From a test scenario in Test Planning — or from a free-form description (natural language) that drives the agent to build a SmartTest.
4. Upload an existing Playwright script — paste script content into the Upload script flow so it is stored as a SmartTest file.

Before we dive into the different approaches, it helps to understand how files are laid out in the Web IDE.

tests folder structure

The canonical description of the tests directory—including subfolders, environment files, and how specs are discovered—lives in tests_README.md at the root of your mapped tests tree. New projects receive this file from TestChimp; the same template is maintained in the product codebase at services/featureservice/src/main/resources/templates/tests_README.md.

Summary (see tests_README.md for full detail):

tests/
  pages/
  e2e/
  search/          # example; any subfolder may hold specs
  setup/
  assets/
  .env-QA          # per-environment config (e.g. .env-staging); pattern .env-<name>
  playwright.config.js

• pages/ — Page Object Models (reusable page helpers).
• setup/ — Global setup (e.g. global.setup.spec.js), run via Playwright project dependencies; not part of the main chromium project.
• e2e/ and other folders under tests/ — End-to-end specs matching *.{spec,test}.{js,ts} (layout is flexible; e2e/ is a common convention).
• assets/ — Files used by tests (e.g. uploads).
• Environment files (e.g. .env-QA, .env-staging) — Environment-specific variables (process.env.VAR_NAME). A default QA environment is created automatically; more can be added from the tests folder context menu.
• playwright.config.js — Standard Playwright configuration. TestChimp installs playwright-testchimp for you.

Introduction to the TestChimp Web IDE

The SmartTests Web IDE is where you open tests, edit them, run them, and sync with GitHub. The test editor works in two modes:

• Code view (default) — Full Playwright source with syntax highlighting and editing.
• Simplified view — A structured, low-code editor to add, reorder, and edit steps without writing raw script for those parts.

SmartTests are Playwright scripts with a few TestChimp-specific additions. The full list of what TestChimp adds on top of Playwright is documented under “What TestChimp Adds to Playwright” in tests_README.md (same template as above). In short, that includes plain-English AI steps, linking tests to scenarios, ExploreChimp, and TrueCoverage—see the README for explanations and examples.

Code view gives you full control: use Playwright APIs, page objects, hooks, and TestChimp features side by side.

TestChimp Web IDE — Code view for SmartTests

If you prefer no-code / low-code authoring, open a SmartTest and use Switch to Simplified View on the Code tab. There you can add and edit steps in a simple UI; changes are written back to the underlying Playwright script.

Simplified view — step-based editing for SmartTests

You can optionally use Make default so new sessions open in your preferred mode. The IDE also supports running tests, browsing the test tree, and (when enabled) GitHub sync to keep the tests folder aligned with your repo.

---

1. Blank test — code or Simplified view

1. Open the Create test dialog with Blank selected:
   • Right-click the target folder under tests → New Blank Test, or
   • Use New test in the SmartTests explorer header (creates under the tests root and opens the dialog on the Blank tab).
2. Enter a file name (extension is added if omitted, e.g. login → login.spec.js).
3. Click Create and open the new file.
4. Edit in Code view, or switch to Simplified view to manage steps, then save as usual.

2. Recorded steps (Chrome extension)

1. Install the Chrome extension and sign in.
2. Open your app, launch the extension, and use Record → Start Step Capture.
3. Perform the journey, then End Step Capture to create the SmartTest.
4. Refine the generated script in the Web IDE (Code or Simplified view).

Chrome Extension Record tab with Start Step Capture

To tie recording to a planned scenario, start from Test Planning and use record steps there so the flow stays linked to your plan.

3. Scenario in Test Planning or description

1. In the Web IDE, open Create test on a folder (e.g. right-click → New Test From Prompt..., or open the dialog and select From scenario).
2. Click Continue and follow the guided flow: describe what to test in natural language and optionally link a Test Planning scenario.
3. The agent runs the scenario, captures actions, and generates Playwright steps aligned with your project layout.
4. Finish in the editor to adjust code or switch to Simplified view for step edits.

Example prompt: “As a user, I log in, open the dashboard, and confirm my profile information is visible.”

4. Upload existing Playwright script

1. Open the Create test modal for the folder where the file should live (right-click the folder → New Blank Test or New Test From Prompt..., or use the header New test button for the tests root). All of these open the same dialog; switch tabs as needed.
2. Select the Upload script tab.
3. Enter the file name (e.g. my-flow.spec.js).
4. Paste your Playwright-style script into the text area.
5. Click Create file. The content is stored as a SmartTest in that folder; edit further in Code or Simplified view.

---

Playwright best practices

When creating SmartTests, you can use Playwright patterns such as page objects, hooks, suites, and config:

Page Object Models (POMs)

Organize 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"]');
  }
}

Assets

Use files under tests/assets/ for uploads and similar needs. See tests_README.md for how assets/ fits into the layout.

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

Config files

Configure tests with 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 }) => {
  await page.goto('https://example.com');
});

test.afterEach(async ({ page }) => {
  await page.close();
});

These patterns work well with TestChimp agents, scenario linking, and exploration features described in tests_README.md.