البدء باستخدام Playwright لتطبيقات React

ما هو Playwright؟

التثبيت

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

تهيئة Playwright لـ React

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

كتابة الاختبار الأول

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

test('home page shows heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

محدّدات العناصر

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

النقر والكتابة

await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Log in' }).click();

انتظار التنقّل

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

التحققات

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

التقاط لقطات الشاشة عند الفشل

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

تشغيل الاختبارات

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

عارض تتبّع Playwright

التكامل مع CI

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

تحقق سريع

خلاصة