GlpiPage.ts

/**
 * ---------------------------------------------------------------------
 *
 * GLPI - Gestionnaire Libre de Parc Informatique
 *
 * http://glpi-project.org
 *
 * @copyright 2015-2026 Teclib' and contributors.
 * @licence   https://www.gnu.org/licenses/gpl-3.0.html
 *
 * ---------------------------------------------------------------------
 *
 * LICENSE
 *
 * This file is part of GLPI.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * ---------------------------------------------------------------------
 */

import { expect, type Locator, type Page } from '@playwright/test';
import { readFileSync } from 'fs';
import path from 'path';

/**
 * Store common actions that can be executed on any GLPI page.
 */
export class GlpiPage
{
    public readonly page: Page;
    public readonly user_menu: Locator;
    public readonly logout_link: Locator;
    public readonly change_profile_button: Locator;
    public readonly history_rows: Locator;
    public readonly dashboards_widgets: Locator;
    public readonly active_entity: Locator;

    // Layout locators (common to all authenticated pages)
    public readonly sidebar: Locator;
    public readonly main_header: Locator;
    public readonly sidebar_menu_toggles: Locator;
    public readonly user_menu_dropdown: Locator;
    public readonly entity_menu_toggle: Locator;
    public readonly entity_menu_dropdown: Locator;
    public readonly about_link: Locator;

    // Notes tab locators
    public readonly add_note_button: Locator;
    public readonly submit_note_button: Locator;
    public readonly is_visible_on_ticket_checkbox: Locator;
    public readonly note_content_input: Locator;
    public readonly notes: Locator;
    public readonly notes_content: Locator;

    public constructor(page: Page)
    {
        this.page = page;

        // Define locators
        this.user_menu             = this.getLink('User menu');
        this.logout_link           = this.getLink('Logout');
        this.change_profile_button = this.getButton('Change profile');
        this.history_rows          = page.getByRole('row');
        this.dashboards_widgets    = page.getByTestId("dashboard-widget");

        // .first() because we always display this information twice, with only
        // one being shown depending on the screen size.
        this.active_entity = page.getByTestId("current-entity").first();

        // Layout locators
        this.sidebar              = page.getByTestId('sidebar');
        this.main_header          = page.getByTestId('main-header');
        this.sidebar_menu_toggles = page.getByTestId('sidebar-menu-toggle');
        this.user_menu_dropdown   = page.getByTestId('user-menu-dropdown').filter({ visible: true });
        this.entity_menu_toggle   = page.getByRole('link', { name: 'Select the desired entity' });
        this.entity_menu_dropdown = page.getByRole('dialog', { name: 'Select the desired entity' }).filter({ visible: true });
        this.about_link           = page.getByTestId('about-link').filter({ visible: true });

        // Notes tab locators
        this.add_note_button = this.getButton("Add a note");
        this.submit_note_button = this.getButton("Add");
        this.is_visible_on_ticket_checkbox = this.getCheckbox("Visible on tickets");
        this.note_content_input = this.getRichTextByLabel('Content');
        this.notes = page.getByTestId('note-container');
        this.notes_content = page.getByTestId('note-content');
    }

    public async doSearchAndClickDropdownValue(
        dropdown: Locator,
        value: string,
        exact: boolean = true
    ):  Promise<void> {
        await dropdown.click();
        await this.page.keyboard.type(value);

        // Select2 roles are different if the dropdown group some values
        const simple_dropdown = this.page
            .getByRole('listbox')
            .getByRole('option', {'name': value, exact: exact})
            .first()
        ;
        const simple_dropdown_with_prefix = this.page
            .getByRole('listbox')
            .getByRole('option', {'name': `»${value}`, exact: exact})
        ;
        const dropdown_with_groups = this.page
            .getByRole('listbox')
            .getByRole('listitem', {'name': value, exact: exact})
        ;

        await simple_dropdown
            .or(simple_dropdown_with_prefix)
            .or(dropdown_with_groups)
            .click()
        ;
        await expect(dropdown).toContainText(value);
    }

