Test Generation Intermediate

import { test, expect } from '@playwright/test';

test.describe('Product Search', () => {
  // Type the test name and Copilot fills in the body:
  test('can search for products by name', async ({ page }) => {
    // Copilot suggests based on the test name:
    await page.goto('/products');
    await page.getByPlaceholder('Search products...').fill('laptop');
    await page.getByRole('button', { name: 'Search' }).click();
    await expect(page.getByTestId('search-results')).toContainText('laptop');
  });

  // Copilot often suggests the next logical test:
  test('shows no results message for unknown products', async ({ page }) => {
    await page.goto('/products');
    await page.getByPlaceholder('Search products...').fill('xyznonexistent');
    await page.getByRole('button', { name: 'Search' }).click();
    await expect(page.getByText('No products found')).toBeVisible();
  });
});

# Select your component code, then in Copilot Chat:
/tests Generate Playwright e2e tests for this component.
Include tests for user interactions and edge cases.

# Or reference a specific file:
/tests #file:src/pages/Checkout.tsx Write Playwright tests
for the checkout page flow.

import { test, expect } from '@playwright/test';

// Test the complete user registration flow:
// 1. Navigate to the registration page
// 2. Fill in name, email, and password
// 3. Accept terms of service
// 4. Submit the form
// 5. Verify redirect to welcome page
// 6. Check that welcome message contains the user's name
test('user registration flow', async ({ page }) => {
  // Copilot generates the full implementation from the comments above
  await page.goto('/register');
  await page.getByLabel('Full Name').fill('Jane Smith');
  await page.getByLabel('Email').fill('jane@example.com');
  await page.getByLabel('Password').fill('SecurePass123!');
  await page.getByLabel('I accept the terms').check();
  await page.getByRole('button', { name: 'Register' }).click();
  await expect(page).toHaveURL('/welcome');
  await expect(page.getByText('Welcome, Jane Smith')).toBeVisible();
});

@workspace Create a Playwright Page Object class for the checkout
page. Look at #file:src/pages/Checkout.tsx to understand the
form fields and buttons. Include methods for:
- Filling shipping address
- Selecting shipping method
- Entering payment details
- Submitting the order

// Generate random user data for tests
export function createTestUser(overrides = {}) {
  const id = Date.now();
  return {
    name: `Test User ${id}`,
    email: `testuser-${id}@example.com`,
    password: 'TestPassword123!',
    ...overrides,
  };
}

// Generate product data
export function createTestProduct(overrides = {}) {
  return {
    name: 'Test Product',
    price: 19.99,
    category: 'Electronics',
    inStock: true,
    ...overrides,
  };
}

# Step 1: Generate the base test
@workspace Write a Playwright test for the e-commerce checkout flow.
Start with adding a product to the cart.

# Step 2: Extend it
Now add the shipping address form fill step to that test.
Use realistic test data.

# Step 3: Add assertions
Add assertions to verify the order summary shows the correct
product name, quantity, and total price before submission.

# Step 4: Add error cases
Now create a separate test for what happens when the payment
is declined. Mock the payment API to return a failure.