[Backport 3.7] Tests - Extends base class for testing admin pages

tests/end2end/playwright/bad-repository.spec.js

@@ -1,5 +1,6 @@
 // @ts-check
 import { test, expect } from '@playwright/test';
+import {AdminPage} from "./pages/admin";
 
 test.describe('Bad repository in conf', () => {
 
@@ -8,6 +9,8 @@ test.describe('Bad repository in conf', () => {
     test.beforeEach(async ({ page }) => {
         // Go to repos page
         await page.goto('/admin.php/admin/maps', { waitUntil: 'networkidle' });
+        const adminPage = new AdminPage(page);
+        await adminPage.checkPage('Maps management');
     });
 
     test('Badge displayed for bad repository', async ({ page }) => {

tests/end2end/playwright/maps-management.spec.js

@@ -1,5 +1,6 @@
 // @ts-check
 import { test, expect } from '@playwright/test';
+import {AdminPage} from "./pages/admin";
 
 test.describe('Maps management', () => {
 
@@ -12,9 +13,8 @@ test.describe('Maps management', () => {
 
     test('Create and remove a repository', async ({ page }) => {
         // Go to Maps management
-        await page.getByRole('link', { name: 'Maps management' }).click();
-        // Check selected admin menu item
-        await expect(page.locator('#menu li.active')).toHaveText('Maps management');
+        const adminPage = new AdminPage(page);
+        await adminPage.openPage('Maps management');
         // Contains 2 buttons Create a repository
         await expect(page.locator('div').filter({ hasText: 'Create a repository' }).getByRole('link', { name: 'Create a repository' })).toHaveCount(2);
 
@@ -24,7 +24,7 @@ test.describe('Maps management', () => {
         // Check URL
         await expect(page).toHaveURL(/.*admin.php\/admin\/maps\/editSection/);
         // Check selected admin menu item
-        await expect(page.locator('#menu li.active')).toHaveText('Maps management');
+        await adminPage.checkPage('Maps management');
 
         // Check form
         await expect(page.locator('[id=jforms_admin_config_section_path]')).toHaveValue('');
@@ -87,11 +87,10 @@ test.describe('Maps management', () => {
         // Check URL
         await expect(page).toHaveURL(/.*admin.php\/admin\/maps/);
         // Check message
-        await expect(page.locator('div.alert.alert-block')).toHaveClass(/alert-info/);
-        await expect(page.locator('div.alert.alert-block.alert-info')).toContainText('The repository data has been saved.');
+        await adminPage.checkAlert('alert-info', '×The repository data has been saved.');
 
         // Check selected admin menu item
-        await expect(page.locator('#menu li.active')).toHaveText('Maps management');
+        await adminPage.checkPage('Maps management');
 
         // Remove created repository
         page.once('dialog', dialog => {
@@ -100,28 +99,26 @@ test.describe('Maps management', () => {
         });
         await page.locator('[href="/admin.php/admin/maps/removeSection?repository=projets1982"]').click();
         // Check message
-        await expect(page.locator('div.alert.alert-block')).toHaveClass(/alert-info/);
-        await expect(page.locator('div.alert.alert-block.alert-info')).toContainText('The repository has been removed (8 group(s) concerned)');
+        await adminPage.checkAlert('alert-info', '×The repository has been removed (8 group(s) concerned)');
         // Check URL
         await expect(page).toHaveURL(/.*admin.php\/admin\/maps/);
 
         // Check selected admin menu item
-        await expect(page.locator('#menu li.active')).toHaveText('Maps management');
+        await adminPage.checkPage('Maps management');
     });
 
     test('Update a repository', async ({ page }) => {
         // Go to Maps management
-        await page.getByRole('link', { name: 'Maps management' }).click();
-        // Check selected admin menu item
-        await expect(page.locator('#menu li.active')).toHaveText('Maps management');
+        const adminPage = new AdminPage(page);
+        await adminPage.openPage('Maps management');
 
         // Go to modify repository
         await page.locator('a[href="/admin.php/admin/maps/modifySection?repository=testsrepository"]').click()
 
         // Check URL
         await expect(page).toHaveURL(/.*admin.php\/admin\/maps\/editSection\?repository=testsrepository/);
         // Check selected admin menu item
-        await expect(page.locator('#menu li.active')).toHaveText('Maps management');
+        await adminPage.checkPage('Maps management');
 
         // Check form
         await expect(page.locator('[id=jforms_admin_config_section_path]')).toHaveValue('/srv/lzm/tests/qgis-projects/tests/');
@@ -178,7 +175,7 @@ test.describe('Maps management', () => {
         await expect(page).toHaveURL(/.*admin.php\/admin\/maps/);
 
         // Check selected admin menu item
-        await expect(page.locator('#menu li.active')).toHaveText('Maps management');
+        await adminPage.checkPage('Maps management');
     });
 
 });

tests/end2end/playwright/pages/admin.js

@@ -0,0 +1,45 @@
+// @ts-check
+
+import {expect, Locator, Page} from '@playwright/test';
+import { BasePage } from './base';
+
+export class AdminPage extends BasePage {
+    /**
+     * Main administrator menu
+     * @type {Locator}
+     */
+    menu;
+
+    /**
+     * Main administrator message bar
+     * @type {Locator}
+     */
+    warningMessage;
+
+    /**
+     * Constructor for an administrator page
+     * @param {Page} page The playwright page
+     */
+    constructor(page) {
+        super(page);
+        this.menu = page.locator('#menu');
+        this.warningMessage = page.locator('.alert');
+    }
+
+    /**
+     * Navigate in the administrator menu by clicking in the menu
+     * @param {string} expected Name of the page
+     */
+    async openPage(expected){
+        await this.page.getByRole('link', { name: expected }).click();
+        await this.checkPage(expected);
+    }
+
+    /**
+     * Check that the menu is OK
+     * @param {string} expected Name of the page
+     */
+    async checkPage(expected){
+        await expect(this.menu.locator('li.active')).toHaveText(expected);
+    }
+}

tests/end2end/playwright/pages/base.js

@@ -0,0 +1,42 @@
+// @ts-check
+
+import {expect, Locator, Page} from '@playwright/test';
+
+export class BasePage {
+    /** @type {Page} */
+    page;
+
+    /**
+     * Header menu
+     * @type {Locator}
+     */
+    headerMenu;
+
+    /**
+     * Top message bar
+     * @type {Locator}
+     */
+    alert;
+
+    /**
+     * Constructor for a base page
+     * @param {Page} page The playwright page
+     */
+    constructor(page) {
+        this.page = page;
+        this.headerMenu = page.locator('#headermenu');
+        this.alert = page.locator('.alert');
+    }
+
+    /**
+     * Check main alert message : level and content if necessary
+     * @param {string} level Name of the CSS class for the level
+     * @param {string} message Content of the message, if necessary
+     */
+    async checkAlert(level, message) {
+        await expect(this.alert).toHaveClass(new RegExp(level, "g"));
+        if (message) {
+            await expect(this.alert).toHaveText(message);
+        }
+    }
+}

tests/end2end/playwright/pages/project.js

@@ -1,11 +1,9 @@
 // @ts-check
 import {expect, Locator, Page} from '@playwright/test';
 import { gotoMap } from '../globals';
+import { BasePage } from './base';
 
-export class ProjectPage {
-    /** @type {Page} */
-    page;
-
+export class ProjectPage extends BasePage {
     // Metadata
     /**
      * Project name metadata
@@ -78,13 +76,13 @@ export class ProjectPage {
         this.page.locator(`#attribute-layer-table-${name}`);
 
     /**
-     * Constructor
+     * Constructor for a QGIS project page
      * @param {Page} page The playwright page
      * @param {string} project The project name
      * @param {string} repository The repository name, default to testsrepository
      */
     constructor(page, project, repository = 'testsrepository') {
-        this.page = page;
+        super(page);
         this.project = project;
         this.repository = repository;
         this.dock = page.locator('#dock');

tests/end2end/playwright/server-information.spec.js

@@ -1,5 +1,6 @@
 // @ts-check
 import { test, expect } from '@playwright/test';
+import {AdminPage} from "./pages/admin";
 
 test.describe('Server information', () => {
 
@@ -11,10 +12,11 @@ test.describe('Server information', () => {
     });
 
     test('Check page', async ({ page }) => {
+        const adminPage = new AdminPage(page);
+
         // Go to server information
-        await page.getByRole('link', { name: 'Server information' }).click();
-        // Check selected admin menu item
-        await expect(page.locator('#menu li.active')).toHaveText('Server information');
+        await adminPage.openPage('Server information');
+
         // Check that Lizmap Web Client table contains 3 lines
         const lwcRows = page.locator('#lizmap_server_information table.table-lizmap-web-client tr')
         await expect(lwcRows).toHaveCount(3);