@pwtap/create 0.1.0

package/template/tests/api/pet.api.ts

@@ -0,0 +1,60 @@
+import { expect, test } from '@fixtures';
+
+import type { Pet } from '@api/models/pet';
+
+// Layer 3 — the test layer. Tests speak business language via the service (petService) and, where
+// useful, drop to the base client (apiClient) to assert on the raw HTTP shape. Neither touches
+// Playwright's request context directly. baseURL comes from the `api` project (API_BASE_URL).
+
+test.describe('Petstore /pet API', () => {
+  test('findAvailable returns only available pets', async ({ petService }) => {
+    const pets = await petService.findAvailable();
+
+    expect(pets.length).toBeGreaterThan(0);
+    expect(pets.every(pet => pet.status === 'available')).toBeTruthy();
+  });
+
+  test('service-layer filter: available pets by category all carry that category', async ({
+    petService,
+  }) => {
+    const category = 'Dogs';
+    const all = await petService.findAvailable();
+    const dogs = await petService.findAvailableByCategory(category);
+
+    // The endpoint has no category filter — the service derived this by reading then filtering.
+    expect(all.length).toBeGreaterThan(0);
+    expect(dogs.length).toBeLessThanOrEqual(all.length);
+    expect(dogs.every(pet => pet.category?.name === category)).toBeTruthy();
+  });
+
+  test('CRUD: create → read back → delete', async ({ petService }) => {
+    const petId = Date.now(); // unique per run, within JS safe-integer range
+    const draft: Pet = {
+      id: petId,
+      name: 'claude-e2e',
+      photoUrls: ['https://example.com/dog.png'],
+      category: { id: 1, name: 'Dogs' },
+      tags: [{ id: 1, name: 'e2e' }],
+      status: 'available',
+    };
+
+    const created = await petService.create(draft);
+    expect(created.id).toBe(petId);
+    expect(created.name).toBe(draft.name);
+
+    const fetched = await petService.getById(petId);
+    expect(fetched.name).toBe(draft.name);
+    expect(fetched.status).toBe('available');
+
+    const deleteStatus = await petService.deleteById(petId);
+    expect(deleteStatus).toBe(200);
+  });
+
+  test('base client: raw findByStatus response shape', async ({ apiClient }) => {
+    const res = await apiClient.get<Pet[]>('/pet/findByStatus', { params: { status: 'pending' } });
+
+    expect(res.ok).toBeTruthy();
+    expect(res.status).toBe(200);
+    expect(Array.isArray(res.data)).toBeTruthy();
+  });
+});

package/template/tests/example/authSession.spec.ts

@@ -0,0 +1,34 @@
+import { expect, test } from '@fixtures';
+
+/**
+ * RUNNABLE DEMO of lazy, cached session auth.
+ *
+ * `test.use({ session: 'demoUser' })` triggers a one-time login to saucedemo.com (see
+ * fixtures/auth.ts → ensureSession) which caches `.auth/demoUser.json`; every later test and run
+ * reuses that file — no repeated logins, no setup project.
+ *
+ * Run: `npx playwright test tests/example/authSession.spec.ts --project=chromium`
+ *
+ * NOTE: each session needs its own describe with a single `test.use({ session })` — two `test.use`
+ * calls in one describe do not create two scopes; the last one wins for every test in that describe.
+ */
+const INVENTORY_URL = 'https://www.saucedemo.com/inventory.html';
+
+test.describe('with the "demoUser" session', () => {
+  test.use({ session: 'demoUser' });
+
+  test('reaches the inventory without logging in again', async ({ page }) => {
+    await page.goto(INVENTORY_URL);
+
+    await expect(page).toHaveURL(/\/inventory\.html/);
+    await expect(page.locator('.title')).toHaveText('Products');
+  });
+});
+
+test.describe('without a session', () => {
+  test('is bounced to the login page', async ({ page }) => {
+    await page.goto(INVENTORY_URL);
+
+    await expect(page).toHaveURL('https://www.saucedemo.com/');
+  });
+});

package/template/tests/example/login.spec.ts

