snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

tests/pageobjects/ParticipantsPane.ts

@@ -0,0 +1,308 @@
+import { ChainablePromiseElement } from 'webdriverio';
+
+import { Participant } from '../helpers/Participant';
+
+import AVModerationMenu from './AVModerationMenu';
+import BasePageObject from './BasePageObject';
+
+/**
+ * ID of the closed/hidden participants pane
+ */
+const PARTICIPANTS_PANE = 'participants-pane';
+
+const INVITE = 'Invite someone';
+
+/**
+ * Represents the participants pane from the UI.
+ */
+export default class ParticipantsPane extends BasePageObject {
+    /**
+     * Gets the audio video moderation menu.
+     */
+    getAVModerationMenu() {
+        return new AVModerationMenu(this.participant);
+    }
+
+    /**
+     * Checks if the pane is open.
+     */
+    isOpen() {
+        return this.participant.driver.$(`#${PARTICIPANTS_PANE}`).isExisting();
+    }
+
+    /**
+     * Clicks the "participants" toolbar button to open the participants pane.
+     */
+    async open() {
+        await this.participant.getToolbar().clickParticipantsPaneButton();
+
+        const pane = this.participant.driver.$(`#${PARTICIPANTS_PANE}`);
+
+        await pane.waitForExist();
+        await pane.waitForStable();
+        await pane.waitForDisplayed();
+    }
+
+    /**
+     * Clicks the "participants" toolbar button to close the participants pane.
+     */
+    async close() {
+        await this.participant.getToolbar().clickCloseParticipantsPaneButton();
+
+        await this.participant.driver.$(`#${PARTICIPANTS_PANE}`).waitForDisplayed({ reverse: true });
+    }
+
+    /**
+     * Asserts that {@code participant} shows or doesn't show the video mute icon for the conference participant
+     * identified by {@code testee}.
+     *
+     * @param {Participant} testee - The {@code Participant} for whom we're checking the status of audio muted icon.
+     * @param {boolean} reverse - If {@code true}, the method will assert the absence of the "mute" icon;
+     * otherwise, it will assert its presence.
+     * @returns {Promise<void>}
+     */
+    async assertVideoMuteIconIsDisplayed(testee: Participant, reverse = false): Promise<void> {
+        const isOpen = await this.isOpen();
+
+        if (!isOpen) {
+            await this.open();
+        }
+
+        const id = `participant-item-${await testee.getEndpointId()}`;
+        const mutedIconXPath
+            = `//div[@id='${id}']//div[contains(@class, 'indicators')]//*[local-name()='svg' and @id='videoMuted']`;
+
+        await this.participant.driver.$(mutedIconXPath).waitForDisplayed({
+            reverse,
+            timeout: 2000,
+            timeoutMsg: `Video mute icon is${reverse ? '' : ' not'} displayed for ${testee.name} at ${
+                this.participant.name} side.`
+        });
+
+        if (!isOpen) {
+            await this.close();
+        }
+    }
+
+    /**
+     * Asserts that {@code participant} shows or doesn't show the video mute icon for the conference participant
+     * identified by {@code testee}.
+     *
+     * @param {Participant} testee - The {@code Participant} for whom we're checking the status of audio muted icon.
+     * @param {boolean} reverse - If {@code true}, the method will assert the absence of the "mute" icon;
+     * otherwise, it will assert its presence.
+     * @returns {Promise<void>}
+     */
+    async assertAudioMuteIconIsDisplayed(testee: Participant, reverse = false): Promise<void> {
+        const isOpen = await this.isOpen();
+
+        if (!isOpen) {
+            await this.open();
+        }
+
+        const id = `participant-item-${await testee.getEndpointId()}`;
+        const mutedIconXPath
+            = `//div[@id='${id}']//div[contains(@class, 'indicators')]//*[local-name()='svg' and @id='audioMuted']`;
+
+        await this.participant.driver.$(mutedIconXPath).waitForDisplayed({
+            reverse,
+            timeout: 2000,
+            timeoutMsg: `Audio mute icon is${reverse ? '' : ' not'} displayed for ${testee.name} at ${
+                this.participant.name} side.`
+        });
+
+        if (!isOpen) {
+            await this.close();
+        }
+    }
+
+
+    /**
+     * Clicks the context menu button in the participants pane.
+     */
+    async clickContextMenuButton() {
+        if (!await this.isOpen()) {
+            await this.open();
+        }
+
+        const menu = this.participant.driver.$('#participants-pane-context-menu');
+
+        await menu.waitForDisplayed();
+        await menu.click();
+    }
+
+    /**
+     * Trys to click allow video button.
+     * @param participantToUnmute
+     */
+    async allowVideo(participantToUnmute: Participant) {
+        if (!await this.isOpen()) {
+            await this.open();
+        }
+
+        const participantId = await participantToUnmute.getEndpointId();
+
+        await this.selectParticipant(participantToUnmute);
+        await this.openParticipantContextMenu(participantToUnmute);
+
+        const unmuteButton = this.participant.driver
+            .$(`[data-testid="unmute-video-${participantId}"]`);
+
+        await unmuteButton.waitForExist();
+        await unmuteButton.click();
+    }
+
+    /**
+     * Trys to click ask to unmute button.
+     * @param participantToUnmute
+     * @param fromContextMenu
+     */
+    async askToUnmute(participantToUnmute: Participant, fromContextMenu: boolean) {
+        if (!await this.isOpen()) {
+            await this.open();
+        }
+
+        await this.participant.getNotifications().dismissAnyJoinNotification();
+
+        const participantId = await participantToUnmute.getEndpointId();
+
+        await this.selectParticipant(participantToUnmute);
+        if (fromContextMenu) {
+            await this.openParticipantContextMenu(participantToUnmute);
+        }
+
+        const unmuteButton = this.participant.driver
+            .$(`[data-testid="unmute-audio-${participantId}"]`);
+
+        await unmuteButton.waitForExist();
+        await unmuteButton.click();
+    }
+
+    /**
+     * Open context menu for given participant.
+     */
+    async selectParticipant(participant: Participant) {
+        const participantId = await participant.getEndpointId();
+        const participantItem = this.participant.driver.$(`#participant-item-${participantId}`);
+
+        await participantItem.waitForExist();
+        await participantItem.waitForStable();
+        await participantItem.waitForDisplayed();
+        await participantItem.moveTo();
+    }
+
+    /**
+     * Open context menu for given participant.
+     */
+    async openParticipantContextMenu(participant: Participant) {
+        const participantId = await participant.getEndpointId();
+        const meetingParticipantMoreOptions = this.participant.driver
+            .$(`[data-testid="participant-more-options-${participantId}"]`);
+
+        await meetingParticipantMoreOptions.waitForExist();
+        await meetingParticipantMoreOptions.waitForDisplayed();
+        await meetingParticipantMoreOptions.waitForStable();
+        await meetingParticipantMoreOptions.moveTo();
+
+        // The button is only revealed (moved into view) while its participant row is actually hovered.
+        // waitForDisplayed/waitForStable above do not guarantee that, so wait for real interactability
+        // right before clicking, retrying the hover if a re-render dropped it in the meantime.
+        await meetingParticipantMoreOptions.waitForClickable();
+        await meetingParticipantMoreOptions.click();
+    }
+
+    /**
+     * Clicks the invite button.
+     */
+    async clickInvite() {
+        if (!await this.isOpen()) {
+            await this.open();
+        }
+
+        const inviteButton = this.participant.driver.$(`button=${INVITE}`);
+
+        await inviteButton.waitForDisplayed();
+        await inviteButton.click();
+    }
+
+    /**
+     * Find the participant by name.
+     * @param name - The name to look for.
+     * @private
+     */
+    private async findLobbyParticipantByName(name: string): Promise<ChainablePromiseElement> {
+        return this.participant.driver.$$('//div[@id="lobby-list"]//div[starts-with(@id, "participant-item-")]')
+            .find(async participant => (await participant.getText()).includes(name));
+    }
+
+    /**
+     * Tries to click on the approve button and fails if it cannot be clicked.
+     * @param participantNameToAdmit - the name of the participant to admit.
+     */
+    async admitLobbyParticipant(participantNameToAdmit: string) {
+        const participantToAdmit = await this.findLobbyParticipantByName(participantNameToAdmit);
+
+        await participantToAdmit.moveTo();
+
+        const participantIdToAdmit = (await participantToAdmit.getAttribute('id'))
+            .substring('participant-item-'.length);
+        const admitButton = this.participant.driver
+            .$(`[data-testid="admit-${participantIdToAdmit}"]`);
+
+        await admitButton.waitForExist();
+        await admitButton.click();
+    }
+
+    /**
+     * Tries to click on the reject button and fails if it cannot be clicked.
+     * @param participantNameToReject - the name of the participant for this {@link ParticipantsPane} to reject.
+     */
+    async rejectLobbyParticipant(participantNameToReject: string) {
+        const participantToReject
+            = await this.findLobbyParticipantByName(participantNameToReject);
+
+        await participantToReject.moveTo();
+
+        const participantIdToReject = (await participantToReject.getAttribute('id'))
+            .substring('participant-item-'.length);
+
+        const moreOptionsButton
+            = this.participant.driver.$(`button[title="More moderation options ${participantNameToReject}"]`);
+
+        await moreOptionsButton.click();
+
+        const rejectButton = this.participant.driver
+            .$(`[data-testid="reject-${participantIdToReject}"]`);
+
+        await rejectButton.waitForExist();
+        await rejectButton.click();
+    }
+
+    /**
+     * Waits for the mute audio action of a participant to be available.
+     * @param participant
+     */
+    async waitForMuteAudioAction(participant: Participant) {
+        if (!await this.isOpen()) {
+            await this.open();
+        }
+
+        const participantId = await participant.getEndpointId();
+
+        await this.participant.driver.$(`#participant-item-${participantId}`).moveTo();
+
+        await this.participant.driver.$(`button[data-testid="mute-audio-${participantId}"]`).waitForDisplayed();
+    }
+
+    /**
+     * Mutes the audio of a participant.
+     * @param participant
+     */
+    async muteAudio(participant: Participant) {
+        const participantId = await participant.getEndpointId();
+
+        await this.participant.driver.$(`#participant-item-${participantId}`).moveTo();
+
+        await this.participant.driver.$(`button[data-testid="mute-audio-${participantId}"]`).click();
+    }
+}