test: updated test cases

constants/category.ts

@@ -0,0 +1,3 @@
+export const CATEGORY_CREATE_DELETE_ROW = 'Create and delete row';
+export const CATEGORY_FILTER_ROWS = 'Filter rows';
+export const CATEGORY_ROW_ACTIONS = 'Row actions';

constants/priority.ts

@@ -0,0 +1,4 @@
+export const TAG_PRIORITY_CRITICAL = '@critical';
+export const TAG_PRIORITY_HIGH = '@high';
+export const TAG_PRIORITY_MEDIUM = '@medium';
+export const TAG_PRIORITY_LOW = '@low';

fixtures/projectData.json

@@ -0,0 +1,6 @@
+{
+  "single": {
+    "name": "Test Project",
+    "description": "A test project for testing purposes"
+  }
+}

fixtures/spiderData.json

@@ -0,0 +1,14 @@
+{
+  "single": {
+    "name": "Test Spider",
+    "description": "This is a test spider",
+    "project": "Test Project",
+    "cmd": "python main.py"
+  },
+  "create": {
+    "name": "Create Spider",
+    "description": "This is a test spider for create",
+    "project": "Test Project",
+    "cmd": "python main.py"
+  }
+}

package.json

@@ -6,6 +6,10 @@
   "main": "index.js",
   "scripts": {
     "test": "npx playwright test",
+    "test:sanity": "npx playwright test --grep \"@critical\"",
+    "test:normal": "npx playwright test --grep \"@critical|@high\"",
+    "test:extended": "npx playwright test --grep \"@critical|@high|@medium\"",
+    "test:full": "npm run test",
     "test:headed": "npx playwright test --headed",
     "test:debug": "npx playwright test --debug"
   },

page-objects/components/form/formPage.ts

@@ -0,0 +1,5 @@
+import BaseLayoutPage from '@/page-objects/layout/baseLayoutPage';
+
+export abstract class FormPage<T> extends BaseLayoutPage {
+  abstract fillForm(data: T): Promise<void>;
+}

page-objects/layout/listLayoutPage.ts

@@ -1,7 +1,17 @@
 import NormalLayoutPage from '@/page-objects/layout/normalLayoutPage';
