@agnos-ui/page-objects 0.3.1 → 0.4.0-next.1

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+	"extends": ["../.eslintrc.json"]
+}

package/lib/accordion.po.ts

@@ -0,0 +1,93 @@
+import type {Locator} from '@playwright/test';
+import {BasePO} from '@agnos-ui/base-po';
+
+export class AccordionPO extends BasePO {
+	private readonly selectors = {
+		item: '.accordion-item',
+		bodyContainer: '.accordion-collapse',
+		body: '.accordion-body',
+		header: '.accordion-header',
+		buttons: '.accordion-button',
+	};
+	override getComponentSelector(): string {
+		return '.au-accordion';
+	}
+
+	/**
+	 * Gets the locators of the items containing the header and the body-container inside
+	 * the accordion
+	 */
+	get locatorAccordionItems(): Locator {
+		return this.locatorRoot.locator(this.selectors.item);
+	}
+
+	/**
+	 * Gets the locators of the item specified by the itemIndex containing the header and the body-container inside
+	 * the accordion
+	 */
+	locatorAccordionItem(itemIndex: number): Locator {
+		return this.locatorRoot.locator(this.selectors.item).nth(itemIndex);
+	}
+
+	get locatorAccordionCBodyContainers(): Locator {
+		return this.locatorAccordionItems.locator(this.selectors.bodyContainer);
+	}
+
+	locatorAccordionBodyContainer(bodyContainerIndex: number): Locator {
+		return this.locatorAccordionItem(bodyContainerIndex).locator(this.selectors.bodyContainer);
+	}
+
+	/**
+	 * Gets the locator of the bodies of the accordion.
+	 */
+	get locatorAccordionBodies(): Locator {
+		return this.locatorAccordionCBodyContainers.locator(this.selectors.body);
+	}
+
+	locatorAccordionBody(bodyIndex: number): Locator {
+		return this.locatorAccordionBodyContainer(bodyIndex).locator(this.selectors.body);
+	}
+
+	get locatorAccordionHeaders(): Locator {
+		return this.locatorAccordionItems.locator(this.selectors.header);
+	}
+
+	locatorAccordionHeader(headerIndex: number): Locator {
+		return this.locatorAccordionItem(headerIndex).locator(this.selectors.header);
+	}
+
+	/**
+	 * Gets the locators of the buttons that handle the accordion, present in the accordion header.
+	 * It does not get the locators of the buttons present in the body, added by the developer.
+	 */
+	get locatorAccordionButtons(): Locator {
+		return this.locatorAccordionHeaders.locator(this.selectors.buttons);
+	}
+
+	locatorAccordionButton(buttonIndex: number): Locator {
+		return this.locatorAccordionHeader(buttonIndex).locator(this.selectors.buttons);
+	}
+
+	async state() {
+		return await this.locatorRoot.evaluate((rootNode: HTMLElement) => {
+			const itemsElements = [...rootNode.querySelectorAll('.accordion-item')] as HTMLDivElement[];
+			const items = [];
+			for (const item of itemsElements) {
+				const bodyContainer = item.querySelector('.accordion-collapse');
+				const button = item.querySelector('.accordion-button');
+				items.push({
+					classes: item.className.trim().split(' '),
+					id: item.id,
+					isInDOM: bodyContainer !== null ? true : false,
+					bodyContainerId: bodyContainer?.id,
+					buttonId: button?.id,
+					expanded: button?.getAttribute('aria-expanded'),
+					disabled: button?.getAttribute('aria-disabled'),
+					labeledBy: bodyContainer?.getAttribute('aria-labelledby'),
+					buttonControls: button?.getAttribute('aria-controls'),
+				});
+			}
+			return {rootClasses: rootNode.className.trim().split(' '), items: items};
+		});
+	}
+}

package/lib/alert.po.ts

