Usage Examples

Learn how to use Chekov effectively with these practical examples covering common testing scenarios.

Quick Start

Installation

# Install Playwright and Chekov
npm install -D @playwright/test @chekov/core

# Or with pnpm
pnpm add -D @playwright/test @chekov/core

# Or with yarn
yarn add -D @playwright/test @chekov/core

Basic Test Setup

// tests/example.spec.ts
import { test } from '@playwright/test';
import { ai } from '@chekov/core';

test('basic example', async ({ page }) => {
  await page.goto('https://example.com');
  await ai('Click the login button', { page });
});

Common Testing Scenarios

Authentication

test('user authentication', async ({ page }) => {
  await page.goto('https://example.com/login');
  
  // Login
  await ai([
    'Type "test@example.com" in the email field',
    'Type "password123" in the password field'
  ], { page, parallelism: 2 });
  
  await ai('Click the Login button', { page });
  await ai('Verify we are redirected to the dashboard', { page });
  
  // Verify logged-in state
  await ai([
    'Verify the user menu shows "Test User"',
    'Verify the logout button is visible'
  ], { page, parallelism: 2 });
});

Form Submission

test('contact form submission', async ({ page }) => {
  await page.goto('https://example.com/contact');
  
  // Fill form
  await ai([
    'Type "John Doe" in the name field',
    'Type "john@example.com" in the email field',
    'Type "Test message" in the message field'
  ], { page, parallelism: 3 });
  
  // Submit and verify
  await ai('Click the Send button', { page });
  await ai('Verify the success message appears', { page });
});

E-commerce Flow

test('complete purchase flow', async ({ page }) => {
  await page.goto('https://example.com/shop');
  
  // Product selection
  await ai('Search for "test product"', { page });
  await ai('Click the first product in the results', { page });
  await ai('Select size "Medium" from the dropdown', { page });
  await ai('Click Add to Cart', { page });
  
  // Cart verification
  await ai([
    'Verify the cart shows 1 item',
    'Verify the product name is correct',
    'Verify the size is "Medium"'
  ], { page, parallelism: 3 });
  
  // Checkout
  await ai('Proceed to checkout', { page });
  
  // Shipping info
  await ai([
    'Fill in shipping details with:',
    'Name: John Doe',
    'Address: 123 Test St',
    'City: Test City',
    'State: CA',
    'ZIP: 12345'
  ], { page });
  
  // Payment
  await ai([
    'Enter "4242424242424242" as the card number',
    'Enter "12/25" as the expiration date',
    'Enter "123" as the CVV'
  ], { page, parallelism: 3 });
  
  await ai('Complete purchase', { page });
  await ai('Verify the order confirmation page', { page });
});

Dynamic Content

test('handle dynamic content', async ({ page }) => {
  await page.goto('https://example.com/dashboard');
  
  // Wait for dynamic content
  await ai('Wait for the dashboard to fully load', { page });
  
  // Interact with dynamic elements
  await ai('Click the "Load More" button', { page });
  await ai('Wait for new items to appear', { page });
  
  // Verify dynamic updates
  await ai([
    'Verify at least 10 items are visible',
    'Verify the "Loading" indicator is hidden'
  ], { page, parallelism: 2 });
});

File Upload

test('file upload', async ({ page }) => {
  await page.goto('https://example.com/upload');
  
  // Set up file input
  await page.setInputFiles('input[type="file"]', 'test.jpg');
  
  // Handle upload
  await ai('Click the Upload button', { page });
  await ai('Wait for the upload progress bar to complete', { page });
  await ai('Verify the success message', { page });
  
  // Verify uploaded file
  await ai([
    'Verify the file preview is visible',
    'Verify the file name is "test.jpg"',
    'Verify the delete button is available'
  ], { page, parallelism: 3 });
});

Advanced Patterns

Custom Commands

// helpers/auth.ts
export async function login(page, email, password) {
  await ai([
    `Type "${email}" in the email field`,
    `Type "${password}" in the password field`
  ], { page, parallelism: 2 });
  await ai('Click Login', { page });
}

// tests/example.spec.ts
test('use custom command', async ({ page }) => {
  await page.goto('https://example.com/login');
  await login(page, 'test@example.com', 'password123');
  await ai('Verify login success', { page });
});

Test Data Management

// fixtures/users.ts
export const testUsers = {
  admin: {
    email: 'admin@example.com',
    password: 'admin123'
  },
  customer: {
    email: 'customer@example.com',
    password: 'customer123'
  }
};

// tests/example.spec.ts
test('use test data', async ({ page }) => {
  await page.goto('https://example.com/login');
  const user = testUsers.admin;
  await login(page, user.email, user.password);
  await ai('Verify admin dashboard is visible', { page });
});

Testing Best Practices

• Clear Instructions: Write specific, unambiguous instructions
• Parallel Actions: Group independent actions for parallel execution
• Error Handling: Include appropriate error checks and recovery
• Test Independence: Each test should be self-contained

Next Steps

• Read our best practices guide
• Learn about parallel execution
• Understand error handling