71Final Review & Gaps

71.1 Coverage matrix — what this ebook covers

71.2 Known gaps (be honest)

71.3 Suggested next steps

1. Build a portfolio project. One Playwright TS framework with: POM, custom fixtures, API + UI + DB tests, GitHub Actions, Allure report. Open-source on GitHub. Mention in your CV.
2. Contribute to Playwright. Even small docs PRs are credible signal in interviews.
3. Take one paid course on system design. Grokking the System Design Interview / DesignGurus / educative.io. Reinforces Module 26 & 38.
4. Read one architecture book. "Designing Data-Intensive Applications" by Kleppmann is the gold standard.
5. Set up a personal CI lab. Free tier of GitHub Actions; run Playwright against any open API. Practice debugging real failures.
6. Mock interview. Pramp, interviewing.io for live practice.

71.4 Quick "where do I find X?" index

71.5 Quick-Reference Code Patterns

Common patterns that span multiple modules — copy-paste starting points.

Fixture composition template

import { test as base } from "@playwright/test";
import { LoginPage } from "./pages/LoginPage";
import { ApiClient } from "./utils/ApiClient";

type Fixtures = { loginPage: LoginPage; api: ApiClient; authToken: string };

export const test = base.extend<Fixtures>({
  api: async ({}, use) => {
    const client = new ApiClient(process.env.API_BASE_URL!);
    await use(client);
    await client.cleanup();
  },

  authToken: async ({ api }, use) => {
    const token = await api.createTestUser();
    await use(token);
    await api.deleteTestUser(token);
  },

  loginPage: async ({ page, authToken }, use) => {
    await page.context().addCookies([{ name: "token", value: authToken, domain: "localhost", path: "/" }]);
    await use(new LoginPage(page));
  },
});

Page Object Model skeleton

import { type Page, type Locator } from "@playwright/test";

export class CheckoutPage {
  readonly page: Page;
  readonly proceedBtn: Locator;
  readonly orderTotal: Locator;

  constructor(page: Page) {
    this.page       = page;
    this.proceedBtn = page.getByRole("button", { name: /proceed to payment/i });
    this.orderTotal = page.getByTestId("order-total");
  }

  async goto() { await this.page.goto("/checkout"); }

  async getTotal(): Promise<number> {
    const text = await this.orderTotal.textContent();
    return parseFloat(text?.replace(/[^0-9.]/g, "") ?? "0");
  }

  async proceed() {
    await this.proceedBtn.click();
    await this.page.waitForURL("**/payment");
  }
}

API + UI hybrid test pattern

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

test("order visible after API creation", async ({ page, request }) => {
  const resp = await request.post("/api/orders", {
    data: { product_id: "PRD-001", qty: 2 }
  });
  expect(resp.ok()).toBeTruthy();
  const { order_id } = await resp.json();

  await page.goto(`/orders/${order_id}`);
  await expect(page.getByTestId("order-id")).toContainText(order_id);
  await expect(page.getByTestId("order-status")).toHaveText("pending");
});

Global setup — auth state once per run

// global-setup.ts
import { chromium } from "@playwright/test";

export default async function globalSetup() {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page    = await context.newPage();

  await page.goto(process.env.BASE_URL + "/login");
  await page.fill('[name=email]',    process.env.TEST_EMAIL!);
  await page.fill('[name=password]', process.env.TEST_PASS!);
  await page.click('[type=submit]');
  await page.waitForURL("**/dashboard");

  await context.storageState({ path: "playwright/.auth/user.json" });
  await browser.close();
}
// playwright.config.ts: globalSetup: "./global-setup"
// use: { storageState: "playwright/.auth/user.json" }

71.6 Final pep talk