@@ -0,0 +1,34 @@
+import {BasePO} from '@agnos-ui/base-po';
+import type {Locator} from '@playwright/test';
+
+export const alertSelectors = {
+	rootComponent: '.alert',
+	body: '.alert-body',
+	closeButton: '.btn-close',
+};
+
+export class AlertPO extends BasePO {
+	selectors = structuredClone(alertSelectors);
+
+	override getComponentSelector(): string {
+		return this.selectors.rootComponent;
+	}
+
+	get locatorCloseButton(): Locator {
+		return this.locatorRoot.locator(this.selectors.closeButton);
+	}
+
+	async state() {
+		return this.locatorRoot.evaluate((rootNode: HTMLElement, selectors) => {
+			// normalize body content to remove non-printable characters such as line breaks
+			// as different browsers represent innerText in their own manner
+			const body = rootNode.querySelector<HTMLDivElement>(selectors.body)?.innerText?.replace(/[^\x20-\x7E]/g, '');
+			const closeButton = rootNode.querySelector<HTMLButtonElement>(selectors.closeButton)?.getAttribute('aria-label');
+			return {
+				rootClasses: rootNode.className.trim().split(' ').sort(),
+				body,
+				closeButton,
+			};
+		}, this.selectors);
+	}
+}

package/lib/index.ts

@@ -0,0 +1,9 @@
+export * from './modal.po';
+export * from './pagination.po';
+export * from './rating.po';
+export * from './select.po';
+export * from './alert.po';
+export * from './accordion.po';
+export * from './progressbar.po';
+export * from './slider.po';
+export * from './toast.po';

package/lib/modal.po.ts

@@ -0,0 +1,63 @@
+import type {Locator} from '@playwright/test';
+import {BasePO} from '@agnos-ui/base-po';
+
+export const modalSelectors = {
+	// TODO: should we use bootstrap-independent classes starting with au- ?
+	rootComponent: '.modal',
+	closeButton: '.btn-close',
+	backdrop: "xpath=./preceding-sibling::div[contains(@class,'modal-backdrop')]",
+	header: '.modal-header',
+	title: '.modal-title',
+	body: '.modal-body',
+	footer: '.modal-footer',
+};
+
+export class ModalPO extends BasePO {
+	selectors = structuredClone(modalSelectors);
+
+	override getComponentSelector(): string {
+		return this.selectors.rootComponent;
+	}
+
+	get locatorHeader(): Locator {
+		return this.locatorRoot.locator(this.selectors.header);
+	}
+
+	get locatorTitle(): Locator {
+		return this.locatorHeader.locator(this.selectors.title);
+	}
+
+	get locatorBody(): Locator {
+		return this.locatorRoot.locator(this.selectors.body);
+	}
+
+	get locatorFooter(): Locator {
+		return this.locatorRoot.locator(this.selectors.footer);
+	}
+
+	get locatorCloseButton(): Locator {
+		return this.locatorRoot.locator(this.selectors.closeButton);
+	}
+
+	get locatorBackdrop(): Locator {
+		return this.locatorRoot.locator(this.selectors.backdrop);
+	}
+
+	async state() {
+		return this.locatorRoot.evaluate(async (rootNode: HTMLElement, selectors) => {
+			const closeButton = rootNode.querySelector<HTMLButtonElement>(selectors.closeButton)?.getAttribute('aria-label');
+			const header = rootNode.querySelector<HTMLDivElement>(selectors.header)?.innerText?.trim();
+			const title = rootNode.querySelector<HTMLDivElement>(selectors.title)?.innerText?.trim();
+			const body = rootNode.querySelector<HTMLDivElement>(selectors.body)?.innerText?.trim();
+			const footer = rootNode.querySelector<HTMLDivElement>(selectors.footer)?.innerText?.trim();
+			return {
+				rootClasses: rootNode.className.trim().split(' ').sort(),
+				header,
+				title,
+				body,
+				footer,
+				closeButton,
+			};
+		}, this.selectors);
+	}
+}

package/lib/pagination.po.ts

