TypeScript · @playwright/test

Utilities with Playwright

OTP login with a resend countdown, a usage chart with hover tooltips, meter readings with slab-tariff bill maths, full or partial payments, an autopay mandate and outage reports.

App under test

⚡ PowerGrid

URL: /apps/utilities
Consumer no.: 1234567890
OTP: 111222
Tariff: ₹3 / ₹5 / ₹7.5 + ₹50

Launch ⚡ PowerGrid →📘 Project KT 📋 View all 17 test cases

Scenarios to automate

Work top to bottom — each one adds a new technique.

1
OTP & resend timer
Intermediate
resend-otp stays disabled while resend-countdown ticks from 30 — mock the clock or wait for enabled.
2
Hover tooltips
Intermediate
Hover usage-bar-* to show usage-tooltip with units and amount (also works on keyboard focus).
3
Reading validation
Beginner
A reading below last-reading or non-numeric shows error-new-reading.
4
High-usage confirm
Intermediate
More than 1,000 units reveals confirm-high, which must be ticked to continue.
5
Slab maths
Advanced
350 units → 100×3 + 200×5 + 50×7.5 + 50 = ₹1,725.00 in estimated-bill; slab-row lists each band.
6
Partial payments
Intermediate
pay-partial below 50% of the due shows pay-error; a valid amount leaves remaining-due.
7
Autopay switch
Intermediate
Turning autopay-toggle on opens mandate-modal; cancelling leaves it off.
8
Conditional warning
Beginner
Choosing “Sparking wire” shows safety-warning before submitting an outage.

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.

Language

powergrid.spec.ts

import { test, expect } from '@playwright/test';

// playwright.config.ts → use: { baseURL: 'https://www.practiceqaautomation.com' }
// Locators in this suite: getByRole ×4 · getByLabel ×3 · CSS ×3 · XPath ×4 · getByTestId ×9
test('submits a reading, sets autopay and pays', async ({ page }) => {
  await page.goto('/apps/utilities');
  await page.getByLabel('Consumer number').fill('1234567890');
  await page.getByRole('button', { name: 'Send OTP' }).click();
  await expect(page.getByTestId('otp-sent')).toBeVisible();
  await expect(page.getByTestId('resend-otp')).toContainText('Resend OTP in');
  await page.locator('#utility-otp').fill('111222');
  await page.locator('xpath=//button[normalize-space()="Verify & sign in"]').click();
  await expect(page).toHaveURL(/\/apps\/utilities\/dashboard/);
  await page.getByLabel('Current reading (kWh)').fill('4870');
  await page.getByRole('button', { name: 'Calculate bill' }).click();
  await expect(page.getByTestId('units-consumed')).toContainText('350 kWh');
  await expect(page.getByTestId('estimated-bill')).toContainText('₹1,725.00');
  await expect(page.getByTestId('amount-due')).toContainText('₹1,725.00');
  await page.getByRole('switch', { name: 'Autopay' }).click();
  await page.locator('#mandate-bank').selectOption('TrustBank');
  await page.locator('#mandate-max').fill('3000');
  await page.locator('xpath=//button[normalize-space()="Authorise"]').click();
  await expect(page.getByTestId('autopay-status')).toContainText('Active via TrustBank');
  await page.locator('xpath=//a[normalize-space()="Pay now"]').click();
  await page.getByTestId('pay-full').click();
  await page.getByLabel('Pay with').selectOption('upi');
  await page.getByRole('button', { name: 'Pay', exact: true }).click();
  await expect(page.getByTestId('paid-amount')).toContainText('₹1,725.00');
  await page.locator('xpath=//a[normalize-space()="Back to dashboard"]').click();
  await expect(page.getByTestId('bill-status')).toContainText('Paid');
});