TypeScript · @playwright/test
Banking with Playwright
Two-step login with lockout, account dashboard, add a beneficiary, transfer funds with OTP, manager approval for large transfers, session timeout, a paginated statement and a buggy build.
App under test
🏦 TrustBank
- URL
- /apps/bank
- Customer ID
- 100200300
- Manager ID
- 900800700
- Password
- Bank@123
- Security answer
- greenwood
- OTP
- 246810
Scenarios to automate
Work top to bottom — each one adds a new technique.
- 1
Invalid login & lockout
BeginnerWrong password shows attempts left in login-error; the 3rd failure locks the form (reset-lock).
- 2
Two-step authentication
BeginnerAfter step 1, security-question appears; a wrong answer keeps you on step 2.
- 3
Route guard
BeginnerOpening /apps/bank/dashboard signed out redirects to the login page.
- 4
Add a payee
IntermediateValidate IFSC pattern and matching account numbers; pasting into the confirm field is blocked.
- 5
Transfer rules
IntermediateBalance, daily limit (₹50,000) and RTGS minimum each raise their own error-* message.
- 6
OTP step
IntermediateWrong OTP shows otp-error; 246810 completes the transfer after a processing overlay.
- 7
Balance reconciliation
Advancednew-balance on the receipt must equal the old balance minus the amount, and match the dashboard.
- 8
Statement filters & paging
AdvancedCombine history-* filters, walk page-next until disabled, export download-statement CSV.
- 9
Session timeout
AdvancedMock the clock 10 minutes ahead: you're logged out and see session-expired.
- 10
Maker and checker
Advanced₹25,000 or more shows approval-notice and ends on transfer-pending with the balance unchanged; manager 900800700 approves or rejects (10+ character reason) in approvals-table.
- 11
Role-based access
IntermediateThe customer sees access-denied on /apps/bank/approvals; the manager sees it on /apps/bank/transfer.
- 12
Bug hunt
AdvancedCustomer ID 100200399 has 5 seeded defects (daily limit, receipt balance, debit filter, CSV, OTP) — catch each with a test.
- 13
UI vs API
AdvancedPOST /api/bank/transfer-check returns the same error text as the form; GET /api/bank/rules lists the limits.
Sample Playwright suite
A working starting point that finds elements every way Playwright can — by role, label, text, id, name, CSS, XPath and data-testid — so you practice them all. Pick your language, switch to data-testid only to compare, or try your own in the Locator Playground.
import { test, expect } from '@playwright/test';
// playwright.config.ts → use: { baseURL: 'https://www.practiceqaautomation.com' }
// Locators in this suite: getByRole ×4 · getByLabel ×5 · CSS ×5 · XPath ×3 · getByTestId ×9
test('transfers money to a new payee', async ({ page }) => {
await page.goto('/apps/bank');
await page.getByLabel('Customer ID').fill('100200300');
await page.locator('#bank-password').fill('Bank@123');
await page.getByRole('button', { name: 'Continue' }).click();
await expect(page.getByTestId('security-question')).toBeVisible();
await page.getByLabel('Your answer').fill('greenwood');
await page.locator('xpath=//button[normalize-space()="Sign in"]').click();
await expect(page).toHaveURL(/\/apps\/bank\/dashboard/);
await expect(page.getByTestId('customer-name')).toContainText('Amir Khan');
await page.getByTestId('action-transfer').click();
await expect(page).toHaveURL(/\/apps\/bank\/transfer/);
await page.getByRole('combobox', { name: 'From account' }).selectOption('savings');
// Add a beneficiary in the modal
await page.getByTestId('add-payee').click();
await page.locator('#payee-name').fill('Ravi Kumar');
await page.getByLabel('Account number', { exact: true }).fill('123456789012');
await page.locator('#payee-confirm-account').fill('123456789012');
await page.getByLabel('IFSC code').fill('TRST0001234');
await page.locator('xpath=//button[normalize-space()="Save payee"]').click();
await page.locator('#amount').fill('2500');
await page.getByTestId('mode-imps').click();
await page.getByLabel('Remarks (optional)').fill('Rent');
await page.getByRole('button', { name: 'Review transfer' }).click();
await expect(page.getByTestId('review-payee')).toContainText('Ravi Kumar');
await page.locator('xpath=//button[normalize-space()="Confirm"]').click();
await page.locator('#otp-input').fill('246810');
await page.getByRole('button', { name: 'Verify & transfer' }).click();
await expect(page.getByTestId('transfer-success')).toBeVisible();
await expect(page.getByTestId('transfer-amount')).toContainText('2,500.00');
await expect(page.getByTestId('new-balance')).toContainText('1,22,930.50');
});