Migrating from Selenium to Playwright

📌 Definition:

📖 Detailed Explanation:

A big-bang rewrite is risky; the pragmatic path is incremental. Start by standing up Playwright alongside Selenium in the same repo, port the flakiest and highest-value journeys first (where auto-waiting pays off most), and let the two suites coexist until Playwright reaches parity. Concept mapping: WebElement becomes a lazy Locator; WebDriverWait/ExpectedConditions largely disappear thanks to auto-waiting and web-first assertions; findElement(By.xpath/css) becomes semantic getByRole/getByLabel (a chance to upgrade brittle selectors); switchTo().frame() becomes frameLocator; Actions/JS-executor tricks become native APIs (hover, dragTo, setInputFiles). Page objects usually port with light edits because the structure is the same. Team enablement matters: codegen and UI Mode shorten the learning curve. Track flaky-rate and runtime before/after to justify the effort with data.

🔑 Key Points:

• Incremental, not big-bang: run Playwright alongside Selenium; migrate flaky/high-value tests first
• Concept map: WebElement→Locator, explicit waits→auto-wait, switchTo→frameLocator, JS-executor→native APIs
• Rewrite brittle XPath/CSS as semantic getByRole/getByLabel during the move
• Page-object structure ports with minor edits; assertions move to web-first expect
• Use codegen/UI Mode for enablement; track flaky-rate and runtime to prove ROI

🌍 Real-World Example:

📎 Code Example:

// Selenium (Java) — explicit wait + XPath + frame switching
// WebElement btn = new WebDriverWait(driver, Duration.ofSeconds(10))
//   .until(ExpectedConditions.elementToBeClickable(By.xpath("//button[text()='Pay']")));
// driver.switchTo().frame("card");
// driver.findElement(By.id("num")).sendKeys("4242...");
// driver.switchTo().defaultContent();
// btn.click();

// Playwright — auto-wait + semantic locator + frameLocator, no switching
await page.frameLocator('iframe[name="card"]')
  .getByLabel('Card number').fill('4242424242424242');
await page.getByRole('button', { name: 'Pay' }).click();
await expect(page.getByText('Payment successful')).toBeVisible();