🎭 Playwright

दस्तावेज़ीकरण | API संदर्भ

Playwright वेब स्वचालन और परीक्षण के लिए एक फ्रेमवर्क है। यह एक ही API से Chromium, Firefox और WebKit को चलाता है — आपके परीक्षणों में, आपकी स्क्रिप्ट्स में, और AI एजेंटों के लिए एक उपकरण के रूप में।

आरंभ करें

अपने वर्कफ़्लो के अनुकूल मार्ग चुनें:

Playwright Test

Playwright Test, एंड-टू-एंड परीक्षण के लिए निर्मित एक पूर्ण-विशेषताओं वाला टेस्ट रनर है। यह पूर्ण ब्राउज़र आइसोलेशन, ऑटो-वेटिंग और वेब-फर्स्ट एसर्शन के साथ 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 एलिमेंट्स के एक्शनेबल होने की प्रतीक्षा करता है, और एसर्शन स्वचालित रूप से तब तक पुनः प्रयास करते हैं जब तक शर्तें पूरी नहीं हो जातीं।

लोकेटर। लचीले लोकेटरों से एलिमेंट ढूँढें जो उपयोगकर्ताओं के पृष्ठ देखने के तरीके को प्रतिबिंबित करते हैं:

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' });

ट्रेसिंग। विफलता पर निष्पादन ट्रेस, स्क्रीनशॉट और वीडियो कैप्चर करें। Trace Viewer में हर एक्शन, DOM स्नैपशॉट, नेटवर्क अनुरोध और कंसोल संदेश का निरीक्षण करें:

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry',
  },
});

npx playwright show-trace trace.zip

समानांतरता। परीक्षण डिफ़ॉल्ट रूप से सभी कॉन्फ़िगर किए गए ब्राउज़रों पर समानांतर चलते हैं।

पूर्ण परीक्षण दस्तावेज़ीकरण

Playwright CLI

Playwright CLI कोडिंग एजेंटों के लिए डिज़ाइन किया गया ब्राउज़र स्वचालन हेतु एक कमांड-लाइन इंटरफ़ेस है। यह 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

पूर्ण CLI दस्तावेज़ीकरण | GitHub

Playwright MCP

Playwright MCP सर्वर Model Context Protocol के माध्यम से AI एजेंटों को पूर्ण ब्राउज़र नियंत्रण देता है। एजेंट संरचित एक्सेसिबिलिटी स्नैपशॉट का उपयोग करके पृष्ठों के साथ इंटरैक्ट करते हैं — किसी विज़न मॉडल या स्क्रीनशॉट की आवश्यकता नहीं।

सेटअप

अपने 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

यह कैसे काम करता है

अपने AI सहायक से किसी भी वेब पेज के साथ इंटरैक्ट करने के लिए कहें:

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 जैसे एलिमेंट रेफ्स का उपयोग करता है — निर्धारित रूप से और बिना किसी दृश्य अस्पष्टता के। टूल्स में नेविगेशन, फॉर्म भरना, स्क्रीनशॉट, नेटवर्क मॉकिंग, स्टोरेज प्रबंधन और बहुत कुछ शामिल है।

पूर्ण MCP दस्तावेज़ीकरण | GitHub

Playwright Library

ब्राउज़र स्वचालन स्क्रिप्ट्स के लिए 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();

लाइब्रेरी दस्तावेज़ीकरण | API संदर्भ

VS Code Extension

Playwright VS Code एक्सटेंशन परीक्षण चलाने, डिबगिंग और कोड जनरेशन को सीधे आपके एडिटर में लाता है।

परीक्षण चलाएँ और डिबग करें एडिटर से एक ही क्लिक में। ब्रेकपॉइंट सेट करें, वेरिएबल्स का निरीक्षण करें, और लाइव ब्राउज़र व्यू के साथ परीक्षण निष्पादन को चरण-दर-चरण देखें।

CodeGen के साथ परीक्षण जनरेट करें। ब्राउज़र खोलने के लिए "Record new" पर क्लिक करें — अपने ऐप में नेविगेट करें और इंटरैक्ट करें, जबकि Playwright आपके लिए परीक्षण कोड लिखता है।

लोकेटर चुनें। सर्वोत्तम उपलब्ध लोकेटर देखने के लिए ब्राउज़र में किसी भी एलिमेंट पर होवर करें, फिर इसे अपने क्लिपबोर्ड पर कॉपी करने के लिए क्लिक करें।

Trace Viewer एकीकरण। प्रत्येक परीक्षण रन के बाद पूर्ण निष्पादन ट्रेस पाने के लिए साइडबार में "Show Trace Viewer" सक्षम करें — हर चरण पर DOM स्नैपशॉट, नेटवर्क अनुरोध, कंसोल लॉग और स्क्रीनशॉट।

एक्सटेंशन इंस्टॉल करें | VS Code गाइड

क्रॉस-ब्राउज़र समर्थन

सभी प्लेटफ़ॉर्म पर हेडलेस और हेडेड निष्पादन। ¹ डिफ़ॉल्ट रूप से Chrome for Testing का उपयोग करता है।

अन्य भाषाएँ

Playwright Python, .NET और Java के लिए भी उपलब्ध है।

संसाधन

• दस्तावेज़ीकरण
• API संदर्भ
• MCP सर्वर
• कोडिंग एजेंटों के लिए CLI
• VS Code एक्सटेंशन
• योगदान मार्गदर्शिका
• परिवर्तन लॉग
• Discord