@@ -0,0 +1,157 @@
+import type {Locator} from '@playwright/test';
+import {BasePO} from '@agnos-ui/base-po';
+
+/** Pagination navigation buttons hrefs */
+export interface HrefsNavigation {
+	first?: string;
+	previous?: string;
+	next?: string;
+	last?: string;
+}
+
+/** Pagination page object */
+export interface PaginationPOState {
+	rootClasses: string[];
+	disabled: string | null;
+	pages: string[];
+	hrefs: string[];
+	hrefsNavigation?: HrefsNavigation;
+	isFirstDisabled?: boolean;
+	isPreviousDisabled?: boolean;
+	isNextDisabled?: boolean;
+	isLastDisabled?: boolean;
+}
+
+export const paginationSelectors = {
+	rootComponent: '.au-pagination',
+	activePage: '.active',
+	previousPage: '.au-previous',
+	nextPage: '.au-next',
+	firstPage: '.au-first',
+	lastPage: '.au-last',
+	pages: '.au-page',
+	ellipses: '.au-ellipsis',
+};
+
+export class PaginationPO extends BasePO {
+	selectors = structuredClone(paginationSelectors);
+
+	// TODO should we add this in the list of selector ?
+	// Depend on the setSelectors usage...
+	override getComponentSelector(): string {
+		return this.selectors.rootComponent;
+	}
+
+	/**
+	 * Gets the locator of the button is the current page in the pagination component.
+	 */
+	get locatorActivePage(): Locator {
+		return this.locatorRoot.locator(this.selectors.activePage);
+	}
+
+	/**
+	 * Gets the locator of the button that once clicked moves to the previous page in the pagination component.
+	 */
+	get locatorPreviousButton(): Locator {
+		return this.locatorRoot.locator(this.selectors.previousPage);
+	}
+
+	/**
+	 * Gets the locator of the button that once clicked moves to the next page in the pagination component.
+	 */
+	get locatorNextButton(): Locator {
+		return this.locatorRoot.locator(this.selectors.nextPage);
+	}
+
+	/**
+	 * Gets the locator of the button that once clicked moves to the first page in the pagination component.
+	 */
+	get locatorFirstButton(): Locator {
+		return this.locatorRoot.locator(this.selectors.firstPage);
+	}
+
+	/**
+	 * Gets the locator of the button that once clicked moves to the last page in the pagination component.
+	 */
+	get locatorLastButton(): Locator {
+		return this.locatorRoot.locator(this.selectors.lastPage);
+	}
+
+	/**
+	 * Gets the locators of the pages
+	 */
+	get locatorPages(): Locator {
+		return this.locatorRoot.locator(this.selectors.pages);
+	}
+
+	/**
+	 * Gets the locator of a page button in the pagination component given his position.
+	 * @param pageNumber - The number of the page in the pagination object.
+	 */
+	locatorNthPage(pageNumber: number): Locator {
+		return this.locatorRoot.locator(this.selectors.pages).nth(pageNumber - 1);
+	}
+
+	/**
+	 * Gets the locator of a page button in the pagination component given a string.
+	 * @param pageString - The string of the page in the pagination object.
+	 */
+	locatorPage(pageString: string): Locator {
+		return this.locatorRoot.locator(this.selectors.pages, {hasText: pageString});
+	}
+
+	get locatorEllipses(): Locator {
+		return this.locatorRoot.locator(this.selectors.ellipses);
+	}
+
+	async state() {
+		return this.locatorRoot.evaluate((rootNode: HTMLElement) => {
+			const returnState: PaginationPOState = {rootClasses: [], disabled: null, pages: [], hrefs: []};
+			const pagesElements = [...rootNode.querySelectorAll('.au-page')] as HTMLLinkElement[];
+			const pages = [];
+			const hrefs = [];
+			const hrefsNavigation: HrefsNavigation = {};
+			const getHref = (elem: Element | null) => elem?.getAttribute('href');
+			const firstElem = rootNode.querySelector('a.au-first');
+			const previousElem = rootNode.querySelector('a.au-previous');
+			const nextElem = rootNode.querySelector('a.au-next');
+			const lastElem = rootNode.querySelector('a.au-last');
+			firstElem && (hrefsNavigation.first = getHref(firstElem)!);
+			previousElem && (hrefsNavigation.previous = getHref(previousElem)!);
+			nextElem && (hrefsNavigation.next = getHref(nextElem)!);
+			lastElem && (hrefsNavigation.last = getHref(lastElem)!);
+
+			for (const element of pagesElements) {
+				hrefs.push(element.getAttribute('href') || '');
+				pages.push((element.textContent || '').trim());
+			}
+			const pagesDisabledElements = [...rootNode.querySelectorAll('a.au-page[aria-disabled]')] as HTMLLinkElement[];
+			returnState['pages'] = pages;
+			returnState['hrefs'] = hrefs;
+			returnState['hrefsNavigation'] = hrefsNavigation;
+			returnState['rootClasses'] = rootNode.className.trim().split(' ');
+			returnState['disabled'] = pagesDisabledElements.length === pagesElements.length ? 'true' : null;
+			if (rootNode.querySelector('a.au-previous[aria-disabled]')) {
+				returnState['isPreviousDisabled'] = true;
+			} else if (previousElem) {
+				returnState['isPreviousDisabled'] = false;
+			}
+			if (rootNode.querySelector('a.au-next[aria-disabled]')) {
+				returnState['isNextDisabled'] = true;
+			} else if (nextElem) {
+				returnState['isNextDisabled'] = false;
+			}
+			if (rootNode.querySelector('a.au-first[aria-disabled]')) {
+				returnState['isFirstDisabled'] = true;
+			} else if (firstElem) {
+				returnState['isFirstDisabled'] = false;
+			}
+			if (rootNode.querySelector('a.au-last[aria-disabled]')) {
+				returnState['isLastDisabled'] = true;
+			} else if (lastElem) {
+				returnState['isLastDisabled'] = false;
+			}
+			return returnState;
+		});
+	}
+}

