Initial commit

skills/page-object-builder/resources/page-template.ts

@@ -0,0 +1,112 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Page Object Model for [Page Name]
+ *
+ * Description: [Brief description of what this page represents]
+ *
+ * Key functionality:
+ * - [Key function 1]
+ * - [Key function 2]
+ * - [Key function 3]
+ */
+export class PageName {
+  readonly page: Page;
+
+  // ============================================
+  // LOCATORS
+  // ============================================
+  // Group related locators together with comments
+
+  // Section 1: [e.g., Form Elements]
+  readonly elementName: Locator;
+  readonly anotherElement: Locator;
+
+  // Section 2: [e.g., Navigation]
+  readonly navElement: Locator;
+
+  /**
+   * Constructor: Initialize page object with locators
+   * @param page - Playwright Page object
+   */
+  constructor(page: Page) {
+    this.page = page;
+
+    // Initialize all locators using data-testid
+    this.elementName = page.locator('[data-testid="element-name"]');
+    this.anotherElement = page.locator('[data-testid="another-element"]');
+    this.navElement = page.locator('[data-testid="nav-element"]');
+  }
+
+  // ============================================
+  // NAVIGATION
+  // ============================================
+
+  /**
+   * Navigate to this page
+   */
+  async goto(): Promise<void> {
+    await this.page.goto('/page-url');
+    await this.page.waitForLoadState('domcontentloaded');
+  }
+
+  // ============================================
+  // ACTIONS
+  // ============================================
+
+  /**
+   * Perform a specific action
+   * @param param - Description of parameter
+   */
+  async performAction(param: string): Promise<void> {
+    await this.elementName.waitFor({ state: 'visible' });
+    await this.elementName.click();
+  }
+
+  /**
+   * Fill a form with data
+   * @param data - Form data object
+   */
+  async fillForm(data: { field1: string; field2: string }): Promise<void> {
+    await this.elementName.fill(data.field1);
+    await this.anotherElement.fill(data.field2);
+  }
+
+  // ============================================
+  // GETTERS (for assertions in tests)
+  // ============================================
+
+  /**
+   * Get element for assertions
+   */
+  getElement(): Locator {
+    return this.elementName;
+  }
+
+  /**
+   * Get text content of an element
+   */
+  async getTextContent(): Promise<string> {
+    const text = await this.elementName.textContent();
+    return text?.trim() || '';
+  }
+
+  /**
+   * Check if element is visible
+   */
+  async isElementVisible(): Promise<boolean> {
+    try {
+      await this.elementName.waitFor({ state: 'visible', timeout: 2000 });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+}
+
+/**
+ * Required data-testid values:
+ * - element-name: [Description of element]
+ * - another-element: [Description of element]
+ * - nav-element: [Description of element]
+ */