    public async doSetDropdownValue(
        dropdown: Locator,
        value: string,
        exact: boolean = true,
        check_value: boolean = true,
    ):  Promise<void> {
        await dropdown.click();

        // Select2 roles are different if the dropdown group some values
        const simple_dropdown = this.page
            .getByRole('listbox')
            .getByRole('option', {'name': value, exact: exact})
        ;
        const dropdown_with_groups = this.page
            .getByRole('listbox')
            .getByRole('listitem', {'name': value, exact: exact})
        ;

        await simple_dropdown.or(dropdown_with_groups).click();

        if (check_value) {
            await expect(dropdown).toContainText(value);
        }
    }

    public async doClearDropdownValue(
        dropdown: Locator,
        value: string,
    ): Promise<void> {
        // We have no control on select2 selectors
        // eslint-disable-next-line playwright/no-raw-locators
        await dropdown.getByText(value)
            .locator('..')
            .locator('.select2-selection__choice__remove')
            .click()
        ;
    }

    public async doLogout(): Promise<void>
    {
        await this.user_menu.click();
        await this.page.goto('/front/logout.php');
    }

    public async doChangeProfile(profile: string): Promise<void>
    {
        await this.user_menu.click();
        await this.change_profile_button.click();
        await this.page.getByRole('button', {name: profile}).click();
    }

    public async doGoToTab(name: string): Promise<void>
    {
        const tab = this.getTab(name);
        await tab.click();
    }

    public async doOpenEntitySelector(): Promise<void>
    {
        await this.page.keyboard.press('Control+Alt+KeyE');
    }

    public async doSwitchToAllEntities(): Promise<void>
    {
        await this.getButton("Select all").click();
    }

    public async doSearchForEntity(entity_name: string): Promise<void>
    {
        await this.getTextbox("Search entities").fill(entity_name);
    }

    public async doSwitchToEntityWithRecursion(
        entity_name: string
    ): Promise<void> {
        // eslint-disable-next-line playwright/no-raw-locators
        await this.getButton(entity_name).locator('//ancestor::li').getByRole('button', {
            name: 'Select this entity and all its children',
            includeHidden: true, // Button is hidden in the accessibility tree because it is replaced by keyboard controls.
        }).click();
    }

    public async doSwitchToEntityWithoutRecursion(
        entity_name: string
    ): Promise<void> {
        await this.getButton(entity_name).click();
    }

    public async doAddNote(content: string): Promise<void>
    {
        await this.add_note_button.click();
        await this.note_content_input.fill(content);
        await this.submit_note_button.click();
    }

    public async doUpdateNoteContent(
        index: number,
        content: string,
    ): Promise<void> {
        // Update content
        await this.getButton("Edit").click();
        await this.note_content_input.fill(content);
        await this.getButton("Update").click();
    }

    public async doAddFileToNote(
        index: number,
        file: string,
    ): Promise<void> {
        // Add file to note
        await this.getButton("Edit").click();
        await this.doAddFileToUploadArea(file, this.page.getByRole('dialog'));
        await this.getButton("Update").click();
    }

    public async doDeleteNote(): Promise<void> {
        // Prepare to confirm delete dialog
        this.page.once('dialog', dialog => dialog.accept());

        // Trigger deletion
        await this.getButton("Delete").click();
    }

    public async doAddFileToUploadArea(file: string, parent: Locator): Promise<void>
    {
        // We have no control over this input locator as it is handled by a 3rd
        // party lib.
        // eslint-disable-next-line playwright/no-raw-locators
        await parent.locator('input[type="file"]')
            .setInputFiles(path.join(__dirname, `../../fixtures/${file}`))
        ;
        const progress = parent.getByRole('progressbar');

        // Upload progress should fill up then disappear
        await expect(progress).toHaveText("Upload successful");
        await expect(progress).not.toBeAttached();
    }

    public async doClickDownloadLinkAndGetcontent(
        page: Page,
        link: Locator
    ): Promise<string> {
        // Start download
        const download_promise = page.waitForEvent('download');
        await link.click();

        // Read file once download is complete
        const download = await download_promise;
        const path = await download.path();
        return readFileSync(path).toString();
    }

