playwright test for product

Author: SeriaWei

.gitignore

@@ -165,3 +165,4 @@ App_Data/
 *.db
 /src/ZKEACMS.WebHost/Temp
 /src/ZKEACMS.WebHost/Logs
+.env

test/End-To-End/.env

@@ -1,3 +1,6 @@
-# Environment variables for ZKEACMS End-to-End Tests
+#  Environment Configuration
+Base_URL = http://localhost:5000
+
+# Admin Credentials
 ADMIN_USERNAME=admin
 ADMIN_PASSWORD=admin

test/End-To-End/.env.example

@@ -0,0 +1,92 @@
+description="create a playwright page object model"
+
+prompt = """
+You are an expert in creating Playwright page object models for the ZKEACMS project. Your task is to generate a complete TypeScript page object model file based on a provided URL.
+
+Here's what you should do:
+
+1. **Open and Analyze the URL**: Use Playwright（playwright/browser_navigate tool）to open the user-provided URL and carefully analyze the page structure, elements, and functionality.
+   - If the page require login, you can get user name, password from file @.env
+
+2. **Identify Page Type**: Determine if this is a frontend (public) page or a backend (admin) page:
+   - Frontend pages are typically public-facing pages like homepages, article pages, product pages, etc.
+   - Backend pages are admin pages found under /admin/ URLs, including forms, dashboards, management interfaces.
+
+3. **Select Base Class**: 
+   - For backend (admin) pages, extend the `AdminPageBase` class
+   - For frontend pages, extend the generic `PageBase` class or create without a base class if not needed
+
+4. **Create the Page Object Model File**:
+   - Generate a complete TypeScript file that includes:
+     * Proper imports for Playwright and base classes
+     * A class that represents the page with a descriptive name
+     * Constructor that accepts a Playwright Page object
+     * Public methods that represent key actions on the page (clicks, fills, navigations)
+     * Locator properties for important elements on the page
+     * Get the page html (use javascript `document.body.innerHTML` to get page html) then you can get the best locators:
+       - Prioritize data-testid attributes: page.locator('[data-testid="button"]')
+       - Use semantic selectors: page.getByRole('button', { name: 'Submit' })
+       - Use text content: page.getByText('Save')
+       - Use CSS selectors sparingly: page.locator('#id', '.class')
+       - Use nth() for selecting elements by index: page.locator('.item').nth(0)
+       - Use hasText() for filtering by text: page.locator('.item', { hasText: 'Item 1' })
+       - Use has() for filtering by child elements: page.locator('.item', { has: page.locator('img') })
+       - **Do not** use '[ref="exx"]': page.locator('[ref="e78"]')
+     * Methods that support the main functionality of the page
+
+5. **Follow Project Conventions**:
+   - Use descriptive names for methods and properties
+   - Follow the existing naming patterns in the ZKEACMS project
+   - Include proper documentation comments for public methods
+   - Implement proper error handling where needed
+   - Use async/await pattern for Playwright operations
+
+6. **Page Object Best Practices**:
+   - Encapsulate the details of how to interact with page elements
+   - Return appropriate values from methods (e.g., other page objects for navigations)
+   - Keep methods focused on single responsibilities
+   - Use locators that are stable and reliable
+
+7. **File Location**: Place the generated file in the appropriate directory:
+   - Admin pages go in src/admin/
+   - Frontend pages go in src/models/ or a relevant subdirectory
+
+EXAMPLE STRUCTURE:
+
+For a frontend page:
+```
+import { Page } from '@playwright/test';
+import { PageBase } from '@models/PageBase';
+
+export class HomePage extends PageBase {
+
+  constructor(page: Page) {
+    super(page);
+  }
+
+  async navigateTo(): Promise<void> {
+    await this.page.goto('/index');
+  }
+}
+```
+
+For an admin page:
+```
+import { Page } from '@playwright/test';
+import { AdminPageBase } from "@models/AdminPageBase";
+
+export class ArticleManagementPage extends AdminPageBase {
+
+  constructor(page: Page) {
+    super(page);
+  }
+
+  async navigateTo(): Promise<void> {
+    await this.page.goto('/admin/article');
+  }
+  
+}
+```
+
+Analyze the page provided by the user, determine the page type, and create the appropriate page object model file.
+"""