package/lib/progressbar.po.ts

@@ -0,0 +1,53 @@
+import {BasePO} from '@agnos-ui/base-po';
+import type {Locator} from '@playwright/test';
+
+export const progressbarSelectors = {
+	rootComponent: '[role="progressbar"]',
+	outerBar: '.progress',
+	innerBar: '.progress-bar',
+};
+
+export interface State {
+	ariaLabel: string | null;
+	ariaValueNow: string | null;
+	ariaValueMin: string | null;
+	ariaValueMax: string | null;
+	ariaValueText: string | null;
+	label: string | null | undefined;
+	innerClasses: string[];
+	outerHeight: string | undefined;
+	innerWidth: string | undefined;
+}
+
+export class ProgressbarPO extends BasePO {
+	selectors = structuredClone(progressbarSelectors);
+
+	override getComponentSelector(): string {
+		return this.selectors.rootComponent;
+	}
+
+	get locatorOuterBar(): Locator {
+		return this.locatorRoot.locator(this.selectors.outerBar);
+	}
+	get locatorInnerBar(): Locator {
+		return this.locatorRoot.locator(this.selectors.innerBar);
+	}
+
+	async state(): Promise<State> {
+		return this.locatorRoot.evaluate((rootNode: HTMLElement) => {
+			const innerBar = rootNode.querySelector('.progress-bar');
+			const outerBar = rootNode.querySelector('.progress');
+			return {
+				ariaLabel: rootNode.getAttribute('aria-label'),
+				ariaValueNow: rootNode.getAttribute('aria-valuenow'),
+				ariaValueMin: rootNode.getAttribute('aria-valuemin'),
+				ariaValueMax: rootNode.getAttribute('aria-valuemax'),
+				ariaValueText: rootNode.getAttribute('aria-valuetext'),
+				label: innerBar?.textContent?.trim(),
+				innerClasses: innerBar?.className?.trim()?.split(' ')?.sort() ?? [],
+				outerHeight: (outerBar as HTMLElement | undefined)?.style?.height,
+				innerWidth: (innerBar as HTMLElement | undefined)?.style?.width,
+			};
+		});
+	}
+}

package/lib/rating.po.ts

