@agnos-ui/page-objects
Version:
Page objects to be used when testing AgnosUI-based applications with Playwright.
668 lines (667 loc) • 22 kB
JavaScript
var A = Object.defineProperty;
var R = (c, l, t) => l in c ? A(c, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[l] = t;
var u = (c, l, t) => R(c, typeof l != "symbol" ? l + "" : l, t);
import { BasePO as d } from "@agnos-ui/base-po";
const v = {
// 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"
};
class E extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(v));
}
getComponentSelector() {
return this.selectors.rootComponent;
}
get locatorHeader() {
return this.locatorRoot.locator(this.selectors.header);
}
get locatorTitle() {
return this.locatorHeader.locator(this.selectors.title);
}
get locatorBody() {
return this.locatorRoot.locator(this.selectors.body);
}
get locatorFooter() {
return this.locatorRoot.locator(this.selectors.footer);
}
get locatorCloseButton() {
return this.locatorRoot.locator(this.selectors.closeButton);
}
get locatorBackdrop() {
return this.locatorRoot.locator(this.selectors.backdrop);
}
async state() {
return this.locatorRoot.evaluate((t, e) => {
var n, h, p, b, m, g, y, C, x;
const s = (n = t.querySelector(e.closeButton)) == null ? void 0 : n.getAttribute("aria-label"), a = (p = (h = t.querySelector(e.header)) == null ? void 0 : h.innerText) == null ? void 0 : p.trim(), r = (m = (b = t.querySelector(e.title)) == null ? void 0 : b.innerText) == null ? void 0 : m.trim(), o = (y = (g = t.querySelector(e.body)) == null ? void 0 : g.innerText) == null ? void 0 : y.trim(), i = (x = (C = t.querySelector(e.footer)) == null ? void 0 : C.innerText) == null ? void 0 : x.trim();
return {
rootClasses: t.className.trim().split(" ").sort(),
header: a,
title: r,
body: o,
footer: i,
closeButton: s
};
}, this.selectors);
}
}
const f = {
rootComponent: ".au-pagination",
activePage: ".active",
previousPage: ".au-previous",
nextPage: ".au-next",
firstPage: ".au-first",
lastPage: ".au-last",
pages: ".au-page",
ellipses: ".au-ellipsis"
};
class D extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(f));
}
// TODO should we add this in the list of selector ?
// Depend on the setSelectors usage...
getComponentSelector() {
return this.selectors.rootComponent;
}
/**
* Gets the locator of the button is the current page in the pagination component.
*/
get locatorActivePage() {
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() {
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() {
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() {
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() {
return this.locatorRoot.locator(this.selectors.lastPage);
}
/**
* Gets the locators of the pages
*/
get locatorPages() {
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(t) {
return this.locatorRoot.locator(this.selectors.pages).nth(t - 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(t) {
return this.locatorRoot.locator(this.selectors.pages, { hasText: t });
}
get locatorEllipses() {
return this.locatorRoot.locator(this.selectors.ellipses);
}
async state() {
return this.locatorRoot.evaluate((t) => {
const e = { rootClasses: [], disabled: null, pages: [], hrefs: [] }, s = [...t.querySelectorAll(".au-page")], a = [], r = [], o = {}, i = (g) => g == null ? void 0 : g.getAttribute("href"), n = t.querySelector("a.au-first"), h = t.querySelector("a.au-previous"), p = t.querySelector("a.au-next"), b = t.querySelector("a.au-last");
n && (o.first = i(n)), h && (o.previous = i(h)), p && (o.next = i(p)), b && (o.last = i(b));
for (const g of s)
r.push(g.getAttribute("href") || ""), a.push((g.textContent || "").trim());
const m = [...t.querySelectorAll("a.au-page[aria-disabled]")];
return e.pages = a, e.hrefs = r, e.hrefsNavigation = o, e.rootClasses = t.className.trim().split(" "), e.disabled = m.length === s.length ? "true" : null, t.querySelector("a.au-previous[aria-disabled]") ? e.isPreviousDisabled = !0 : h && (e.isPreviousDisabled = !1), t.querySelector("a.au-next[aria-disabled]") ? e.isNextDisabled = !0 : p && (e.isNextDisabled = !1), t.querySelector("a.au-first[aria-disabled]") ? e.isFirstDisabled = !0 : n && (e.isFirstDisabled = !1), t.querySelector("a.au-last[aria-disabled]") ? e.isLastDisabled = !0 : b && (e.isLastDisabled = !1), e;
});
}
}
const B = {
rootComponent: ".au-rating",
star: ".au-rating-star"
};
class z extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(B));
}
getComponentSelector() {
return this.selectors.rootComponent;
}
/**
* Get the main title locator of the feature page
*/
locatorStar(t) {
return this.locatorRoot.locator(this.selectors.star).nth(t);
}
async state() {
return await this.locatorRoot.evaluate((t, e) => {
const s = [...t.querySelectorAll(e.star)], a = [], r = [];
for (const o of s)
a.push((o.textContent || "").trim()), r.push(o.className.split(" "));
return {
rootClasses: t.className.trim().split(" ").sort(),
value: t.getAttribute("aria-valuenow"),
min: t.getAttribute("aria-valuemin"),
max: t.getAttribute("aria-valuemax"),
text: t.getAttribute("aria-valuetext"),
disabled: t.getAttribute("aria-disabled"),
readonly: t.getAttribute("aria-readonly"),
stars: a,
classes: r
};
}, this.selectors);
}
}
const P = {
rootComponent: ".au-select"
// TODO add selector list
};
class F extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(P));
}
getComponentSelector() {
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(t) {
return this.locatorMenu.getByText(t).nth(0);
}
/**
* Bages container
*/
get locatorBadges() {
return this.locatorRoot.locator("div.au-select-badge");
}
/**
* Return the first badge locator including the text
*/
locatorBadgeItem(t) {
return this.locatorBadges.filter({ hasText: t }).nth(0);
}
async state() {
return await this.locatorRoot.evaluate((t) => {
var h, p;
const e = t.querySelector('div[role="combobox"]'), s = t.querySelector('input[type="text"]'), a = [];
if (e) {
const b = e.querySelectorAll("div.au-select-badge");
for (const m of b)
a.push((h = m == null ? void 0 : m.textContent) == null ? void 0 : h.trim());
}
const r = t.querySelector("ul.dropdown-menu"), o = r != null, i = [], n = [];
if (r != null) {
const b = r.querySelectorAll("li.dropdown-item");
for (const m of b) {
const g = (p = m.textContent) == null ? void 0 : p.trim();
i.push(g), m.classList.contains("selected") && n.push(g);
}
}
return {
text: s.value,
badges: a,
isOpen: o,
list: i,
checked: n
};
});
}
}
const q = {
rootComponent: ".alert",
body: ".alert-body",
closeButton: ".btn-close"
};
class _ extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(q));
}
getComponentSelector() {
return this.selectors.rootComponent;
}
get locatorCloseButton() {
return this.locatorRoot.locator(this.selectors.closeButton);
}
async state() {
return this.locatorRoot.evaluate((t, e) => {
var r, o, i;
const s = (o = (r = t.querySelector(e.body)) == null ? void 0 : r.innerText) == null ? void 0 : o.replace(/[^\x20-\x7E]/g, ""), a = (i = t.querySelector(e.closeButton)) == null ? void 0 : i.getAttribute("aria-label");
return {
rootClasses: t.className.trim().split(" ").sort(),
body: s,
closeButton: a
};
}, this.selectors);
}
}
class W extends d {
constructor() {
super(...arguments);
u(this, "selectors", {
item: ".accordion-item",
bodyContainer: ".accordion-collapse",
body: ".accordion-body",
header: ".accordion-header",
buttons: ".accordion-button"
});
}
getComponentSelector() {
return ".au-accordion";
}
/**
* Gets the locators of the items containing the header and the body-container inside
* the accordion
*/
get locatorAccordionItems() {
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(t) {
return this.locatorRoot.locator(this.selectors.item).nth(t);
}
get locatorAccordionCBodyContainers() {
return this.locatorAccordionItems.locator(this.selectors.bodyContainer);
}
locatorAccordionBodyContainer(t) {
return this.locatorAccordionItem(t).locator(this.selectors.bodyContainer);
}
/**
* Gets the locator of the bodies of the accordion.
*/
get locatorAccordionBodies() {
return this.locatorAccordionCBodyContainers.locator(this.selectors.body);
}
locatorAccordionBody(t) {
return this.locatorAccordionBodyContainer(t).locator(this.selectors.body);
}
get locatorAccordionHeaders() {
return this.locatorAccordionItems.locator(this.selectors.header);
}
locatorAccordionHeader(t) {
return this.locatorAccordionItem(t).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() {
return this.locatorAccordionHeaders.locator(this.selectors.buttons);
}
locatorAccordionButton(t) {
return this.locatorAccordionHeader(t).locator(this.selectors.buttons);
}
async state() {
return await this.locatorRoot.evaluate((t) => {
const e = [...t.querySelectorAll(".accordion-item")], s = [];
for (const a of e) {
const r = a.querySelector(".accordion-collapse"), o = a.querySelector(".accordion-button");
s.push({
classes: a.className.trim().split(" "),
id: a.id,
isInDOM: r !== null,
bodyContainerId: r == null ? void 0 : r.id,
buttonId: o == null ? void 0 : o.id,
expanded: o == null ? void 0 : o.getAttribute("aria-expanded"),
disabled: o == null ? void 0 : o.getAttribute("aria-disabled"),
labeledBy: r == null ? void 0 : r.getAttribute("aria-labelledby"),
buttonControls: o == null ? void 0 : o.getAttribute("aria-controls")
});
}
return { rootClasses: t.className.trim().split(" "), items: s };
});
}
}
const L = {
rootComponent: '[role="progressbar"]',
outerBar: ".progress",
innerBar: ".progress-bar"
};
class j extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(L));
}
getComponentSelector() {
return this.selectors.rootComponent;
}
get locatorOuterBar() {
return this.locatorRoot.locator(this.selectors.outerBar);
}
get locatorInnerBar() {
return this.locatorRoot.locator(this.selectors.innerBar);
}
async state() {
return this.locatorRoot.evaluate((t) => {
var a, r, o, i, n, h;
const e = t.querySelector(".progress-bar"), s = t.querySelector(".progress");
return {
ariaLabel: t.getAttribute("aria-label"),
ariaValueNow: t.getAttribute("aria-valuenow"),
ariaValueMin: t.getAttribute("aria-valuemin"),
ariaValueMax: t.getAttribute("aria-valuemax"),
ariaValueText: t.getAttribute("aria-valuetext"),
label: (a = e == null ? void 0 : e.textContent) == null ? void 0 : a.trim(),
innerClasses: ((i = (o = (r = e == null ? void 0 : e.className) == null ? void 0 : r.trim()) == null ? void 0 : o.split(" ")) == null ? void 0 : i.sort()) ?? [],
outerHeight: (n = s == null ? void 0 : s.style) == null ? void 0 : n.height,
innerWidth: (h = e == null ? void 0 : e.style) == null ? void 0 : h.width
};
});
}
}
const T = {
rootComponent: ".au-slider",
clickableArea: ".au-slider-clickable-area",
handle: ".au-slider-handle",
tick: ".au-slider-tick",
tickLabel: ".au-slider-tick-label",
tickLabelVertical: ".au-slider-tick-label-vertical",
tickLabelNow: ".au-slider-tick-label-now",
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"
};
class G extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(T));
}
getComponentSelector() {
return this.selectors.rootComponent;
}
get locatorHandle() {
return this.locatorRoot.locator(this.selectors.handle);
}
get locatorTick() {
return this.locatorRoot.locator(this.selectors.tick);
}
get locatorTickLabel() {
return this.locatorRoot.locator(this.selectors.tickLabel);
}
get locatorTickLabelNow() {
return this.locatorRoot.locator(this.selectors.tickLabelNow);
}
get locatorTickLabelVertical() {
return this.locatorRoot.locator(this.selectors.tickLabelVertical);
}
get locatorMinLabelHorizontal() {
return this.locatorRoot.locator(this.selectors.minLabelHorizontal);
}
get locatorMaxLabelHorizontal() {
return this.locatorRoot.locator(this.selectors.maxLabelHorizontal);
}
get locatorMinLabelVertical() {
return this.locatorRoot.locator(this.selectors.minLabelVertical);
}
get locatorMaxLabelVertical() {
return this.locatorRoot.locator(this.selectors.maxLabelVertical);
}
get locatorProgress() {
return this.locatorRoot.locator(this.selectors.progress);
}
get locatorValueLabel() {
return this.locatorRoot.locator(this.selectors.valueLabel);
}
async sliderHandleState() {
return this.locatorRoot.locator(this.selectors.handle).evaluateAll((t) => t.map((e) => ({
style: e.getAttribute("style"),
value: e.getAttribute("aria-valuenow"),
min: e.getAttribute("aria-valuemin"),
max: e.getAttribute("aria-valuemax"),
disabled: e.getAttribute("aria-disabled"),
readonly: e.getAttribute("aria-readonly"),
ariaLabel: e.getAttribute("aria-label"),
ariaValueText: e.getAttribute("aria-valuetext")
})));
}
async sliderProgressState() {
return this.locatorRoot.locator(this.selectors.progress).evaluateAll((t) => t.map((e) => e.getAttribute("style")));
}
/**
* Get the state of the tick elements
* @param locator tick locator (horizontal or vertical)
* @returns state of all the ticks
*/
async sliderTickLabelState(t) {
return t.evaluateAll((e) => e.map((s) => ({
style: s.getAttribute("style"),
innerText: s.innerText
})));
}
}
const S = {
rootComponent: ".toast",
closeButton: ".btn-close",
header: ".toast-header",
body: ".toast-body"
};
class k extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(S));
}
getComponentSelector() {
return this.selectors.rootComponent;
}
get locatorCloseButton() {
return this.locatorRoot.locator(this.selectors.closeButton);
}
async state() {
return await this.locatorRoot.evaluate((t, e) => {
var o, i, n;
const s = (o = t.querySelector(e.body)) == null ? void 0 : o.innerText, a = (i = t.querySelector(e.header)) == null ? void 0 : i.innerText, r = (n = t.querySelector(e.closeButton)) == null ? void 0 : n.getAttribute("aria-label");
return {
rootClasses: t.className.trim().split(" ").sort(),
body: s,
header: a,
closeButton: r
};
}, this.selectors);
}
}
const I = {
rootComponent: ".au-toaster",
container: ".au-toaster-container",
closeButton: ".au-toaster-closeAll"
};
class J extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(I));
}
getComponentSelector() {
return this.selectors.rootComponent;
}
get locatorContainer() {
return this.locatorRoot.locator(this.selectors.container);
}
async toastPOs() {
return Array.from(
{ length: await this.locatorContainer.locator(S.rootComponent).count() },
(t, e) => new k(this.locatorContainer, e)
);
}
get locatorCloseButton() {
return this.locatorRoot.locator(this.selectors.closeButton);
}
}
const w = {
rootComponent: '[role="tree"]',
itemContainer: '[role="treeitem"]',
itemToggle: ".au-tree-expand-icon",
itemContents: ".au-tree-item"
};
class K extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(w));
}
getComponentSelector() {
return this.selectors.rootComponent;
}
get locatorItemToggle() {
return this.locatorRoot.locator(this.selectors.itemToggle);
}
get locatorItemContainer() {
return this.locatorRoot.locator(this.selectors.itemContents);
}
async itemContainerState() {
return this.locatorRoot.locator(this.selectors.itemContainer).evaluateAll((t) => t.map((e) => ({
ariaSelected: e.getAttribute("aria-selected"),
ariaExpanded: e.getAttribute("aria-expanded")
})));
}
async itemToggleState() {
return this.locatorRoot.locator(this.selectors.itemToggle).evaluateAll((t) => t.map((e) => ({
ariaLabel: e.getAttribute("aria-label")
})));
}
}
const O = {
rootComponent: ".au-collapse"
};
class Q extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(O));
}
getComponentSelector() {
return this.selectors.rootComponent;
}
async state() {
return this.locatorRoot.evaluate((t, e) => ({
rootClasses: t.className.trim().split(" ").sort()
}), this.selectors);
}
}
const H = {
rootComponent: ".au-carousel",
container: ".au-carousel-container",
slide: ".au-carousel-slide",
nextBtn: ".carousel-control-next",
prevBtn: ".carousel-control-prev",
indicators: ".carousel-indicators",
indicatorBtn: ".carousel-indicators button"
};
class U extends d {
constructor() {
super(...arguments);
u(this, "selectors", structuredClone(H));
}
getComponentSelector() {
return this.selectors.rootComponent;
}
get locatorContainer() {
return this.locatorRoot.locator(this.selectors.container);
}
get locatorNextBtn() {
return this.locatorRoot.locator(this.selectors.nextBtn);
}
get locatorPrevBtn() {
return this.locatorRoot.locator(this.selectors.prevBtn);
}
get locatorIndicators() {
return this.locatorRoot.locator(this.selectors.indicators);
}
get locatorIndicatorBtn() {
return this.locatorRoot.locator(this.selectors.indicatorBtn);
}
get locatorSlide() {
return this.locatorRoot.locator(this.selectors.slide);
}
async state() {
return this.locatorRoot.evaluate((t) => {
const e = t.querySelectorAll(".carousel-indicators button");
return {
rootClasses: t.className.trim().split(" ").sort(),
prevBtn: t.querySelector(".carousel-control-prev") !== null,
nextBtn: t.querySelector(".carousel-control-next") !== null,
indicators: {
selected: [...e].findIndex((s) => s.classList.contains("active")),
count: e.length
},
slides: {
visible: [...t.querySelectorAll(".au-carousel-slide")].findIndex((s) => {
const a = s.getBoundingClientRect(), r = t.getBoundingClientRect();
return a.left >= r.left && a.right <= r.right;
})
}
};
});
}
}
export {
W as AccordionPO,
_ as AlertPO,
U as CarouselPO,
Q as CollapsePO,
E as ModalPO,
D as PaginationPO,
j as ProgressbarPO,
z as RatingPO,
F as SelectPO,
G as SliderPO,
k as ToastPO,
J as ToasterPO,
K as TreePO,
q as alertSelectors,
H as carouselSelectors,
O as collapseSelectors,
v as modalSelectors,
f as paginationSelectors,
L as progressbarSelectors,
B as ratingSelectors,
P as selectSelectors,
T as sliderSelectors,
S as toastSelectors,
I as toasterSelectors,
w as treeSelectors
};