Flake-Free Tests with Playwright + TS

awu-pw-suite/
├── playwright.config.ts
├── package.json
├── specs/
│   ├── web/
│   │   ├── sign-in.spec.ts
│   │   └── enrolment.spec.ts
│   └── service/
│       └── courses.api.spec.ts
├── screens/               # screen objects (POM)
│   ├── SignInScreen.ts
│   └── CatalogScreen.ts
├── kit/
│   └── awu-test.ts        # extended test with custom fixtures
├── fixtures/
│   └── learners.json      # test data
└── support/
    └── formatters.ts

import { test, expect } from '@playwright/test';
 
test('learner can add a course to cart', async ({ page }) => {
  // Arrange
  await page.goto('/courses');
 
  // Act
  await page.getByRole('link', { name: 'API Automation' }).click();
  await page.getByRole('button', { name: 'Add to cart' }).click();
 
  // Assert
  await expect(page.getByTestId('cart-count')).toHaveText('1');
});

// Filter rows by text, then act inside the matching row
await page.getByRole('row')
  .filter({ hasText: 'Playwright Batch' })
  .getByRole('button', { name: 'Enroll' })
  .click();
 
// Position (use only when order is guaranteed)
await page.locator('.course-card').nth(2).click();
await page.locator('.course-card').last().click();
 
// Scope inside a section
const sidebar = page.getByRole('navigation', { name: 'Learner menu' });
await sidebar.getByRole('link', { name: 'My certificates' }).click();

// screens/SignInScreen.ts
import { type Page, type Locator, expect } from '@playwright/test';
 
export class SignInScreen {
  readonly learnerEmail: Locator;
  readonly secretKey: Locator;
  readonly continueBtn: Locator;
  readonly alertBanner: Locator;
 
  constructor(private readonly page: Page) {
    this.learnerEmail = page.getByLabel('Learner email');
    this.secretKey = page.getByLabel('Account password');
    this.continueBtn = page.getByRole('button', { name: 'Continue to portal' });
    this.alertBanner = page.getByRole('alert');
  }
 
  async visit() {
    await this.page.goto('/sign-in');
  }
 
  async enterPortal(email: string, secret: string) {
    await this.learnerEmail.fill(email);
    await this.secretKey.fill(secret);
    await this.continueBtn.click();
  }
 
  async expectAlert(text: string) {
    await expect(this.alertBanner).toContainText(text);
  }
}

import { test } from '@playwright/test';
import { SignInScreen } from '../../screens/SignInScreen';
 
test('wrong secret shows the alert banner', async ({ page }) => {
  const signIn = new SignInScreen(page);
  await signIn.visit();
  await signIn.enterPortal('priya.k@awu.test', 'not-my-secret');
  await signIn.expectAlert('Email or password is incorrect');
});

// Save the signed-in session
await page.context().storageState({ path: '.awu-session/learner-state.json' });
 
// Reuse it from config
use: { storageState: '.awu-session/learner-state.json' }

test('API: course catalogue is not empty', async ({ request }) => {
  const res = await request.get('/api/courses');
  expect(res.status()).toBe(200);
  const body = await res.json();
  expect(body.length).toBeGreaterThan(0);
});

test('shows empty-state when no courses', async ({ page }) => {
  await page.route('**/api/courses', (route) =>
    route.fulfill({ status: 200, contentType: 'application/json', body: '[]' }),
  );
  await page.goto('/courses');
  await expect(page.getByText('No courses yet')).toBeVisible();
});
 
test('shows error banner on 500', async ({ page }) => {
  await page.route('**/api/courses', (route) => route.fulfill({ status: 500 }));
  await page.goto('/courses');
  await expect(page.getByRole('alert')).toContainText('Something went wrong');
});

{
  "mcpServers": {
    "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] }
  }
}