@@ -0,0 +1,46 @@
+import {BasePO} from '@agnos-ui/base-po';
+
+export const ratingSelectors = {
+	rootComponent: '.au-rating',
+	star: '.au-rating-star',
+};
+
+// TODO add selector list
+export class RatingPO extends BasePO {
+	selectors = structuredClone(ratingSelectors);
+
+	override getComponentSelector(): string {
+		return this.selectors.rootComponent;
+	}
+
+	/**
+	 * Get the main title locator of the feature page
+	 */
+	locatorStar(index: number) {
+		return this.locatorRoot.locator(this.selectors.star).nth(index);
+	}
+
+	async state() {
+		return await this.locatorRoot.evaluate((rootNode: HTMLElement, selectors) => {
+			const starsElements = [...rootNode.querySelectorAll(selectors.star)] as HTMLSpanElement[];
+			const stars = [];
+			const classes = [];
+			for (const element of starsElements) {
+				stars.push((element.textContent || '').trim());
+				classes.push(element.className.split(' '));
+			}
+
+			return {
+				rootClasses: rootNode.className.trim().split(' ').sort(),
+				value: rootNode.getAttribute('aria-valuenow'),
+				min: rootNode.getAttribute('aria-valuemin'),
+				max: rootNode.getAttribute('aria-valuemax'),
+				text: rootNode.getAttribute('aria-valuetext'),
+				disabled: rootNode.getAttribute('aria-disabled'),
+				readonly: rootNode.getAttribute('aria-readonly'),
+				stars,
+				classes,
+			};
+		}, this.selectors);
+	}
+}

package/lib/select.po.ts

@@ -0,0 +1,94 @@
+import {BasePO} from '@agnos-ui/base-po';
+
+export const selectSelectors = {
+	rootComponent: '.au-select',
+	// TODO add selector list
+};
+
+export class SelectPO extends BasePO {
+	selectors = structuredClone(selectSelectors);
+
+	override getComponentSelector(): string {
+		return this.selectors.rootComponent;
+	}
+
+	/**
+	 * Get the main title locator of the feature page
+	 */
+	get locatorInput() {
+		return this.locatorRoot.locator('input[type="text"]').nth(0);
+	}
+
+	/**
+	 * Menu container
+	 */
+	get locatorMenu() {
+		return this.locatorRoot.locator('.dropdown-menu');
+	}
+
+	/**
+	 * Return the first menu item locator including the text
+	 */
+	get locatorMenuItems() {
+		return this.locatorMenu.locator('.au-select-item');
+	}
+
+	/**
+	 * Return the first menu item locator including the text
+	 */
+	locatorMenuItem(text: string) {
+		return this.locatorMenu.getByText(text).nth(0);
+	}
+
+	/**
+	 * Bages container
+	 */
+	get locatorBadges() {
+		return this.locatorRoot.locator('div.au-select-badge');
+	}
+
+	/**
+	 * Return the first badge locator including the text
+	 */
+	locatorBadgeItem(text: string) {
+		return this.locatorBadges.filter({hasText: text}).nth(0);
+	}
+
+	async state() {
+		return await this.locatorRoot.evaluate((rootNode: HTMLElement) => {
+			const badgesContainer = rootNode.querySelector('div[role="combobox"]');
+			const input: HTMLInputElement = rootNode.querySelector('input[type="text"]')!;
+
+			const badges = [];
+			if (badgesContainer) {
+				const badgeElements = badgesContainer.querySelectorAll('div.au-select-badge');
+				for (const badgeElement of badgeElements) {
+					badges.push(badgeElement?.textContent?.trim());
+				}
+			}
+
+			const menuElement = rootNode.querySelector('ul.dropdown-menu');
+			const isOpen = menuElement != null;
+			const list: Array<string | undefined> = [];
+			const checked: Array<string | undefined> = [];
+			if (menuElement != null) {
+				const lis = menuElement.querySelectorAll('li.dropdown-item');
+				for (const li of lis) {
+					const text = li.textContent?.trim();
+					list.push(text);
+					if (li.classList.contains('selected')) {
+						checked.push(text);
+					}
+				}
+			}
+
+			return {
+				text: input.value,
+				badges,
+				isOpen,
+				list,
+				checked,
+			};
+		});
+	}
+}

package/lib/slider.po.ts

