microsoft/playwrightإطار عمل لأتمتة المتصفحات بواجهة برمجة تطبيقات واحدة (API) لمتصفحات Chromium وFirefox وWebKit. يدعم اختبار الويب، واستخراج البيانات، ولقطات الشاشة، واعتراض الشبكة.
اختر المسار الذي يناسب سير عملك:
| الأفضل لـ | التثبيت | |
|---|---|---|
| اختبار Playwright | الاختبار الشامل من البداية إلى النهاية | npm init playwright@latest |
| واجهة أوامر Playwright | وكلاء البرمجة (Claude Code, Copilot) | npm i -g @playwright/cli@latest |
| Playwright MCP | وكلاء الذكاء الاصطناعي والأتمتة القائمة على LLM | npx @playwright/mcp@latest |
| مكتبة Playwright | نصوص أتمتة المتصفح | npm i playwright |
| إضافة VS Code | كتابة وتصحيح الاختبارات في VS Code | التثبيت من Marketplace |
اختبار Playwright هو مشغّل اختبارات متكامل مبني للاختبار الشامل من البداية إلى النهاية. يشغّل الاختبارات عبر Chromium وFirefox وWebKit مع عزل كامل للمتصفح، وانتظار تلقائي، وتأكيدات مصممة للويب أولاً.
npm init playwright@latest
أو أضفه يدويًا:
npm i -D @playwright/test
npx playwright install
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('link', { name: 'Get started' }).click();
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
npx playwright test
تُشغَّل الاختبارات بالتوازي عبر جميع المتصفحات المكوّنة، في الوضع الرأسي (بدون واجهة رسومية) افتراضيًا. يحصل كل اختبار على سياق متصفح جديد — عزل كامل مع حمل إضافي شبه معدوم.
الانتظار التلقائي والتأكيدات المصممة للويب أولاً. لا مهلات زمنية مصطنعة. ينتظر Playwright حتى تصبح العناصر قابلة للتفاعل، وتُعاد محاولة التأكيدات تلقائيًا حتى تتحقق الشروط.
المحددات (Locators). ابحث عن العناصر بمحددات مرنة تعكس كيفية رؤية المستخدمين للصفحة:
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')
عزل الاختبارات. يعمل كل اختبار في سياق متصفح خاص به — أي ما يعادل ملف تعريف متصفح جديد. احفظ حالة المصادقة مرة واحدة وأعد استخدامها عبر الاختبارات:
// Save state after login
await page.context().storageState({ path: 'auth.json' });
// Reuse in other tests
test.use({ storageState: 'auth.json' });
التتبع (Tracing). التقط آثار التنفيذ ولقطات الشاشة والفيديو عند الفشل. افحص كل إجراء ولقطة DOM وطلب شبكة ورسالة وحدة تحكم في عارض التتبع:
// playwright.config.ts
export default defineConfig({
use: {
trace: 'on-first-retry',
},
});
npx playwright show-trace trace.zip
التوازي. تُشغَّل الاختبارات بالتوازي افتراضيًا عبر جميع المتصفحات المكوّنة.
واجهة أوامر Playwright هي واجهة سطر أوامر لأتمتة المتصفح مصممة لوكلاء البرمجة. وهي أكثر كفاءة في استهلاك الرموز من MCP — إذ تتجنب الأوامر تحميل مخططات أدوات كبيرة وأشجار إمكانية الوصول في سياق النموذج.
npm install -g @playwright/cli@latest
اختياريًا، ثبّت المهارات لتكامل أغنى مع الوكلاء:
playwright-cli install --skills
وجّه وكيل البرمجة الخاص بك إلى مهمة:
Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Take screenshots for all successful and failing scenarios.
أو شغّل الأوامر مباشرة:
playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot
استخدم playwright-cli show لفتح لوحة تحكم مرئية مع معاينات بث مباشر لجميع جلسات المتصفح الجارية. انقر على أي جلسة للتكبير والتحكم عن بُعد.
playwright-cli show
يمنح خادم Playwright MCP وكلاء الذكاء الاصطناعي تحكمًا كاملاً في المتصفح عبر بروتوكول سياق النموذج. يتفاعل الوكلاء مع الصفحات باستخدام لقطات إمكانية وصول منظمة — دون الحاجة إلى نماذج رؤية أو لقطات شاشة.
أضفه إلى عميل MCP الخاص بك (VS Code, Cursor, Claude Desktop, Windsurf, إلخ):
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
تثبيت بنقرة واحدة لـ VS Code:
لـ Claude Code:
claude mcp add playwright npx @playwright/mcp@latest
اطلب من مساعد الذكاء الاصطناعي التفاعل مع أي صفحة ويب:
Navigate to https://demo.playwright.dev/todomvc and add a few todo items.
يرى الوكيل الصفحة كشجرة إمكانية وصول منظمة:
- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
- listitem:
- checkbox "Toggle Todo" [ref=e10]
- text: "Buy groceries"
يستخدم مراجع العناصر مثل e5 وe10 للنقر والكتابة والتفاعل — بشكل حتمي ودون غموض بصري. تغطي الأدوات التنقل وملء النماذج ولقطات الشاشة ومحاكاة الشبكة وإدارة التخزين والمزيد.
استخدم playwright كمكتبة لنصوص أتمتة المتصفح — تجريف الويب، وإنشاء PDF، والتقاط لقطات الشاشة، وأي سير عمل يحتاج تحكمًا برمجيًا في المتصفح دون مشغّل اختبارات.
npm i playwright
التقاط لقطة شاشة:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
إنشاء ملف PDF:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.pdf({ path: 'page.pdf', format: 'A4' });
await browser.close();
محاكاة جهاز محمول:
import { chromium, devices } from 'playwright';
const browser = await chromium.launch();
const context = await browser.newContext(devices['iPhone 15']);
const page = await context.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'mobile.png' });
await browser.close();
اعتراض طلبات الشبكة:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
await page.goto('https://playwright.dev/');
await browser.close();
تجلب إضافة Playwright لـ VS Code تشغيل الاختبارات وتصحيح الأخطاء وتوليد الأكواد مباشرة إلى محررك.
شغّل وصحّح الاختبارات من المحرر بنقرة واحدة. عيّن نقاط توقف، وافحص المتغيرات، وتنقل خطوة بخطوة عبر تنفيذ الاختبار مع عرض مباشر للمتصفح.
ولّد الاختبارات باستخدام CodeGen. انقر على "Record new" لفتح متصفح — تنقل وتفاعل مع تطبيقك بينما يكتب Playwright كود الاختبار نيابةً عنك.
اختر المحددات. مرر فوق أي عنصر في المتصفح لرؤية أفضل محدد متاح، ثم انقر لنسخه إلى الحافظة.
تكامل عارض التتبع. فعّل "Show Trace Viewer" في الشريط الجانبي للحصول على أثر تنفيذ كامل بعد كل تشغيل اختبار — لقطات DOM وطلبات الشبكة وسجلات وحدة التحكم ولقطات شاشة في كل خطوة.
| Linux | macOS | Windows | |
|---|---|---|---|
| Chromium1 154.0.8037.0 | ✅ | ✅ | ✅ |
| WebKit 26.6 | ✅ | ✅ | ✅ |
| Firefox 155.0 | ✅ | ✅ | ✅ |
تنفيذ رأسي (بدون واجهة رسومية) ومرئي على جميع المنصات. 1 يستخدم Chrome for Testing افتراضيًا.