Navigation test

Author: SeriaWei

test/End-To-End/.env

@@ -0,0 +1,2 @@
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=admin

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

@@ -0,0 +1,3 @@
+# Environment variables for ZKEACMS End-to-End Tests
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=admin

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

@@ -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/browser_navigate tool)**: Use Playwright 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 `console.log(document.body.innerHTML)` to get page html) so 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 './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 URL provided by the user, determine the page type, and create the appropriate page object model file.
+"""

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

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

test/End-To-End/QWEN.md

@@ -0,0 +1,137 @@
+# ZKEACMS End-to-End Testing Project
+
+## Project Overview
+
+This is an End-to-End (E2E) testing project for the ZKEACMS Content Management System. It uses Playwright as the testing framework to validate the functionality of the ZKEACMS admin interface, specifically focusing on page management capabilities.
+
+The project contains automated tests that simulate user interactions with the ZKEACMS admin panel, particularly around page creation, editing, and publishing functionality.
+
+## Technology Stack
+
+- **Testing Framework**: Playwright (v1.56.1)
+- **Language**: TypeScript
+- **Package Manager**: npm
+- **Target Application**: ZKEACMS
+
+## Project Structure
+
+```
+test/End-To-End/
+├── package.json                 # Project dependencies and configuration
+├── playwright.config.ts         # Playwright configuration
+├── src/                         # Page object models and helper classes
+│   ├── admin/                   # Admin-specific page models
+│   │   ├── PageDashboardPage.ts # Page dashboard model
+│   │   └── PageFormPage.ts      # Page form model
+│   └── models/                  # Base page models
+│       └── AdminPageBase.ts     # Base admin page class
+├── tests/                       # Test specifications
+│   ├── example.spec.ts          # Example test file
+│   └── admin/
+│       └── page/
+│           └── 01-basic-function-test.spec.ts # Basic page functionality tests
+├── node_modules/                # Dependencies (generated)
+├── playwright-report/           # Test reports (generated)
+└── test-results/                # Test results (generated)
+```
+
+## Configuration
+
+The Playwright configuration is set up with:
+- Tests run in parallel across multiple browsers (Chromium, Firefox, Webkit)
+- Retry logic for failed tests
+- HTML reporter for test results
+- Trace collection on first retry for debugging
+
+## Key Functionality Tested
+
+### Page Creation Tests
+- Creating pages with required fields
+- Handling validation errors for missing fields
+- Publishing pages without widgets
+
+### Admin Authentication
+- Login functionality with username/password
+- Session management
+
+### Page Object Models
+
+#### AdminPageBase
+- Base class containing common admin functionality
+- Login and logout methods
+- Provides authentication for admin operations
+
+#### PageFormPage
+- Handles page creation form interactions
+- Fills page details like name, title, path, layout, etc.
+- Submits forms and verifies creation results
+- Supports publishing pages from the design view
+
+#### PageDashboardPage
+- Manages interactions with the page dashboard
+- Navigates to the page management area
+- Waits for data loading
+
+## Running Tests
+
+To run the tests locally:
+
+1. Ensure you have Node.js installed
+2. Install dependencies:
+   ```
+   npm install
+   ```
+3. Run all tests:
+   ```
+   npx playwright test
+   ```
+4. Run tests in UI mode:
+   ```
+   npx playwright test --ui
+   ```
+5. Run tests for a specific browser:
+   ```
+   npx playwright test --project=chromium
+   ```
+
+To run tests against a local instance of ZKEACMS instead of the demo site, update the baseURL in `playwright.config.ts` to point to your local installation.
+
+## Development Conventions
+
+- Tests follow the Page Object Model pattern for better maintainability
+- TypeScript interfaces are used to define data structures (e.g., PageFormData)
+- Each test file should focus on a specific set of functionality
+- Tests use meaningful names that describe the functionality being tested
+- Wait strategies are implemented to handle asynchronous operations properly
+- Credentials are managed using environment variables for security
+
+## Credential Management
+
+For security reasons, the tests now support the following approaches for authentication:
+
+1. **Environment Variables**: Set `ADMIN_USERNAME` and `ADMIN_PASSWORD` environment variables
+2. **Fallback Credentials**: If environment variables aren't set, the system defaults to 'admin'/'admin'
+
+To use custom credentials, create a `.env` file or set the environment variables:
+
+```
+ADMIN_USERNAME=your_username
+ADMIN_PASSWORD=your_password
+```
+
+An example file `.env.example` has been provided as a template.
+
+## Current Test Coverage
+
+The current tests validate:
+
+1. **Page Creation**: Creating a page with all required fields
+2. **Form Validation**: Ensuring required fields are validated
+3. **Page Publishing**: Publishing a page without widgets to make it public
+4. **Admin Authentication**: Logging into the admin panel using secure credential management
+
+## Reporting
+
+- Test results are stored in the `test-results/` directory
+- HTML reports can be generated to `playwright-report/` directory
+- Trace files are collected on first retry to help debug failed tests

test/End-To-End/package-lock.json

@@ -3,13 +3,16 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "scripts": {},
+  "scripts": {
+    "test": "npx playwright test"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "type": "commonjs",
   "devDependencies": {
     "@playwright/test": "^1.56.1",
-    "@types/node": "^24.10.0"
+    "@types/node": "^24.10.0",
+    "dotenv": "^17.2.3"
   }
 }

test/End-To-End/package.json

@@ -4,9 +4,9 @@ import { defineConfig, devices } from '@playwright/test';
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
+import dotenv from 'dotenv';
+import path from 'path';
+dotenv.config({ path: path.resolve(__dirname, '.env') });
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -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://demo.zkea.net',
+    baseURL: 'http://localhost:5000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -39,15 +39,15 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     /* Test against mobile viewports. */
     // {