@sridharkikkeri/playwright-common 1.0.46 → 1.0.48

package/create-healthedge-tests.js

@@ -76,7 +76,8 @@ const packageJson = {
     dependencies: {
         '@playwright/test': '^1.42.0',
         'allure-playwright': '^3.4.5',
-        'playwright': '^1.42.0'
+        'playwright': '^1.42.0',
+        '@playwright/mcp-server': 'latest'
     },
     devDependencies: {
         '@typescript-eslint/eslint-plugin': '^8.55.0',
@@ -164,41 +165,47 @@ Object.entries(envConfigs).forEach(([env, config]) => {
     );
 });
 
-// Sample Page Object
-const samplePage = `import { Page } from '@playwright/test';
-import { BasePage } from '../pages/BasePage';
-
-export class HomePage extends BasePage {
-  constructor(page: Page) {
-    super(page, 'HomePage');
-  }
-
-  private readonly searchInput = this.element('[data-testid="search"]');
-  private readonly searchBtn = this.element('button[type="submit"]');
-
-  async search(query: string) {
-    await this.searchInput.fill(query, 'Enter search query');
-    await this.searchBtn.click('Click search button');
-  }
+// Copy sample files from templates
+const templatesDir = path.join(__dirname, 'templates');
+if (fs.existsSync(templatesDir)) {
+    console.log('\n📋 Copying sample files...\n');
+    
+    // Copy fixtures
+    const fixturesSrc = path.join(templatesDir, 'fixtures.ts');
+    if (fs.existsSync(fixturesSrc)) {
+        fs.copyFileSync(fixturesSrc, path.join(projectPath, 'src/main/fixtures/fixtures.ts'));
+        console.log('  ✓ Copied fixtures.ts');
+    }
+    
+    // Copy pages
+    const loginPageSrc = path.join(templatesDir, 'LoginPage.ts');
+    if (fs.existsSync(loginPageSrc)) {
+        fs.copyFileSync(loginPageSrc, path.join(projectPath, 'src/main/pages/LoginPage.ts'));
+        console.log('  ✓ Copied LoginPage.ts');
+    }
+    
+    const dashboardPageSrc = path.join(templatesDir, 'DashboardPage.ts');
+    if (fs.existsSync(dashboardPageSrc)) {
+        fs.copyFileSync(dashboardPageSrc, path.join(projectPath, 'src/main/pages/DashboardPage.ts'));
+        console.log('  ✓ Copied DashboardPage.ts');
+    }
+    
+    // Copy builder
+    const builderSrc = path.join(templatesDir, 'UserBuilder.ts');
+    if (fs.existsSync(builderSrc)) {
+        fs.copyFileSync(builderSrc, path.join(projectPath, 'src/main/builders/UserBuilder.ts'));
+        console.log('  ✓ Copied UserBuilder.ts');
+    }
+    
+    // Copy test
+    const testSrc = path.join(templatesDir, 'sample.spec.ts');
+    if (fs.existsSync(testSrc)) {
+        fs.copyFileSync(testSrc, path.join(projectPath, 'src/tests/specs/sample.spec.ts'));
+        console.log('  ✓ Copied sample.spec.ts');
+    }
+    
+    console.log('\n✅ Sample files copied');
 }
-`;
-
-fs.writeFileSync(path.join(projectPath, 'src/main/pages/HomePage.ts'), samplePage);
-
-// Sample Test
-const sampleTest = `import { test } from '../../../main/fixtures/fixtures';
-import { HomePage } from '../../main/pages/HomePage';
-
-test.describe('Sample Tests', () => {
-  test('Search functionality', async ({ page }) => {
-    const homePage = new HomePage(page);
-    await page.goto('/');
-    await homePage.search('playwright');
-  });
-});
-`;
-
-fs.writeFileSync(path.join(projectPath, 'src/tests/specs/sample.spec.ts'), sampleTest);
 
 // Test data
 const testData = {
@@ -295,6 +302,24 @@ npm run screenshot <url>  # Take screenshot of URL
 npm run pdf <url>         # Generate PDF of URL
 \`\`\`
 
+## AI Agents & Skills (Experimental)
+
+This project includes Playwright MCP Server with AI Agents:
+
+**Agents:**
+- 🤖 **Planner** - Plans test scenarios
+- 🔧 **Generator** - Generates test code
+- 🩹 **Healer** - Auto-fixes failing tests
+
+**Skills:**
+- Run tests
+- Inspect DOM
+- Generate selectors
+- Heal failures
+- Seed environment
+
+See [Playwright CLI Agents](https://github.com/microsoft/playwright-cli) for setup.
+
 ## Environment-Specific Tests
 
 \`\`\`bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sridharkikkeri/playwright-common",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "description": "Production-grade Playwright framework with AI-powered self-healing, visual regression, and enterprise features",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,6 +13,7 @@
   "files": [
     "dist",
     "src",
+    "templates",
     "api-docs",
     "create-healthedge-tests.js",
     "README.md",

package/templates/DashboardPage.ts

@@ -0,0 +1,22 @@
+import { Page } from '@playwright/test';
+import { BasePage } from '../main/pages/BasePage';
+import { ElementWrapper } from '../main/wrappers/ElementWrapper';
+
+export class DashboardPage extends BasePage {
+    readonly welcomeMessage: ElementWrapper;
+    readonly logoutButton: ElementWrapper;
+
+    constructor(page: Page) {
+        super(page, { pageName: 'DashboardPage' });
+        this.welcomeMessage = this.getByTestId('welcome-message');
+        this.logoutButton = this.getByRole('button', { name: 'Logout' });
+    }
+
+    async getWelcomeText(): Promise<string> {
+        return await this.welcomeMessage.textContent();
+    }
+
+    async logout(): Promise<void> {
+        await this.logoutButton.click('Click logout button');
+    }
+}

package/templates/LoginPage.ts

@@ -0,0 +1,34 @@
+import { Page } from '@playwright/test';
+import { BasePage } from '../main/pages/BasePage';
+import { ElementWrapper } from '../main/wrappers/ElementWrapper';
+
+export class LoginPage extends BasePage {
+    readonly emailInput: ElementWrapper;
+    readonly passwordInput: ElementWrapper;
+    readonly loginButton: ElementWrapper;
+
+    constructor(page: Page) {
+        super(page, { pageName: 'LoginPage' });
+        this.emailInput = this.getByLabel('Email');
+        this.passwordInput = this.getByLabel('Password');
+        this.loginButton = this.getByRole('button', { name: 'Login' });
+    }
+
+    async enterEmail(email: string): Promise<void> {
+        await this.emailInput.fill(email, 'Enter email address');
+    }
+
+    async enterPassword(password: string): Promise<void> {
+        await this.passwordInput.fill(password, 'Enter password');
+    }
+
+    async clickLogin(): Promise<void> {
+        await this.loginButton.click('Click login button');
+    }
+
+    async login(email: string, password: string): Promise<void> {
+        await this.enterEmail(email);
+        await this.enterPassword(password);
+        await this.clickLogin();
+    }
+}

package/templates/UserBuilder.ts

@@ -0,0 +1,43 @@
+export interface UserData {
+    firstName: string;
+    lastName: string;
+    email?: string;
+    phone?: string;
+    role?: string;
+}
+
+export class UserBuilder {
+    private data: UserData = {
+        firstName: 'John',
+        lastName: 'Doe'
+    };
+
+    setFirstName(name: string): this {
+        this.data.firstName = name;
+        return this;
+    }
+
+    setLastName(name: string): this {
+        this.data.lastName = name;
+        return this;
+    }
+
+    setEmail(email: string): this {
+        this.data.email = email;
+        return this;
+    }
+
+    setPhone(phone: string): this {
+        this.data.phone = phone;
+        return this;
+    }
+
+    setRole(role: string): this {
+        this.data.role = role;
+        return this;
+    }
+
+    build(): UserData {
+        return { ...this.data };
+    }
+}

package/templates/fixtures.ts

@@ -0,0 +1,73 @@
+import { test as base } from '@playwright/test';
+import { ActionOrchestrator } from '../main/selfhealing/ActionOrchestrator';
+import { ApiClient } from '../main/api/ApiClient';
+import { AllureUtil } from '../main/reporting/AllureUtil';
+import { LoginPage } from '../main/pages/LoginPage';
+import { DashboardPage } from '../main/pages/DashboardPage';
+
+export type FrameworkFixtures = {
+    orchestrator: ActionOrchestrator;
+    apiClient: ApiClient;
+    loginPage: LoginPage;
+    dashboardPage: DashboardPage;
+    locale: string;
+    retryInfo: { current: number; max: number };
+    _reportingHook: void;
+};
+
+export const test = base.extend<FrameworkFixtures>({
+    orchestrator: async ({ page }, use, testInfo) => {
+        const orchestrator = new ActionOrchestrator(page, {
+            pageName: testInfo.title
+        });
+        await use(orchestrator);
+    },
+
+    apiClient: async ({ }, use) => {
+        const client = new ApiClient(process.env.API_BASE_URL || '');
+        await client.init();
+        await use(client);
+        await client.dispose();
+    },
+
+    loginPage: async ({ page }, use) => {
+        await use(new LoginPage(page));
+    },
+
+    dashboardPage: async ({ page }, use) => {
+        await use(new DashboardPage(page));
+    },
+
+    locale: async ({ }, use) => {
+        const locale = process.env.LOCALE || 'en';
+        await use(locale);
+    },
+
+    retryInfo: async ({ }, use, testInfo) => {
+        await use({
+            current: testInfo.retry,
+            max: testInfo.project.retries
+        });
+    },
+
+    _reportingHook: [async ({ retryInfo }, use, testInfo) => {
+        await use();
+
+        if (testInfo.status !== testInfo.expectedStatus) {
+            AllureUtil.attachText(
+                'Test Failure Details',
+                `Error: ${testInfo.error?.message || 'Unknown'}\nStack: ${testInfo.error?.stack || 'N/A'}`
+            );
+        }
+
+        if (retryInfo.current > 0) {
+            AllureUtil.attachText(
+                'Retry Telemetry',
+                `This test is being retried. Attempt: ${retryInfo.current} / ${retryInfo.max}`
+            );
+            console.warn(`⚠️ Flaky test detected: "${testInfo.title}" (Retry ${retryInfo.current})`);
+        }
+    }, { auto: true }]
+});
+
+export { expect } from '@playwright/test';

package/templates/sample.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '../main/fixtures/fixtures';
+import { UserBuilder } from '../main/builders/UserBuilder';
+import { ConfigManager } from '../main/config/ConfigManager';
+
+test.describe('Sample Test Suite @smoke', () => {
+    test('Login with valid credentials', async ({ page, loginPage, dashboardPage }) => {
+        const config = ConfigManager.getConfig();
+        await page.goto(config.baseUrl!);
+        await page.waitForLoadState('networkidle');
+
+        await loginPage.login('test@example.com', 'password123');
+        await page.waitForLoadState('networkidle');
+
+        const welcomeText = await dashboardPage.getWelcomeText();
+        expect(welcomeText).toContain('Welcome');
+    });
+
+    test('Create user with builder pattern', async ({ page, loginPage }) => {
+        const timestamp = Date.now();
+        const user = new UserBuilder()
+            .setFirstName('Test')
+            .setLastName(`User-${timestamp}`)
+            .setEmail(`test-${timestamp}@example.com`)
+            .setRole('admin')
+            .build();
+
+        console.log('Created user:', user);
+
+        const config = ConfigManager.getConfig();
+        await page.goto(config.baseUrl!);
+        await loginPage.login(user.email!, 'password123');
+    });
+
+    test('API integration example', async ({ apiClient }) => {
+        const response = await apiClient.get('/api/users/1');
+        expect(response.status).toBe(200);
+        expect(response.data).toHaveProperty('id');
+    });
+});