Playwright Deep-Dive Study Material
🔹 1. Playwright Core Architecture
● Playwright Engine:Controls multiple browser engines(Chromium, Firefox, WebKit).
● B
rowser Contexts:Like separate browser profiles →allow parallel execution in a
single browser instance.
● Pages:Tabs inside contexts.
● L
ocators:Smarter element finding than Selenium →role-based, text-based,
test-id-based.
🔹 2. Locator Strategies (Banking Examples)
// CSS selector
[Link]("#username").fill("testUser");
// By text
[Link]("text=Login").click();
// By role (a11y locator - best practice)
[Link]([Link], new
[Link]().setName("Login")).click();
// nth element
[Link](".transaction-row").nth(2).click();
✅ Banking Example: Automating login & checking account balance.
🔹
3. Handling Dynamic Elements (React/Angular
Banking Apps)
● Playwright auto-waits until element is visible & stable.
locatorinstead of
● Use page.$(better retries).
● Example:
[Link]("button:has-text('Transfer')").click();
🔹 4. Frames, Popups, and Alerts
// Frame
Frame frame = [Link]("paymentFrame");
[Link]("#cardNumber").fill("4111111111111111");
// Popup (new tab)
Page popup = [Link](() -> {
[Link]("a#openStatement");
});
[Link]([Link]());
// Alert/Confirm
[Link](dialog -> {
[Link]([Link]());
[Link]();
});
✅ Banking Example: Payment forms often load inside iframes.
🔹 5. Network Interception & Mocking
[Link]("**/api/balance", route -> {
[Link](new [Link]()
.setStatus(200)
.setBody("{ \"balance\": 100000 }"));
});
👉 Useful for simulating banking API outages or mocked data.
🔹 6. API Testing with Playwright
import { request, expect } from '@playwright/test';
test('Get customer balance API', async () => {
const api = await [Link]();
const response = await
[Link]('[Link]
expect([Link]()).toBe(200);
const body = await [Link]();
expect([Link]).toBeGreaterThan(0);
});
✅ Playwright can replacePostman/Newmanin automationpipelines.
🔹 7. Parallel Execution & Browser Contexts
test('parallel transfers', async ({ browser }) => {
const context1 = await [Link]();
const context2 = await [Link]();
const page1 = await [Link]();
const page2 = await [Link]();
await [Link]('[Link]
await [Link]('[Link]
});
✅ Helps simulatemultiple users logging in simultaneously(banking load testing).
🔹 8. Test Data & Fixtures
● Playwright test runner supportsfixtures→ reusablelogin/data.
[Link](async ({ page }) => {
await [Link]('[Link]
await [Link]('#username', 'testUser');
await [Link]('#password', 'password123');
await [Link]('#loginBtn');
});
🔹 9. Debugging & Reporting
npx playwright show-trace [Link]
● Trace Viewer:
● Screenshots:
[Link](new
[Link]().setPath([Link]("[Link]")));
● Video Recording:
BrowserContext context = [Link](new
[Link]().setRecordVideoDir([Link]("videos/")))
;
🔹 10. CI/CD Integration
● Run headless in Jenkins/GitHub Actions.
● Store reports, videos, and traces as artifacts.
● Typical command:
npx playwright test --reporter=html
📝 Playwright Interview Q&A
Q1. Difference between Playwright and Selenium?
● Playwright: Auto-wait, network mocking, trace debugging, faster.
● Selenium: Wider adoption, larger ecosystem, but more flaky on modern apps.
Q2. How does Playwright handle waits?
● Built-in auto-wait for elements to be stable.
[Link]()
● Explicit: [Link]()
, .
Q3. How to handle multiple tabs in Playwright?
●
waitForPopup()method.
Q4. How would you test banking API + UI in one flow?
/balanceendpoint→ validate.
● Use Playwright API testing to hit
● Then check UI reflects same value.
Q5. How to implement Page Object Model (POM) in Playwright?
● Create classes with locators & methods.
public class LoginPage {
private final Page page;
private final Locator username;
private final Locator password;
private final Locator loginBtn;
public LoginPage(Page page) {
[Link] = page;
[Link] = [Link]("#username");
[Link] = [Link]("#password");
[Link] = [Link]("#loginBtn");
}
public void login(String user, String pass) {
[Link](user);
[Link](pass);
[Link]();
}
}
Q6. How do you test file uploads/downloads in Playwright?
// Upload
[Link]("#fileUpload", [Link]("[Link]"));
// Download
Download download = [Link](() -> {
[Link]("a#downloadStatement");
});
[Link]([Link]("[Link]"));
Q7. How do you handle flaky tests in Playwright?
● Use auto-waits + retries.
[Link](2)in Playwright test runner.
● Use
● Use stable locators (
role text
, data-testid
, ).
✅ At this point, you’ll be able to:
● AnswerPlaywright vs Seleniuminterview Qs.
● Demonstratebanking scenarios in Playwright.
● BuildPOM framework with Playwright (Java or TS).
ould you like me to nowcreate a Playwright-specificInterview Kit PDF (Cheat Sheet +
W
Banking Test Scenarios + Q&A)just like the Java/SQL one, so you have it side by side for
preparation?