@@ -0,0 +1,50 @@
+import { expect, test } from '@fixtures';
+import { LoginPage } from '@pages/LoginPage';
+
+test.describe('Login page', () => {
+  test('renders the login form', async ({ page }) => {
+    const loginPage = new LoginPage(page);
+    await loginPage.goto();
+
+    expect(await loginPage.isFormVisible()).toBeTruthy();
+  });
+
+  test('shows an error for invalid credentials', async ({ page }) => {
+    const loginPage = new LoginPage(page);
+    await loginPage.goto();
+
+    await loginPage.login('invalid@example.com', 'wrongpassword');
+    await expect(loginPage.errorMessage).toBeVisible();
+  });
+});
+
+// Suite-level auth: `test.use({ session })` at describe scope logs in once (lazily) and applies the
+// cached storageState to every test in this group.
+test.describe('Suite-level auth', () => {
+  test.use({ session: 'adminUser' });
+
+  test('reaches a protected page without redirecting to login', async ({ page }) => {
+    // baseURL is saucedemo.com; /inventory.html is gated — unauthenticated visits bounce to '/'.
+    await page.goto('/inventory.html');
+    await expect(page).toHaveURL(/\/inventory\.html/);
+  });
+});
+
+// Test-level auth: `test.as(session)` authenticates a single test. Different tests can use different
+// sessions in the same describe, and the declaration modifiers (.skip/.only/.fixme/.fail) work too.
+test.describe('Test-level auth (test.as)', () => {
+  test.as('adminUser')('admin reaches the inventory', async ({ page }) => {
+    await page.goto('/inventory.html');
+    await expect(page).toHaveURL(/\/inventory\.html/);
+  });
+
+  test.as('customerUser')('customer reaches the inventory', async ({ page }) => {
+    await page.goto('/inventory.html');
+    await expect(page).toHaveURL(/\/inventory\.html/);
+  });
+
+  test.as('adminUser').fixme('admin flow pending a fix', async ({ page }) => {
+    await page.goto('/inventory.html');
+    await expect(page).toHaveURL(/\/broken/);
+  });
+});

