Playwright Basics

1. What are the advantages of Playwright over Selenium?

• Faster Execution: Playwright is designed to be faster than Selenium because it controls browsers at a lower level using WebSockets, whereas Selenium relies on WebDriver.
• Multi-Browser Support: Supports Chromium, Firefox, and WebKit (Safari engine) with a single API.
• Auto-Waiting: Playwright automatically waits for elements to be ready before performing actions, reducing flaky tests.
• Better Locator Strategy: It has more advanced locators like locator(), which supports chaining and filtering.
• Built-in Network Interception: Playwright makes mocking API calls and handling network requests easy.
• Native Mobile Emulation: Supports device emulation (like iPhones, tablets) without external dependencies.
• Headless and Headed Modes: Playwright runs both headless (faster) and headed (for debugging) seamlessly.

2. What are the disadvantages of Playwright?

• Limited Real-Device Testing: Unlike Selenium Grid, Playwright does not support real-device testing directly.
• Smaller Community and Support: Selenium has a larger community and more extensive support across industries.
• Limited Integrations: Selenium has better support for third-party tools like Appium for mobile testing.
• More Memory Usage: Playwright launches a new browser instance per test, which can be memory-intensive in large test suites.

3. How does Playwright handle auto-waiting and retries?

Playwright automatically waits for elements to be:

• Attached to the DOM
• Visible
• Stable (not animating)
• Ready to receive events

await page.click('button'); // No need for explicit waits

4. What is the difference between page.locator() and page.$()?

const button = page.locator('button');  // Can be reused
await button.click();  

const buttonElement = await page.$('button'); // Cannot be reused
await buttonElement?.click();

5. How does Playwright handle dynamic elements?

• Auto-waiting: Playwright waits for elements to be visible before interacting.
• Flexible Selectors: Use locator().first(), locator().last(), or locator().nth(index) for dynamically changing elements.
• Explicit Waiting (if needed):

await page.waitForSelector('.loading', { state: 'hidden' });
await page.click('button');

6. What is the role of selectors in Playwright, and how do they differ from Selenium selectors?

Role of Selectors in Playwright:

• Locating elements for interactions (clicking, typing, etc.).
• Supports advanced selectors like CSS, XPath, text selectors, and role-based selectors.
• Playwright-specific selectors like :has-text(), :nth-match(), and :visible are more powerful than Selenium.

await page.locator('button:has-text("Login")').click(); // Playwright
await driver.findElement(By.xpath("//button[text()='Login']")).click(); // Selenium

7. What are the key differences between Page, Frame, and Worker in Playwright?

• Page : Represents a single browser tab/window.
• Frame : Represents an iframe within a page. Allows interaction inside iframe content.
• Worker : Represents a Web Worker (background thread). Used for service workers or background scripts.

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

8. How does Playwright handle browser context isolation?

Browser Contexts allow Playwright to create isolated sessions within the same browser instance.

• Each context has its own cookies, local storage, and session.
• More efficient than opening multiple browser instances.

const context1 = await browser.newContext();
const page1 = await context1.newPage();

const context2 = await browser.newContext();
const page2 = await context2.newPage(); // Separate session

9. How does Playwright handle multi-tab scenarios?

• Use context.newPage() to create a new tab.
• Listen for the page event when a new tab opens.

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

10. How can you manage browser-specific behaviors in Playwright?

Use different browser types:

const browser = await chromium.launch();

if (browserType.name() === 'webkit') {
  console.log('Running on WebKit');
}

11. How do you handle authentication pop-ups in Playwright?

For Basic Authentication: Use httpCredentials:

const context = await browser.newContext({
  httpCredentials: { username: 'user', password: 'pass' }
});

await page.fill('#username', 'user');
await page.fill('#password', 'pass');
await page.click('#login');
await context.storageState({ path: 'auth.json' });

12. What are some debugging techniques in Playwright?

• Use Headed Mode: Run with { headless: false }
• Pause Execution:

• Slow Motion Mode:

• Record Videos & Screenshots:

13. How does Playwright support parallel test execution, and how does it differ from Selenium?

• Parallel Execution: Playwright runs tests in parallel using worker processes.
• More efficient than Selenium, which runs tests sequentially unless Selenium Grid is used
.

module.exports = {
  workers: 4, // Run tests in 4 parallel workers
};

14. How do you handle flaky tests in Playwright?

• Use auto-waiting (locator().click())
• Retry failed tests using retries in playwright.config.js

• Disable animations to stabilize UI tests.

15. Can we have multiple configuration files in Playwright?

Yes! You can create multiple playwright.config.js files for different environments.
Example:
playwright test --config=playwright.dev.config.js
playwright test --config=playwright.prod.config.js