Playwright Basics

Installation

# Install Playwright
npm init playwright@latest

# Install Playwright in existing project
npm install @playwright/test

# Install Browsers
npx playwright install

Folder SructureStructure

📂 your-playwright-project/
├── 📂 tests/                     # Main folder for test cases
│     ├── 📂 e2e/                 # End-to-End (UI) tests
│     │      ├── login.spec.js    # Example test case
│     │      ├── dashboard.spec.js
│     │      └── checkout.spec.js
│     ├── 📂 api/                 # API testing scripts
│     │      └── apiTest.spec.js
│     ├── 📂 components/          # Reusable component tests (if applicable)
│     │      └── modal.spec.js
│     └── 📂 helpers/             # Utility functions (e.g., custom locators)
│            └── utils.js
├── 📂 fixtures/                  # Shared test setup (e.g., user auth, config)
│     └── auth.js
├── 📂 reports/                   # Test reports (after execution)
│     └── playwright-report/      # Auto-generated HTML reports
├── 📂 screenshots/               # Screenshots for debugging
│     └── error-screenshot.png
├── 📂 videos/                    # Video recordings (if enabled)
│     └── test-video.mp4
├── .github/                      # GitHub Actions (CI/CD configuration)
│     └── workflows/
│            └── playwright.yml
├── package.json                  # Node.js dependencies & scripts
├── playwright.config.js          # Main Playwright configuration
└── README.md                     # Project documentation

Run Commands

Run all tests

npx playwright test

View test report

npx playwright show-report

Run tests in a specific folder

npx playwright test tests/e2e/

Launch Browser

Javascript

Copy

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://example.com');
  await browser.close();
})();

Browser Contexts

Javascript

Copy

const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  locale: 'en-US',
  geolocation: { latitude: 37.7749, longitude: -122.4194 },
  permissions: ['geolocation']
});

Page Actions

javascript

Copy

await page.goto('https://example.com');
await page.fill('#username', 'myUser');
await page.click('button#submit');
await page.screenshot({ path: 'screenshot.png' });

Selectors

Javascript

Copy

await page.locator('text="Sign In"').click();
await page.locator('button >> nth=1').click();
await page.locator('#inputId').fill('value');

Common Selector Types:

CSS: 'button.submit'
Text: text='Submit'
XPath: xpath=//button[@id="submit"]
Role: role=button[name="Submit"]

Assertions

Javascript

Copy

const { expect } = require('@playwright/test');

await expect(page).toHaveTitle('Example Domain');
await expect(page.locator('#success')).toBeVisible();
await expect(page.locator('#output')).toHaveText('Hello');

Waiting Mechanisms

javascript

Copy

await page.waitForSelector('#element', { timeout: 5000 });
await page.waitForLoadState('networkidle');
await page.waitForTimeout(3000); // Static wait

Handling Frames

javascript

Copy

const frame = page.frame({ name: 'iframeName' });
await frame.click('button.submit');

File Upload & Download

javascript

Copy

// Upload a file
await page.setInputFiles('input[type="file"]', 'path/to/file.txt');

// Download a file
const [download] = await Promise.all([
  page.waitForEvent('download'),
  page.click('#download')
]);
await download.saveAs('downloadedFile.txt');

Multi-Tab (New Window)

javascript

Copy

const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.click('a[target="_blank"]')
]);
await newPage.waitForLoadState();

Screenshots & Videos

Javascript

Copy

await page.screenshot({ path: 'screenshot.png', fullPage: true });

// Record Video (Set up context)
const context = await browser.newContext({
  recordVideo: { dir: 'videos/' }
});