+import { FormPage } from '@/page-objects/components/form/formPage';
+import { Page } from '@playwright/test';
 
 export default abstract class ListLayoutPage<T> extends NormalLayoutPage {
   protected abstract path: string;
+  protected formPage: FormPage<T>;
+
+  constructor(page: Page) {
+    super(page);
+    this.formPage = this.getFormPage();
+  }
+
+  abstract getFormPage(): FormPage<T>;
 
   protected listContainer = '.list-layout';
   protected createButton = '#add-btn';
@@ -14,7 +24,7 @@ export default abstract class ListLayoutPage<T> extends NormalLayoutPage {
 
   async navigate() {
     await super.navigate();
-    await this.page.goto(this.path);
+    await this.page.goto(this.path, { waitUntil: 'domcontentloaded' });
     await this.waitForPageLoad();
   }
 
@@ -27,6 +37,10 @@ export default abstract class ListLayoutPage<T> extends NormalLayoutPage {
     await row.locator(this.viewButton).click();
   }
 
+  async clearSearch() {
+    await this.page.fill(this.searchInput, '');
+  }
+
   async searchRows(searchTerm: string) {
     await this.page.fill(this.searchInput, searchTerm);
   }
@@ -45,9 +59,21 @@ export default abstract class ListLayoutPage<T> extends NormalLayoutPage {
     await this.page.click(this.deleteConfirmButton);
   }
 
+  async createRow(form: T) {
+    await this.clickCreate();
+    await this.formPage.fillForm(form);
+    await this.confirm();
+  }
+
   async getTableRowCount(): Promise<number> {
     return await this.page.locator(this.tableRows).count();
   }
 
+  async getTotalCount(): Promise<number> {
+    const totalElement = this.page.locator(this.listContainer);
+    const totalText = await totalElement.getAttribute('data-test-total');
+    return totalText ? parseInt(totalText, 10) : 0;
+  }
+
   abstract getTableRow(rowIndex: number): Promise<T>;
 }

page-objects/layout/normalLayoutPage.ts

@@ -6,7 +6,7 @@ import BaseLayoutPage from '@/page-objects/layout/baseLayoutPage';
 export default abstract class NormalLayoutPage extends BaseLayoutPage {
   protected loginPage: LoginPage;
 
-  constructor(page: Page) {
+  protected constructor(page: Page) {
     super(page);
     this.loginPage = new LoginPage(page);
   }

page-objects/views/login/loginPage.ts

@@ -12,7 +12,7 @@ export class LoginPage {
   }
 
   async navigate() {
-    await this.page.goto('/#/login');
+    await this.page.goto('/#/login', { waitUntil: 'domcontentloaded' });
     await this.waitForPageLoad();
   }
 

page-objects/views/node/nodeFormPage.ts

@@ -0,0 +1,9 @@
+import { FormPage } from '@/page-objects/components/form/formPage';
+
+export class NodeFormPage extends FormPage<Node> {
+  protected path = '/#/nodes';
+
+  async fillForm(_: Node) {
+    console.warn('No need to fill form for Node');
+  }
+}

page-objects/views/node/nodeListPage.ts

@@ -1,8 +1,13 @@
 import ListLayoutPage from '@/page-objects/layout/listLayoutPage';
+import { NodeFormPage } from '@/page-objects/views/node/nodeFormPage';
 
 export class NodeListPage extends ListLayoutPage<Node> {
   protected path = '/#/nodes';
 
+  getFormPage() {
+    return new NodeFormPage(this.page);
+  }
+
   // Updated Locators
   private nodeTypeFilter = '#filter-select-type .el-select';
   private nodeStatusFilter = '#filter-select-status .el-select';

page-objects/views/project/projectFormPage.ts

@@ -1,11 +1,12 @@
 import BaseLayoutPage from '@/page-objects/layout/baseLayoutPage';
+import { FormPage } from '@/page-objects/components/form/formPage';
 
-export class ProjectFormPage extends BaseLayoutPage {
+export class ProjectFormPage extends FormPage<Project> {
   // Locators
   private nameInput = '[data-test="name"] input';
   private descriptionTextarea = '[data-test="description"] textarea';
 
-  async fillProjectForm(name: string, description: string) {
+  async fillForm({name, description}: Project) {
     await this.setName(name);
     await this.setDescription(description);
   }

page-objects/views/project/projectListPage.ts

@@ -1,13 +1,24 @@
 import ListLayoutPage from '@/page-objects/layout/listLayoutPage';
+import { ProjectFormPage } from '@/page-objects/views/project/projectFormPage';
+import { FormPage } from '@/page-objects/components/form/formPage';
 
 export class ProjectListPage extends ListLayoutPage<Project> {
   protected path = '/#/projects';
 
+  getFormPage(): FormPage<Project> {
+    return new ProjectFormPage(this.page);
+  }
+
   // Locators
   private nameColumn = 'td:nth-child(2)';
   private spidersColumn = 'td:nth-child(3)';
   private descriptionColumn = 'td:nth-child(4)';
 
+  async createRow(form: Project) {
+    await this.clickCreate();
+    await this.formPage.fillForm(form);
+  }
+
   async getTableRow(rowIndex: number) {
     const row = this.page.locator(this.tableRows).nth(rowIndex);
     return {

page-objects/views/spider/spiderFormPage.ts

@@ -1,6 +1,6 @@
-import BaseLayoutPage from '@/page-objects/layout/baseLayoutPage';
+import { FormPage } from '@/page-objects/components/form/formPage';
 
-export class SpiderFormPage extends BaseLayoutPage {
+export class SpiderFormPage extends FormPage<Spider> {
   // Locators
   private nameInput = '[data-test="name"] input';
   private projectSelect = '[data-test="project_id"] .el-select';
@@ -13,7 +13,7 @@ export class SpiderFormPage extends BaseLayoutPage {
   private nodeCheckTagGroup = '[data-test="nodes"] .cl-check-tag-group';
   private descriptionTextarea = '[data-test="description"] textarea';
 
-  async fillSpiderForm(name: string, project: string, cmd: string, description: string) {
+  async fillForm({name, project, cmd, description}: Spider) {
     await this.setName(name);
     await this.setProject(project);
     await this.setCommand(cmd);

page-objects/views/spider/spiderListPage.ts

@@ -1,8 +1,13 @@
 import ListLayoutPage from '@/page-objects/layout/listLayoutPage';
+import { SpiderFormPage } from '@/page-objects/views/spider/spiderFormPage';
 
 export class SpiderListPage extends ListLayoutPage<Spider> {
   protected path = '/#/spiders';
 
+  getFormPage() {
+    return new SpiderFormPage(this.page);
+  }
+
   // Locators
   private nameColumn = '.name';
   private projectColumn = '.project_id';
@@ -32,15 +37,21 @@ export class SpiderListPage extends ListLayoutPage<Spider> {
     return await this.page.isVisible('[custom-class*="upload-files-dialog"]');
   }
 
-  async runSpider(rowIndex: number) {
+  async clickRunSpider(rowIndex: number) {
     await this.page.locator(this.tableRows).nth(rowIndex).locator(this.runButton).click();
   }
 
-  async uploadFiles(rowIndex: number) {
+  async runSpider(rowIndex: number) {
+    await this.clickRunSpider(rowIndex);
+    await this.page.waitForSelector(this.confirmButton);
+    await this.confirm();
+  }
+
+  async clickUploadFiles(rowIndex: number) {
     await this.page.locator(this.tableRows).nth(rowIndex).locator(this.uploadFilesButton).click();
   }
 
-  async viewData(rowIndex: number) {
+  async clickViewData(rowIndex: number) {
     await this.page.locator(this.tableRows).nth(rowIndex).locator(this.viewDataButton).click();
   }
 

tests/login/login.spec.ts

@@ -1,6 +1,7 @@
 import { test as base, expect } from '@playwright/test';
 import { LoginPage } from '@/page-objects/views/login/loginPage';
 import userData from '@/fixtures/userData.json';
+import { TAG_PRIORITY_CRITICAL } from '@/constants/priority';
 
 // Define a new test fixture with a blank storage state
 const test = base.extend({
@@ -15,7 +16,7 @@ const test = base.extend({
   },
 });
 
-test.describe('Login Tests', () => {
+test.describe('Login Tests', { tag: TAG_PRIORITY_CRITICAL }, () => {
   let loginPage: LoginPage;
 
   test.beforeEach(async ({ page }) => {

tests/node/nodeList.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect } from '@playwright/test';
 import { NodeListPage } from '@/page-objects/views/node/nodeListPage';
+import { TAG_PRIORITY_HIGH, TAG_PRIORITY_MEDIUM } from '@/constants/priority';
+import { CATEGORY_FILTER_ROWS, CATEGORY_ROW_ACTIONS } from '@/constants/category';
 
 test.describe('Node List Tests', () => {
   let nodeListPage: NodeListPage;
@@ -11,51 +13,55 @@ test.describe('Node List Tests', () => {
     await nodeListPage.navigate();
   });
 
-  test('should display the node list', async () => {
-    const nodeCount = await nodeListPage.getNodeCount();
-    expect(nodeCount).toBeGreaterThan(0);
+  test.describe(CATEGORY_ROW_ACTIONS, { tag: TAG_PRIORITY_HIGH }, () => {
+    test('should navigate to the node details page', async ({ page }) => {
+      await nodeListPage.navigateToDetail(0);
+      await page.waitForSelector('.detail-layout');
+      expect(page.url()).toMatch(/\/nodes\/[0-9a-f]{24}/);
+    });
   });
 
-  test('should filter nodes by type', async ({ page }) => {
-    await nodeListPage.filterByNodeType('true');
-    await page.waitForTimeout(1000); // Add a 1-second wait
-    const nodeCount = await nodeListPage.getNodeCount();
-    expect(nodeCount).toBeGreaterThan(0);
+  test.describe(CATEGORY_FILTER_ROWS, { tag: TAG_PRIORITY_MEDIUM }, () => {
+    test('should filter nodes by type', async ({ page }) => {
+      await nodeListPage.filterByNodeType('true');
+      await page.waitForTimeout(1000); // Add a 1-second wait
+      const nodeCount = await nodeListPage.getNodeCount();
+      expect(nodeCount).toBeGreaterThan(0);
 
-    const firstNodeData = await nodeListPage.getTableRow(0);
-    expect(firstNodeData.type).toContain('Master' || '主节点');
-  });
+      const firstNodeData = await nodeListPage.getTableRow(0);
+      expect(firstNodeData.type).toContain('Master' || '主节点');
+    });
 
-  test('should filter nodes by status', async ({ page }) => {
-    await nodeListPage.filterByNodeStatus('on');
-    await page.waitForTimeout(1000); // Add a 1-second wait
-    const nodeCount = await nodeListPage.getNodeCount();
-    expect(nodeCount).toBeGreaterThan(0);
+    test('should filter nodes by status', async ({ page }) => {
+      await nodeListPage.filterByNodeStatus('on');
+      await page.waitForTimeout(1000); // Add a 1-second wait
+      const nodeCount = await nodeListPage.getNodeCount();
+      expect(nodeCount).toBeGreaterThan(0);
 
-    const firstNodeData = await nodeListPage.getTableRow(0);
-    expect(firstNodeData.status).toBe('Online' || '在线');
-  });
+      const firstNodeData = await nodeListPage.getTableRow(0);
+      expect(firstNodeData.status).toBe('Online' || '在线');
+    });
 
-  test('should search for a node by name', async ({ page }) => {
-    const { name } = await nodeListPage.getTableRow(0);
-    const searchTerm = name;
-    await nodeListPage.searchRows(searchTerm);
-    await page.waitForTimeout(1000); // Add a 1-second wait
+    test('should search for a node by name', async ({ page }) => {
+      const { name } = await nodeListPage.getTableRow(0);
+      const searchTerm = name;
+      await nodeListPage.searchRows(searchTerm);
+      await page.waitForTimeout(1000); // Add a 1-second wait
 
-    const nodeCount = await nodeListPage.getNodeCount();
-    expect(nodeCount).toBe(1);
+      const nodeCount = await nodeListPage.getNodeCount();
+      expect(nodeCount).toBe(1);
 
-    const firstNodeData = await nodeListPage.getTableRow(0);
-    expect(firstNodeData.name).toContain(searchTerm);
-  });
+      const firstNodeData = await nodeListPage.getTableRow(0);
+      expect(firstNodeData.name).toContain(searchTerm);
+    });
 
-  test('should search for a non-existent node', async ({ page }) => {
-    const searchTerm = 'Non-Existent Node';
-    await nodeListPage.searchRows(searchTerm);
-    await page.waitForTimeout(1000); // Add a 1-second wait
+    test('should search for a non-existent node', async ({ page }) => {
+      const searchTerm = 'Non-Existent Node';
+      await nodeListPage.searchRows(searchTerm);
+      await page.waitForTimeout(1000); // Add a 1-second wait
 
-    const nodeCount = await nodeListPage.getNodeCount();
-    expect(nodeCount).toBe(0);
+      const nodeCount = await nodeListPage.getNodeCount();
+      expect(nodeCount).toBe(0);
+    });
   });
-
 });