Top 10 Essential Playwright Questions and Answers for Web Testing

1. What is Playwright?

Answer:
Playwright is an open-source automation framework developed by Microsoft for web testing and scraping. It supports multiple browsers (Chromium, Firefox, and WebKit) and provides powerful features like auto-waiting, screenshots, and tracing.

2. How do you install Playwright?

Answer:
You can install Playwright using npm or yarn:

npm install @playwright/test
# or
yarn add @playwright/test

Then, install the necessary browser binaries:

npx playwright install

3. How do you launch a browser and open a page in Playwright?

Answer:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
})();

4. How do you interact with a button using Playwright?

Answer:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.click('#submitButton');
  await browser.close();
})();

5. How do you handle alerts and dialogs in Playwright?

Answer:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  page.on('dialog', async dialog => {
    console.log(dialog.message());
    await dialog.accept();
  });
  await page.goto('https://example.com');
  await page.click('#alertButton');
  await browser.close();
})();

6. How do you take a screenshot in Playwright?

Answer:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
})();

7. How do you select an option from a dropdown in Playwright?

Answer:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.selectOption('#dropdown', 'option2');
  await browser.close();
})();

8. How do you handle file uploads in Playwright?

Answer:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.setInputFiles('#file-upload', 'path/to/file.txt');
  await browser.close();
})();

9. How do you wait for an element to be visible in Playwright?

Answer:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.waitForSelector('#visible-element', { state: 'visible' });
  await browser.close();
})();

10. How do you run Playwright tests in different browsers?

Answer:

const { chromium, firefox, webkit } = require('playwright');

(async () => {
  for (const browserType of [chromium, firefox, webkit]) {
    const browser = await browserType.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    // Perform actions
    await browser.close();
  }
})();