Testing with Playwright

pnpm test:e2e

Running 85 tests using 5 workers
  ✓ homepage.spec.ts:8:5 › Homepage › should load homepage successfully (1.2s)
  ✓ sign-in.spec.ts:8:5 › Sign In Page › should load sign in page successfully (890ms)
  ...
  85 passed (1.5m)

pnpm test:e2e:ui

pnpm test:e2e:headed

pnpm test:e2e:debug

# Debug a specific test file
pnpm exec playwright test tests/e2e/auth/sign-in.spec.ts --debug

# Debug a specific test by name
pnpm exec playwright test --grep "should load homepage" --debug

pnpm test:e2e:report

testDir: "./tests"

tests/
└── e2e/
    ├── auth/           # Authentication tests
    ├── dashboard/      # Dashboard tests
    ├── marketing/      # Marketing page tests
    ├── blog/           # Blog tests
    ├── changelog/      # Changelog tests
    ├── legal/          # Legal page tests
    └── helpers/        # Test utilities

fullyParallel: true

retries: process.env.CI ? 2 : 0

workers: process.env.CI ? 1 : undefined

# Run with specific number of workers
pnpm exec playwright test --workers=3

# Run tests sequentially (helpful for debugging)
pnpm exec playwright test --workers=1

use: {
  baseURL: "http://localhost:3000"
}

// With baseURL
await page.goto("/");           // Goes to http://localhost:3000/
await page.goto("/dashboard");  // Goes to http://localhost:3000/dashboard

// Without baseURL (not recommended)
await page.goto("http://localhost:3000/dashboard");

webServer: {
  command: "pnpm build && pnpm start",
  url: "http://localhost:3000",
  reuseExistingServer: !process.env.CI,
  timeout: 120 * 1000,
}

test.describe("Feature Name", () => {
  // All tests for this feature
});

test.beforeEach(async ({ page }) => {
  // Navigate to page
  await page.goto("/dashboard");
  
  // Set up authentication (if needed)
  await setupAuthenticatedUser(page);
  
  // Reset state
  await page.evaluate(() => localStorage.clear());
});

// By role (most recommended - accessible)
page.getByRole("button", { name: "Submit" })
page.getByRole("link", { name: "Sign In" })

// By text content
page.locator("text=Hello World")
page.locator("text=/success|thank you/i") // Regex, case-insensitive

// By CSS selector
page.locator("form")
page.locator('input[type="email"]')
page.locator(".btn-primary")

// By test ID (best for dynamic content)
page.locator('[data-testid="user-menu"]')

// By placeholder
page.getByPlaceholder("Enter your email")

// By label text (for form inputs)
page.getByLabel("Email address")

// Page assertions
await expect(page).toHaveURL("/dashboard");
await expect(page).toHaveTitle(/Dashboard/);

// Element visibility
await expect(page.locator("form")).toBeVisible();
await expect(page.locator(".loading")).toBeHidden();

// Element state
await expect(page.locator("button")).toBeEnabled();
await expect(page.locator("input")).toBeDisabled();
await expect(page.locator("checkbox")).toBeChecked();

// Text content
await expect(page.locator("h1")).toHaveText("Welcome");
await expect(page.locator("p")).toContainText("Hello");

// Count
await expect(page.locator("li")).toHaveCount(5);

// Attribute
await expect(page.locator("a")).toHaveAttribute("href", "/about");

# Debug specific test
pnpm exec playwright test auth/sign-in.spec.ts --debug

// In Playwright Inspector console
page.locator('button') // Test selector
page.screenshot() // Capture current state
page.pause() // Add breakpoint in test code

test("debugging test", async ({ page }) => {
  await page.goto("/dashboard");
  
  console.log("Current URL:", page.url());
  
  const button = page.locator("button");
  const isVisible = await button.isVisible();
  console.log("Button visible:", isVisible);
  
  const count = await page.locator("li").count();
  console.log("List item count:", count);
});

pnpm test:e2e -- --headed

test("screenshot debugging", async ({ page }) => {
  await page.goto("/dashboard");
  
  // Take screenshot
  await page.screenshot({ path: "screenshots/dashboard.png" });
  
  // Screenshot specific element
  const sidebar = page.locator("aside");
  await sidebar.screenshot({ path: "screenshots/sidebar.png" });
});

// Run only this test (ignore all others)
test.only("focused test", async ({ page }) => {
  // ...
});

// Skip this test temporarily
test.skip("broken test to fix later", async ({ page }) => {
  // ...
});

// Conditional skip
test("auth test", async ({ page }) => {
  test.skip(!process.env.TEST_USER_EMAIL, "Test credentials not configured");
  // ...
});

# Run test with trace (automatically enabled on failures)
pnpm test:e2e

# View trace from failed test
pnpm exec playwright show-trace test-results/path/to/trace.zip

test("with trace", async ({ page }) => {
  await page.context().tracing.start({ screenshots: true, snapshots: true });
  
  // Your test actions
  await page.goto("/dashboard");
  
  await page.context().tracing.stop({ path: "trace.zip" });
});

let userId: string;

test("create user", async ({ page }) => {
  userId = await createUser(); // Sets global state
});

test("update user", async ({ page }) => {
  await updateUser(userId); // Depends on previous test
});

test("create user", async ({ page }) => {
  const userId = await createUser();
  // Test only user creation
});

test("update user", async ({ page }) => {
  const userId = await createUser(); // Create fresh user
  await updateUser(userId);
  // Test only user update
});

test("test 1", async ({ page }) => { });
test("it works", async ({ page }) => { });

test("should display validation error for empty email field", async ({ page }) => { });
test("should redirect to dashboard after successful sign in", async ({ page }) => { });

await page.waitForTimeout(3000); // Arbitrary delay

await page.waitForSelector('[data-testid="loaded"]'); // Wait for specific element

test.describe("Authentication", () => {
  test.describe("Sign In", () => {
    test("should sign in with valid credentials", async ({ page }) => { });
    test("should show error for invalid credentials", async ({ page }) => { });
  });

  test.describe("Sign Up", () => {
    test("should register new user", async ({ page }) => { });
    test("should validate email format", async ({ page }) => { });
  });
});

test.afterEach(async ({ page }) => {
  // Clean up: delete test user, clear database, etc.
  await cleanupTestUser();
});

test.afterAll(async () => {
  // Clean up: close connections, delete temp files, etc.
});

# Install with dependencies
pnpm exec playwright install --with-deps

# Install specific browser
pnpm exec playwright install chromium

# Clear cache and reinstall
rm -rf ~/.cache/ms-playwright
pnpm exec playwright install

df -h