    /**
     * Locate the orignal <select> item using its label.
     * Select2's container is the span right after the select.
     * The interactive element is the combobox inside the container.
     */
    public getDropdownByLabel(label: string, base?: Locator): Locator
    {
        // eslint-disable-next-line playwright/no-raw-locators
        return (base ?? this.page)
            .getByLabel(label, {exact: true})
            .locator('+ span')
            .getByRole('combobox')
        ;
    }

    public async getDropdownOptions(
        dropdown: Locator,
    ): Promise<(string | null)[]> {
        await dropdown.click();
        const options = await this.page
            .getByRole('listbox')
            .getByRole('option')
            .all()
        ;
        const values = await Promise.all(
            options.map((option) => option.textContent())
        );
        await dropdown.click(); // Close dropdown
        return values;
    }

    /**
     * Locate the original <textarea> item using its label.
     * TinyMCE's container is the div right after the textarea.
     * The interactive element is the body of the iframe.
     */
    public getRichTextByLabel(label: string, base?: Locator): Locator
    {
        // eslint-disable-next-line playwright/no-raw-locators
        return (base ?? this.page)
            .getByLabel(label)
            .locator('+ div')
            .locator('iframe:visible')
            .contentFrame()
            .locator('body')
        ;
    }

    /**
     * Initialize a rich text editor by clicking on it, then return its body locator.
     */
    public async initRichTextByLabel(label: string, base?: Locator): Promise<Locator>
    {
        // eslint-disable-next-line playwright/no-raw-locators
        await (base ?? this.page).getByLabel(label).locator('+ div').click();
        return this.getRichTextByLabel(label, base);
    }

    /**
     * Helper method to make common operation less verbose
     */
    public getLink(name: string): Locator
    {
        return this.page.getByRole('link', {
            name: name,
            exact: true,
        }).filter({ visible: true });
    }

    /**
     * Helper method to make common operation less verbose
     */
    public getButton(name: string): Locator
    {
        return this.page.getByRole('button', {
            name: name,
            exact: true,
        }).filter({ visible: true });
    }

    /**
     * Helper method to make common operation less verbose
     */
    public getCheckbox(name: string): Locator
    {
        return this.page.getByRole('checkbox', {
            name: name,
            exact: true,
        }).filter({ visible: true });
    }

    /**
     * Helper method to make common operation less verbose
     */
    public getTextbox(name: string): Locator
    {
        return this.page.getByRole('textbox', {
            name: name,
            exact: true,
        }).filter({ visible: true });
    }

    /**
     * Helper method to make common operation less verbose
     */
    public getTab(name: string): Locator
    {
        return this.page.getByRole('tab', {
            name: name,
            exact: true,
        }).filter({ visible: true });
    }

    /**
     * Helper method to make common operation less verbose
     */
    public getRegion(name: string): Locator
    {
        return this.page.getByRole('region', {
            name: name,
            exact: true,
        }).filter({ visible: true });
    }

    /**
     * Helper method to make common operation less verbose
     */
    public getHeading(name: string): Locator
    {
        return this.page.getByRole('heading', {
            name: name,
            exact: true,
        }).filter({ visible: true });
    }

    /**
     * Helper method to make common operation less verbose
     */
    public getRadio(name: string): Locator
    {
        return this.page.getByRole('radio', {
            name: name,
            exact: true,
        }).filter({ visible: true });
    }

    /**
     * Helper method to make common operation less verbose
     */
    public getSpinButton(name: string): Locator
    {
        return this.page.getByRole('spinbutton', {
            name: name,
            exact: true,
        }).filter({ visible: true });
    }

    public getAlert(title: string): Locator
    {
        return this.page.getByRole('alert')
            .filter({
                visible: true,
                hasText: title,
            })
        ;
    }

    public getDialog(text: string): Locator
    {
        return this.page.getByRole('dialog')
            .filter({
                visible: true,
                hasText: text,
            })
        ;
    }

    public getEntityFromTree(name: string): Locator
    {
        return this.page.getByRole('button', {
            name: name,
        }).filter({ visible: true });
    }
}