@vibe/testkit
Version:
Vibe e2e testing toolkit
196 lines • 8.87 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { test } from "@playwright/test";
import { TextField } from "./TextField";
import { BaseElement } from "./BaseElement";
import { ListItem } from "./ListItem";
import { IconButton } from "./IconButton";
/**
* Class representing a Dropdown element.
* Extends the BaseElement class.
*/
export class Dropdown extends BaseElement {
/**
* Create a Dropdown element.
* @param {Page} page - The Playwright page object.
* @param {Locator} locator - The locator for the Dropdown element.
* @param {string} elementReportName - The name for reporting purposes.
*/
constructor(page, locator, elementReportName) {
super(page, locator, elementReportName);
this.inputField = new TextField(page, locator.locator("input"), `${elementReportName} - Input Field`);
this.clearSelectionIconButton = new IconButton(page, locator.locator(".clear-indicator"), `${elementReportName} - Clear Selection Icon Button`);
}
/**
* Get a dropdown item by item.
* @param {string} item - The name of the item to get the dropdown item for.
* @returns {Promise<ListItem>} The dropdown item.
*/
getDropdownItemByItem(item) {
return __awaiter(this, void 0, void 0, function* () {
return yield test.step(`Get dropdown item by item ${item} for ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
return new ListItem(this.getPage(), this.getLocator().getByRole("option", { name: item }), item);
}));
});
}
/**
* Check if the dropdown is open.
* @returns {Promise<boolean>} True if the dropdown is open, false otherwise.
*/
isDropdownOpen() {
return __awaiter(this, void 0, void 0, function* () {
return yield test.step(`Check if dropdown is open for ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
return yield this.inputField.isExpanded();
}));
});
}
/**
* Open the dropdown.
* @returns {Promise<void>}
*/
open() {
return __awaiter(this, void 0, void 0, function* () {
yield test.step(`Open dropdown for ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
if (!(yield this.isDropdownOpen())) {
yield this.click();
// Wait for the dropdown to open
yield this.getPage().waitForTimeout(200);
}
}));
});
}
/**
* Close the dropdown.
* @returns {Promise<void>}
*/
close() {
return __awaiter(this, void 0, void 0, function* () {
yield test.step(`Close dropdown for ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
if (yield this.isDropdownOpen()) {
yield this.click();
// Wait for the dropdown to close
yield this.getPage().waitForTimeout(200);
}
}));
});
}
/**
* Select an item from a dropdown.
* @param {string} item - The value text to be selected in the dropdown.
* @returns {Promise<void>}
*/
selectItem(item) {
return __awaiter(this, void 0, void 0, function* () {
yield test.step(`Select item ${item} for ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
yield this.open();
// If dropdown has search functionality, use it
if (yield this.inputField.isVisible(1000)) {
yield this.search(item);
const listItem = yield this.getDropdownItemByItem(item);
yield listItem.click();
return;
}
// For dropdowns without search, scroll through options to find the item
const targetOption = this.getPage().getByRole("option", { name: item });
try {
// Check if the item is already visible
yield targetOption.waitFor({ timeout: 1000 });
yield targetOption.scrollIntoViewIfNeeded();
yield targetOption.click();
return;
}
catch (_a) {
// Item not immediately visible, need to scroll through options
}
// Scroll through options to find the target item
const allOptions = this.getPage().getByRole("option");
let found = false;
let attempts = 0;
const maxAttempts = 50;
let previousOptionCount = 0;
while (!found && attempts < maxAttempts) {
const optionCount = yield allOptions.count();
// If no new options loaded after scrolling, we might have reached the end
if (attempts > 0 && optionCount === previousOptionCount) {
break;
}
previousOptionCount = optionCount;
// Check each visible option
for (let i = 0; i < optionCount; i++) {
const option = allOptions.nth(i);
const optionText = yield option.textContent();
if ((optionText === null || optionText === void 0 ? void 0 : optionText.trim()) === item) {
yield option.scrollIntoViewIfNeeded();
yield option.click();
found = true;
break;
}
}
if (!found && optionCount > 0) {
// Scroll down to load more options
const lastOption = allOptions.nth(optionCount - 1);
yield lastOption.scrollIntoViewIfNeeded();
try {
yield lastOption.press("ArrowDown");
}
catch (_b) {
yield lastOption.hover();
yield this.getPage().mouse.wheel(0, 100);
}
yield this.getPage().waitForTimeout(200);
}
attempts++;
}
if (!found) {
throw new Error(`Could not find dropdown option "${item}" after scrolling through ${maxAttempts} attempts`);
}
}));
});
}
/**
* Search for an item in the dropdown.
* @param {string} item - The value text to be searched in the dropdown.
* @returns {Promise<void>}
*/
search(item) {
return __awaiter(this, void 0, void 0, function* () {
yield test.step(`Search for ${item} for ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
yield this.inputField.setText(item);
}));
});
}
/**
* Select multiple items from a dropdown.
* @param items - The values text to be selected in the dropdown.
* @returns {Promise<void>}
*/
selectMultipleItems(items) {
return __awaiter(this, void 0, void 0, function* () {
yield test.step(`Select multiple items ${items} for ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
yield this.open();
for (const item of items) {
yield this.selectItem(item);
}
}));
});
}
/**
* Clear the selection.
* @returns {Promise<void>}
*/
clearSelection() {
return __awaiter(this, void 0, void 0, function* () {
yield test.step(`Clear selection for ${this.getElementReportName()}`, () => __awaiter(this, void 0, void 0, function* () {
yield this.clearSelectionIconButton.click();
}));
});
}
}
//# sourceMappingURL=Dropdown.js.map