package/template/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+
+    "types": ["node", "@playwright/test"],
+    "noEmit": true,
+    "isolatedModules": true,
+
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@api/*": ["api/*"],
+      "@pages/*": ["pages/*"],
+      "@config/*": ["config/*"],
+      "@utils/*": ["utils/*"],
+      "@fixtures": ["fixtures/index.ts"],
+      "@fixtures/*": ["fixtures/*"],
+      "@tests/*": ["tests/*"],
+      "@env/*": ["env/*"],
+      "@testData/*": ["testData/*"]
+    }
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist", "playwright-report", "test-results", "allure-results"]
+}

package/template/utils/apiUtils.ts

@@ -0,0 +1,224 @@
+import { APIRequestContext, APIResponse, request } from '@playwright/test';
+
+/**
+ * API Utility Functions for Playwright Tests
+ * Provides common API interaction helpers
+ */
+
+export interface RequestOptions {
+  headers?: Record<string, string>;
+  data?: unknown;
+  params?: Record<string, string | number | boolean>;
+  timeout?: number;
+}
+
+export interface APIConfig {
+  baseURL: string;
+  headers?: Record<string, string>;
+  timeout?: number;
+}
+
+export class APIUtils {
+  private apiContext: APIRequestContext | null = null;
+  private config: APIConfig;
+
+  constructor(config: APIConfig) {
+    this.config = config;
+  }
+
+  /**
+   * Initialize API context
+   * Note: baseURL is NOT set in context to avoid automatic "/" insertion
+   * URLs will be manually concatenated in request methods
+   */
+  async init(): Promise<void> {
+    this.apiContext = await request.newContext({
+      extraHTTPHeaders: this.config.headers || {},
+      timeout: this.config.timeout || 30000,
+    });
+  }
+
+  /**
+   * Dispose API context
+   */
+  async dispose(): Promise<void> {
+    if (this.apiContext) {
+      await this.apiContext.dispose();
+    }
+  }
+
+  /**
+   * Set authorization token
+   */
+  setAuthToken(token: string, type: 'Bearer' | 'Basic' = 'Bearer'): void {
+    if (!this.config.headers) {
+      this.config.headers = {};
+    }
+    this.config.headers['Authorization'] = `${type} ${token}`;
+  }
+
+  /**
+   * Get API context
+   */
+  getContext(): APIRequestContext {
+    if (!this.apiContext) {
+      throw new Error('API context not initialized. Call init() first.');
+    }
+    return this.apiContext;
+  }
+
+  /**
+   * Build full URL by concatenating baseURL and path
+   * @param path - Relative path or full URL
+   * @returns Full URL
+   */
+  private buildUrl(path: string): string {
+    // If path is already a full URL, return it as is
+    if (path.startsWith('http://') || path.startsWith('https://')) {
+      return path;
+    }
+    // Direct concatenation without adding "/"
+    return `${this.config.baseURL}${path}`;
+  }
+
+  /**
+   * Make GET request
+   */
+  async get(url: string, options?: RequestOptions): Promise<APIResponse> {
+    const context = this.getContext();
+    const fullUrl = this.buildUrl(url);
+    return await context.get(fullUrl, {
+      headers: options?.headers,
+      params: options?.params as Record<string, string | number | boolean>,
+      timeout: options?.timeout,
+    });
+  }
+
+  /**
+   * Make POST request
+   */
+  async post(url: string, options?: RequestOptions): Promise<APIResponse> {
+    const context = this.getContext();
+    const fullUrl = this.buildUrl(url);
+    return await context.post(fullUrl, {
+      headers: options?.headers,
+      data: options?.data,
+      params: options?.params as Record<string, string | number | boolean>,
+      timeout: options?.timeout,
+    });
+  }
+
+  /**
+   * Make PUT request
+   */
+  async put(url: string, options?: RequestOptions): Promise<APIResponse> {
+    const context = this.getContext();
+    const fullUrl = this.buildUrl(url);
+    return await context.put(fullUrl, {
+      headers: options?.headers,
+      data: options?.data,
+      params: options?.params as Record<string, string | number | boolean>,
+      timeout: options?.timeout,
+    });
+  }
+
+  /**
+   * Make PATCH request
+   */
+  async patch(url: string, options?: RequestOptions): Promise<APIResponse> {
+    const context = this.getContext();
+    const fullUrl = this.buildUrl(url);
+    return await context.patch(fullUrl, {
+      headers: options?.headers,
+      data: options?.data,
+      params: options?.params as Record<string, string | number | boolean>,
+      timeout: options?.timeout,
+    });
+  }
+
+  /**
+   * Make DELETE request
+   */
+  async delete(url: string, options?: RequestOptions): Promise<APIResponse> {
+    const context = this.getContext();
+    const fullUrl = this.buildUrl(url);
+    return await context.delete(fullUrl, {
+      headers: options?.headers,
+      data: options?.data,
+      params: options?.params as Record<string, string | number | boolean>,
+      timeout: options?.timeout,
+    });
+  }
+
+  /**
+   * Make HEAD request
+   */
+  async head(url: string, options?: RequestOptions): Promise<APIResponse> {
+    const context = this.getContext();
+    const fullUrl = this.buildUrl(url);
+    return await context.head(fullUrl, {
+      headers: options?.headers,
+      params: options?.params as Record<string, string | number | boolean>,
+      timeout: options?.timeout,
+    });
+  }
+
+  /**
+   * Parse JSON response
+   */
+  static async parseJSON<T = unknown>(response: APIResponse): Promise<T> {
+    return await response.json();
+  }
+
+  /**
+   * Get response text
+   */
+  static async getText(response: APIResponse): Promise<string> {
+    return await response.text();
+  }
+
+  /**
+   * Get response body as buffer
+   */
+  static async getBody(response: APIResponse): Promise<Buffer> {
+    return await response.body();
+  }
+
+  /**
+   * Get response headers
+   */
+  static getHeaders(response: APIResponse): Record<string, string> {
+    return response.headers();
+  }
+
+  /**
+   * Get response status code
+   */
+  static getStatus(response: APIResponse): number {
+    return response.status();
+  }
+
+  /**
+   * Check if response is successful (2xx)
+   */
+  static isSuccess(response: APIResponse): boolean {
+    const status = response.status();
+    return status >= 200 && status < 300;
+  }
+
+  /**
+   * Check if response is client error (4xx)
+   */
+  static isClientError(response: APIResponse): boolean {
+    const status = response.status();
+    return status >= 400 && status < 500;
+  }
+
+  /**
+   * Check if response is server error (5xx)
+   */
+  static isServerError(response: APIResponse): boolean {
+    const status = response.status();
+    return status >= 500;
+  }
+}

package/template/utils/dateUtils.ts