@@ -0,0 +1,73 @@
+import {BasePO} from '@agnos-ui/base-po';
+import type {Locator} from '@playwright/test';
+
+export const sliderSelectors = {
+	rootComponent: '.au-slider',
+	clickableArea: '.au-slider-clickable-area',
+	handle: '.au-slider-handle',
+	minLabelHorizontal: '.au-slider-label-min',
+	maxLabelHorizontal: '.au-slider-label-max',
+	minLabelVertical: '.au-slider-label-vertical-min',
+	maxLabelVertical: '.au-slider-label-vertical-max',
+	valueLabel: '.au-slider-label-now',
+	progress: '.au-slider-progress',
+};
+
+export class SliderPO extends BasePO {
+	selectors = structuredClone(sliderSelectors);
+
+	override getComponentSelector(): string {
+		return this.selectors.rootComponent;
+	}
+
+	get locatorHandle(): Locator {
+		return this.locatorRoot.locator(this.selectors.handle);
+	}
+
+	get locatorMinLabelHorizontal(): Locator {
+		return this.locatorRoot.locator(this.selectors.minLabelHorizontal);
+	}
+
+	get locatorMaxLabelHorizontal(): Locator {
+		return this.locatorRoot.locator(this.selectors.maxLabelHorizontal);
+	}
+
+	get locatorMinLabelVertical(): Locator {
+		return this.locatorRoot.locator(this.selectors.minLabelVertical);
+	}
+
+	get locatorMaxLabelVertical(): Locator {
+		return this.locatorRoot.locator(this.selectors.maxLabelVertical);
+	}
+
+	get locatorProgress(): Locator {
+		return this.locatorRoot.locator(this.selectors.progress);
+	}
+
+	get locatorValueLabel(): Locator {
+		return this.locatorRoot.locator(this.selectors.valueLabel);
+	}
+
+	async sliderHandleState() {
+		return this.locatorRoot.locator(this.selectors.handle).evaluateAll((rootNode: HTMLElement[]) => {
+			return rootNode.map((rn) => {
+				return {
+					style: rn.getAttribute('style'),
+					value: rn.getAttribute('aria-valuenow'),
+					min: rn.getAttribute('aria-valuemin'),
+					max: rn.getAttribute('aria-valuemax'),
+					disabled: rn.getAttribute('aria-disabled'),
+					readonly: rn.getAttribute('aria-readonly'),
+					ariaLabel: rn.getAttribute('aria-label'),
+					ariaValueText: rn.getAttribute('aria-valuetext'),
+				};
+			});
+		});
+	}
+
+	async sliderProgressState() {
+		return this.locatorRoot.locator(this.selectors.progress).evaluateAll((rootNode: HTMLElement[]) => {
+			return rootNode.map((rn) => rn.getAttribute('style'));
+		});
+	}
+}

package/lib/toast.po.ts

@@ -0,0 +1,35 @@
+import type {Locator} from '@playwright/test';
+import {BasePO} from '@agnos-ui/base-po';
+
+export const toastSelectors = {
+	rootComponent: '.toast',
+	closeButton: '.btn-close',
+	header: '.toast-header',
+	body: '.toast-body',
+};
+
+export class ToastPO extends BasePO {
+	selectors = structuredClone(toastSelectors);
+
+	override getComponentSelector(): string {
+		return this.selectors.rootComponent;
+	}
+
+	get locatorCloseButton(): Locator {
+		return this.locatorRoot.locator(this.selectors.closeButton);
+	}
+
+	async state() {
+		return await this.locatorRoot.evaluate((rootNode: HTMLElement, selectors) => {
+			const body = rootNode.querySelector<HTMLDivElement>(selectors.body)?.innerText;
+			const header = rootNode.querySelector<HTMLDivElement>(selectors.header)?.innerText;
+			const closeButton = rootNode.querySelector<HTMLButtonElement>(selectors.closeButton)?.getAttribute('aria-label');
+			return {
+				rootClasses: rootNode.className.trim().split(' ').sort(),
+				body,
+				header,
+				closeButton,
+			};
+		}, this.selectors);
+	}
+}