Skip to main content

Creating Tests from Manual Test Step Capture

The Chrome Extension allows you to record your manual test steps and convert them into SmartTests without writing any code.

How to Record Test Steps​

  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
Chrome Extension Record tab with Start Step Capture button
  1. Perform your test steps by navigating through your app
  2. Click "End Step Capture" - which will create the test
  3. The extension generates Playwright code that you can review and refine in the Web IDE

Adding Assertions​

While recording test steps, you can add assertions to verify expected behavior:

  1. Select an assertion mode from the mode buttons in the extension sidebar:

    • 👁️ Assert Visible: Verify that an element is visible
    • 📝 Assert Text: Verify that an element contains specific text
    • ✏️ Assert Value: Verify that an input/field has a specific value
    • ✓ Assert Enabled/Disabled: Verify that an element is enabled or disabled
    • 🔢 Assert Count: Verify that multiple elements match a selector and count

  2. Choose assertion behavior:

    • Single click on an assertion mode button: One-shot mode - applies to the next click only, then returns to normal mode
    • Double click on an assertion mode button: Sticky mode - stays in that assertion mode until you click "Normal"
    • Click "Normal" button: Return to action mode (default)

  3. Click on an element in your app to generate the assertion

The generated assertion will appear as a green step in your captured steps list, using Playwright's expect() API.

Cycling Through Different Code Units​

For each captured step, the extension may generate multiple code options (code units) using different selector strategies (e.g., getByRole, getByText, getByTestId, etc.):

  1. Identify steps with multiple options: When you hover over a step, a reload icon (🔄) appears if that step has multiple code unit options
  2. Cycle through options: Click the reload icon to cycle through the different code options
  3. View current option: The tooltip shows "Command X of Y (click to cycle)" to indicate which option you're viewing
  4. Select the best option: Choose the code unit that best fits your needs (e.g., prefer getByTestId for stability, or getByRole for accessibility)

You can also manually edit any step by clicking on it to open the text editor.

What Gets Generated​

The recorded steps are automatically converted into a SmartTest with:

  • Playwright code: Standard Playwright test code
  • Intent comments (optional): Steps can optionally include intent comments describing what they do
  • Screen-state annotations (optional): The extension can identify and annotate screen-states
  • Ready to use: The generated SmartTest can be used immediately or further customized in the Web IDE

Differences from Playwright Codegen​

The TestChimp Chrome Extension offers two key advantages over standard Playwright codegen:

Intent Comments Using DOM Context​

Unlike Playwright codegen which only captures actions, the TestChimp extension:

  • Captures DOM at key steps: Records the DOM state at important steps during recording
  • Infers user intent: Analyzes the captured DOM context to understand what you're trying to accomplish
  • Automatically adds intent comments: Generates helpful intent comments in the test script that explain what each step is trying to achieve, making tests more readable and maintainable

Cycling Through Different Code Options​

When the extension generates code, it may create multiple selector options (e.g., getByRole, getByText, getByTestId, etc.) for a single step:

  • Auto-selection: The extension automatically selects what it considers the best option
  • Manual override: If the auto-selected option isn't ideal for your needs, you can cycle through all available options using the reload icon (🔄) that appears when hovering over a step
  • Choose the best fit: Select the code option that best matches your preferences (e.g., prefer getByTestId for stability, or getByRole for accessibility)

Benefits​

  • Quick test creation: Create tests faster than writing code manually
  • Accurate steps: Captures exact interactions with your application
  • No coding required: Record tests without writing any code
  • Easy to learn: Perfect for team members who aren't familiar with Playwright

Creating tests with the Chrome Extension is the fastest way to get started with SmartTests.