@@ -0,0 +1,158 @@
+/**
+ * Date and Time Utility Functions
+ * Provides date manipulation and formatting helpers
+ */
+
+export class DateUtils {
+  /**
+   * Get current date in ISO format
+   */
+  static getCurrentDate(): string {
+    return new Date().toISOString().split('T')[0];
+  }
+
+  /**
+   * Get today's date formatted (YYYY-MM-DD or custom format)
+   */
+  static getTodayFormatted(format: string = 'MM/DD/YYYY'): string {
+    return this.formatDate(new Date(), format);
+  }
+
+  /**
+   * Get current timestamp
+   */
+  static getCurrentTimestamp(): number {
+    return Date.now();
+  }
+
+  /**
+   * Format date to specific format (uses UTC time)
+   * M/D = single digit (3/5), MM/DD = with leading zeros (03/05)
+   * h = 12-hour format (9), HH = 24-hour format (21)
+   * Example: "M/D/YYYY h:mm A" -> "3/20/2026 9:04 PM"
+   */
+  static formatDate(date: Date, format: string = 'MM/DD/YYYY'): string {
+    const year = date.getUTCFullYear();
+    const month = date.getUTCMonth() + 1;
+    const day = date.getUTCDate();
+
+    return format
+      .replace('YYYY', String(year))
+      .replace('MM', String(month).padStart(2, '0'))
+      .replace('DD', String(day).padStart(2, '0'))
+      .replace('M', String(month))
+      .replace('D', String(day));
+  }
+
+  /**
+   * Add days to date
+   */
+  static addDays(date: Date, days: number): Date {
+    const result = new Date(date);
+    result.setDate(result.getDate() + days);
+    return result;
+  }
+
+  /**
+   * Subtract days from date
+   */
+  static subtractDays(date: Date, days: number): Date {
+    return this.addDays(date, -days);
+  }
+
+  /**
+   * Add months to date
+   */
+  static addMonths(date: Date, months: number): Date {
+    const result = new Date(date);
+    result.setMonth(result.getMonth() + months);
+    return result;
+  }
+
+  /**
+   * Add years to date
+   */
+  static addYears(date: Date, years: number): Date {
+    const result = new Date(date);
+    result.setFullYear(result.getFullYear() + years);
+    return result;
+  }
+
+  /**
+   * Get date difference in days
+   */
+  static getDaysDifference(date1: Date, date2: Date): number {
+    const diffTime = Math.abs(date2.getTime() - date1.getTime());
+    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  }
+
+  /**
+   * Check if date is today
+   */
+  static isToday(date: Date): boolean {
+    const today = new Date();
+    return (
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    );
+  }
+
+  /**
+   * Check if date is in the past
+   */
+  static isPast(date: Date): boolean {
+    return date < new Date();
+  }
+
+  /**
+   * Check if date is in the future
+   */
+  static isFuture(date: Date): boolean {
+    return date > new Date();
+  }
+
+  /**
+   * Get start of day
+   */
+  static startOfDay(date: Date): Date {
+    const result = new Date(date);
+    result.setHours(0, 0, 0, 0);
+    return result;
+  }
+
+  /**
+   * Get end of day
+   */
+  static endOfDay(date: Date): Date {
+    const result = new Date(date);
+    result.setHours(23, 59, 59, 999);
+    return result;
+  }
+
+  /**
+   * Parse date string to Date object
+   */
+  static parseDate(dateString: string): Date {
+    return new Date(dateString);
+  }
+
+  /**
+   * Get relative time string (e.g., "2 days ago")
+   */
+  static getRelativeTime(date: Date): string {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSeconds = Math.floor(diffMs / 1000);
+    const diffMinutes = Math.floor(diffSeconds / 60);
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffSeconds < 60) return 'just now';
+    if (diffMinutes < 60) return `${diffMinutes} minute${diffMinutes > 1 ? 's' : ''} ago`;
+    if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+    if (diffDays < 30) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+
+    return this.formatDate(date);
+  }
+}

package/template/utils/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Generic test helper classes — string/date/validation/wait/UI/API utilities used across specs.
+ * Import from `@utils`. These are plain static helpers with no external dependencies; extend or trim
+ * them for your app.
+ *
+ * @example
+ * import { StringUtils } from '@utils';
+ * const slug = StringUtils.slugify('Hello World');
+ */
+export * from './apiUtils';
+export * from './dateUtils';
+export * from './stringUtils';
+export * from './uiUtils';
+export * from './validationUtils';
+export * from './waitUtils';