TypeScript · @playwright/test

Insurance with Playwright

Vehicle details with dependent dropdowns, plan comparison with an IDV slider and add-on switches, a proposal with nominee, and payment inside an iframe gateway.

App under test

🛡️ SecureLife

URL: /apps/insurance
Reg. format: MH12AB1234
Gateway card: any 16 digits
Owner age: 18+ (DD/MM/YYYY)

Launch 🛡️ SecureLife →📘 Project KT 📋 View all 16 test cases

Scenarios to automate

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

1
Dependent dropdowns
Beginner
vehicle-model is disabled until vehicle-make is chosen, and resets when the make changes.
2
Conditional field
Beginner
claim-no reveals ncb; claim-yes hides it and removes the bonus from the premium.
3
Pattern validation
Intermediate
reg-number and owner-dob reject bad formats with error-* messages; under-18 owners fail.
4
Plan comparison
Intermediate
Assert premium-* for all three plans; third-party disables idv-slider and add-on switches.
5
Range slider
Advanced
Move idv-slider (keyboard arrows or fill) and verify idv-value and od-premium change.
6
Iframe payment
Advanced
Switch into payment-gateway, test gw-error validation, pay, and switch back to the parent.
7
Cancel in the iframe
Advanced
gw-cancel closes the gateway and shows payment-cancelled in the parent page.
8
Download policy
Intermediate
download-policy saves a .txt; assert the file name contains the policy number.

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

securelife.spec.ts

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

// playwright.config.ts → use: { baseURL: 'https://www.practiceqaautomation.com' }
// Locators in this suite: getByRole ×4 · getByLabel ×5 · getByPlaceholder ×1 · CSS ×5 · XPath ×2 · getByTestId ×8
test('buys a car insurance policy', async ({ page }) => {
  await page.goto('/apps/insurance');
  await page.getByLabel('Registration number').fill('MH12AB1234');
  await page.getByRole('combobox', { name: 'Make' }).selectOption('maruti');
  await page.locator('#vehicle-model').selectOption('swift');
  await page.getByTestId('fuel-petrol').click();
  await page.getByRole('combobox', { name: 'Registration year' }).selectOption('2021');
  await page.locator('xpath=//button[normalize-space()="No"]').click();
  await page.getByLabel('No-claim bonus (NCB)').selectOption('20');
  await page.locator('xpath=//button[normalize-space()="View plans"]').click();
  await expect(page).toHaveURL(/\/apps\/insurance\/quote/);
  await page.getByTestId('plan-comprehensive').click();
  await page.getByTestId('addon-roadside').click();
  await expect(page.getByTestId('total-premium')).toContainText('14,442.00');
  await page.getByRole('button', { name: 'Buy this plan' }).click();

  // Proposal and nominee
  await page.locator('#owner-name').fill('Amir Khan');
  await page.getByPlaceholder('DD/MM/YYYY', { exact: true }).fill('15/08/1990');
  await page.getByLabel('Email').fill('amir@example.com');
  await page.locator('#owner-phone').fill('9876543210');
  await page.getByLabel('Address').fill('12 Palm Street, Pune 411001');
  await page.locator('#nominee-name').fill('Sara Khan');
  await page.getByRole('combobox', { name: 'Relationship' }).selectOption('spouse');
  await page.getByLabel('Age', { exact: true }).fill('32');
  await page.locator('#declaration').check();
  await page.getByTestId('pay-premium').click();

  // Pay inside the iframe gateway
  await page.frameLocator('[data-testid="payment-gateway"]').getByTestId('gw-card').fill('4111111111111111');
  await page.frameLocator('[data-testid="payment-gateway"]').getByTestId('gw-expiry').fill('1230');
  await page.frameLocator('[data-testid="payment-gateway"]').getByTestId('gw-cvv').fill('123');
  await page.frameLocator('[data-testid="payment-gateway"]').getByTestId('gw-pay').click();
  await expect(page.getByTestId('policy-issued')).toBeVisible();
  await expect(page.getByTestId('policy-number')).toContainText('SL/2026/');
  await expect(page.getByTestId('policy-card-last4')).toContainText('1111');
});