test/End-To-End/.gemini/commands/page-model.toml

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": [
+        "@playwright/mcp@latest",
+        "--browser=chromium"
+      ]
+    }
+  }
+}

test/End-To-End/.gemini/settings.json

@@ -5,7 +5,7 @@ You are an expert in creating Playwright page object models for the ZKEACMS proj
 
 Here's what you should do:
 
-1. **Open and Analyze the URL(Use playwright/browser_navigate tool)**: Use Playwright to open the user-provided URL and carefully analyze the page structure, elements, and functionality.
+1. **Open and Analyze the URL**: Use Playwright（playwright/browser_navigate tool）to open the user-provided URL and carefully analyze the page structure, elements, and functionality.
    - If the page require login, you can get user name, password from file @.env
 
 2. **Identify Page Type**: Determine if this is a frontend (public) page or a backend (admin) page:

test/End-To-End/.qwen/commands/page-model.toml

@@ -26,7 +26,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('')`. */
-    baseURL: 'http://localhost:5000',
+    baseURL: process.env.Base_URL || 'http://localhost:5000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',

test/End-To-End/playwright.config.ts

@@ -99,35 +99,36 @@ export class ArticleFormPage extends AdminPageBase {
     status?: string,
     description?: string
   }): Promise<void> {
-    if (articleData.title) await this.titleField.fill(articleData.title);
-    if (articleData.url) await this.urlField.fill(articleData.url);
-    if (articleData.summary) await this.summaryField.fill(articleData.summary);
-    if (articleData.metaKeywords) await this.metaKeywordsField.fill(articleData.metaKeywords);
-    if (articleData.metaDescription) await this.metaDescriptionField.fill(articleData.metaDescription);
-    if (articleData.counter) await this.counterField.fill(articleData.counter);
-    if (articleData.content) await this.page.locator('#ArticleContent_ifr').contentFrame().locator('#tinymce').fill(articleData.content);
-    if (articleData.imageThumbUrl) await this.imageThumbUrlField.fill(articleData.imageThumbUrl);
-    if (articleData.imageUrl) await this.imageUrlField.fill(articleData.imageUrl);
-    if (articleData.publishDate) await this.publishDateField.fill(articleData.publishDate);
-    if (articleData.description) await this.descriptionField.fill(articleData.description);
+    await this.fill(this.titleField, articleData.title);
+    await this.fill(this.urlField, articleData.url);
+    await this.fill(this.summaryField, articleData.summary);
+    await this.fill(this.metaKeywordsField, articleData.metaKeywords);
+    await this.fill(this.metaDescriptionField, articleData.metaDescription);
+    await this.fill(this.counterField, articleData.counter);
+    await this.fillTinymceEditor(this.page.locator('#ArticleContent_ifr'), articleData.content);
+    await this.fill(this.imageThumbUrlField, articleData.imageThumbUrl);
+    await this.fill(this.imageUrlField, articleData.imageUrl);
+    await this.fill(this.publishDateField, articleData.publishDate);
+    await this.fill(this.descriptionField, articleData.description);
 
     // Select article type if provided
     if (articleData.articleType) {
       await this.selectArticleType(articleData.articleType);
     }
 
     // Select status if provided
-    if (articleData.status) {
-      await this.statusDropdown.selectOption(articleData.status);
-    }
+    await this.fill(this.statusDropdown, articleData.status);
   }
 
   /**
    * Selects an article type from the dropdown tree
    * @param articleType The article type to select
    */
-  async selectArticleType(articleType: string): Promise<void> {
-    // Click the dropdown to open it
+  async selectArticleType(articleType?: string): Promise<void> {
+    if(articleType == null || articleType === undefined) {
+      return;
+    }
+    
     if (await this.articleTypeDropdown.isVisible()) {
       await this.articleTypeDropdown.click();
     }

test/End-To-End/src/admin/ArticleFormPage.ts

@@ -2,11 +2,11 @@ import { Page, Locator } from '@playwright/test';
 import { AdminPageBase } from '@models/AdminPageBase';
 
 export interface NavigationFormData {
-  title: string;
-  url: string;
+  title?: string;
+  url?: string;
   isMobile?: boolean;
   html?: string;
-  status?: '有效' | '无效';
+  status?: string;
   description?: string;
 }
 
@@ -63,28 +63,12 @@ export class NavigationFormPage extends AdminPageBase {
    * @param formData - Navigation form data to fill
    */
   async fillNavigationForm(formData: NavigationFormData): Promise<void> {
-    await this.titleInput.fill(formData.title);
-    await this.urlInput.fill(formData.url);
-
-    if (formData.isMobile !== undefined) {
-      if (formData.isMobile) {
-        await this.isMobileCheckbox.check();
-      } else {
-        await this.isMobileCheckbox.uncheck();
-      }
-    }
-
-    if (formData.html) {
-      await this.htmlTextarea.fill(formData.html);
-    }
-
-    if (formData.status) {
-      await this.statusSelect.selectOption(formData.status);
-    }
-
-    if (formData.description) {
-      await this.descriptionTextarea.fill(formData.description);
-    }
+    await this.fill(this.titleInput, formData.title);
+    await this.fill(this.urlInput, formData.url);
+    await this.fill(this.isMobileCheckbox, formData.isMobile);
+    await this.fill(this.htmlTextarea, formData.html);
+    await this.fill(this.statusSelect, formData.status);
+    await this.fill(this.descriptionTextarea, formData.description);
   }
 
   /**

test/End-To-End/src/admin/NavigationFormPage.ts

@@ -1,14 +1,14 @@
 import { Page, expect } from "@playwright/test";
 import { AdminPageBase } from "@models/AdminPageBase";
 export interface PageFormData {
-    id: string;
-    name: string;
-    title: string;
-    path: string;
-    layout: string;
-    keywords: string;
-    description: string;
-    status: string;
+    id?: string;
+    name?: string;
+    title?: string;
+    path?: string;
+    layout?: string;
+    keywords?: string;
+    description?: string;
+    status?: string;
 }
 export class PageFormPage extends AdminPageBase {
     constructor(page: Page) {
@@ -20,27 +20,15 @@ export class PageFormPage extends AdminPageBase {
     }
 
     async fillForm(data: PageFormData): Promise<void> {
-        if (data.name) {
-            await this.page.fill('input[name="PageName"]', data.name);
-        }
-        if (data.title) {
-            await this.page.fill('input[name="Title"]', data.title);
-        }
-        if (data.path) {
-            await this.page.fill('input[name="PageUrl"]', data.path);
-        }
+        await this.fill(this.page.locator('input[name="PageName"]'), data.name);
+        await this.fill(this.page.locator('input[name="Title"]'), data.title);
+        await this.fill(this.page.locator('input[name="PageUrl"]'), data.path);
         if (data.layout) {
             await this.page.locator('.layout-item').filter({ hasText: data.layout }).click();
         }
-        if (data.keywords) {
-            await this.page.fill('input[name="MetaKeyWorlds"]', data.keywords);
-        }
-        if (data.description) {
-            await this.page.fill('input[name="MetaDescription"]', data.description);
-        }
-        if (data.status) {
-            await this.page.locator('select[name="Status"]').selectOption(data.status);
-        }
+        await this.fill(this.page.locator('input[name="MetaKeyWorlds"]'), data.keywords);
+        await this.fill(this.page.locator('input[name="MetaDescription"]'), data.description);
+        await this.fill(this.page.locator('select[name="Status"]'), data.status);
     }
     async submitForm(): Promise<void> {
         await this.page.click('input[type="submit"]');