@umbraco/playwright-testhelpers
Version:
Test helpers for making playwright tests for Umbraco solutions
1,058 lines • 51.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTypeUiHelper = void 0;
const test_1 = require("@playwright/test");
const UiBaseLocators_1 = require("./UiBaseLocators");
class DataTypeUiHelper extends UiBaseLocators_1.UiBaseLocators {
moveToBtn;
duplicateToBtn;
newDataTypeBtn;
dataTypeNameTxt;
createDataTypeFolderBtn;
updateDataTypeFolderBtn;
includeLabelsToggle;
addColorBtn;
colorValueTxt;
offsetTimeToggle;
dateFormatTxt;
pageSizeTxt;
ascendingRadioBtn;
descendingRadioBtn;
chooseColumnsDisplayedBtn;
workspaceViewName;
orderByDropDownBox;
showWorkspaceViewFirstToggle;
editInInfiniteEditorToggle;
aliasTxt;
widthTxt;
heightTxt;
minimumTxt;
maximumTxt;
stepSizeTxt;
optionTxt;
addOptionBtn;
maximumAllowedCharsTxt;
numberOfRowsTxt;
minHeightTxt;
maxHeightTxt;
acceptedFileExtensionsTxt;
addAcceptedFileExtensionsBtn;
minimumNumberOfItemsTxt;
maximumNumberOfItemsTxt;
ignoreUserStartNodesToggle;
overlaySizeDropDownBox;
hideAnchorQueryStringInputToggle;
pickMultipleItemsToggle;
enableFocalPointToggle;
amountLowValueTxt;
amountHighValueTxt;
toolbarCheckboxes;
addStylesheetBtn;
dimensionsWidthTxt;
dimensionsHeightTxt;
maxImageSizeTxt;
hideLabelToggle;
defineTagGroupTxt;
showOpenButtonToggle;
enableMultipleChoiceToggle;
addOptionsBtn;
presetValueToggle;
showToggleLabelsToggle;
labelOnTxt;
labelOffTxt;
labelTxt;
chooseAcceptedTypesBtn;
chooseWithPlusBtn;
storageTypeDropDownBox;
allowDecimalsToggle;
chooseLayoutsBtn;
columnsDisplayedItems;
layoutsItems;
inlineRadioBtn;
duplicateBtn;
addWithPlusBtn;
selectAPropertyEditorBtn;
typeToFilterTxt;
chooseStartNodeBtn;
addBlockBtn;
minAmountTxt;
maxAmountTxt;
singleBlockModeBtn;
liveEditingModeBtn;
inlineEditingModeBtn;
propertyEditorWidthTxt;
labelTextTxt;
overlaySizeOption;
chooseContentModelBtn;
chooseSettingsModelBtn;
contentModelNode;
settingsModelNode;
removeExactContentModelNodeBtn;
removeExactSettingsModelNodeBtn;
openBtn;
backgroundColorBtn;
backgroundColorTxt;
chooseCustomStylesheetBtn;
iconColorBtn;
iconColorTxt;
stylesheetRemoveBtn;
hideContentEditorBlockGridBtn;
hideContentEditorBlockListBtn;
customStylesheetLabel;
documentTypeWorkspace;
editorWidthTxt;
createButtonLabelTxt;
gridColumnsTxt;
showResizeOptionsBtn;
columnSpanOptions;
areasTabBtn;
availableRowSpansLowValueTxt;
availableRowSpansHighValueTxt;
areaGridColumnsTxt;
addAreaBtn;
blockAreaConfig;
aliasAliasTxt;
blockGridAreaWorkspaceSubmitBtn;
createLabelTxt;
minAllowedTxt;
maxAllowedTxt;
addSpecifiedAllowanceBtn;
advancedTabBtn;
allowBlockAtRootToggle;
allowInAreasToggle;
chooseThumbnailAlias;
expandChildItemsForMediaBtn;
tiptapToolbarConfiguration;
addGroupToolbarBtn;
addRowToolbarBtn;
tiptapExtensionsConfiguration;
propertyEditor;
selectIconBtn;
newFolderBtn;
dataTypeBtn;
dataTypesMenu;
propertyEditorConfig;
propertyEditorConfigItems;
tiptapStatusbarConfiguration;
blockThumbnailImage;
dataTypeTreeRoot;
createCropBtn;
editCropBtn;
propertyCrops;
constructor(page) {
super(page);
this.moveToBtn = this.actionsMenuContainer.getByLabel('Move to');
this.duplicateToBtn = this.actionsMenuContainer.getByLabel(/^Duplicate to(…)?$/);
this.newDataTypeBtn = page.getByRole('link', { name: 'Data Type', exact: true });
this.dataTypeNameTxt = page.locator('umb-data-type-workspace-editor #nameInput #input');
this.createDataTypeFolderBtn = page.getByLabel('Create folder');
this.newFolderBtn = page.locator('[name="Folder"]');
this.updateDataTypeFolderBtn = page.getByLabel('Update folder');
this.ignoreUserStartNodesToggle = page.getByTestId('property:ignoreUserStartNodes').locator('#toggle');
this.duplicateBtn = this.sidebarModal.getByLabel('Duplicate', { exact: true });
this.selectAPropertyEditorBtn = page.getByLabel('Select a property editor');
this.typeToFilterTxt = page.locator('#filter #input');
// Approved Color
this.includeLabelsToggle = page.locator('#toggle');
this.addColorBtn = page.getByLabel('Add');
this.colorValueTxt = page.getByPlaceholder('Value').getByRole('textbox');
// Date Picker
this.offsetTimeToggle = page.locator('umb-property[label="Offset time"] #toggle');
this.dateFormatTxt = page.getByTestId('property:format').locator('#input');
// List View
this.pageSizeTxt = page.getByTestId('property:pageSize').locator('#input');
this.ascendingRadioBtn = page.locator('uui-radio[label="Ascending [a-z]"] #button');
this.descendingRadioBtn = page.locator('uui-radio[label="Descending [z-a]"] #button');
this.chooseColumnsDisplayedBtn = page.getByTestId('property:includeProperties').getByLabel('Choose');
this.columnsDisplayedItems = page.getByTestId('property:includeProperties').locator('.layout-item');
this.workspaceViewName = page.getByTestId('property:tabName').locator('#input');
this.showWorkspaceViewFirstToggle = page.getByTestId('property:showContentFirst').locator('#toggle');
this.editInInfiniteEditorToggle = page.locator('umb-property[label="Edit in Infinite Editor"] #toggle');
this.orderByDropDownBox = page.getByTestId('property:orderBy').locator('select');
this.chooseLayoutsBtn = page.getByTestId('property:layouts').getByLabel('Choose');
this.layoutsItems = page.getByTestId('property:layouts').locator('.layout-item');
// Image Cropper
this.labelTxt = page.getByLabel('Label', { exact: true });
this.aliasTxt = page.getByLabel('Alias', { exact: true });
this.widthTxt = page.getByLabel('Width', { exact: true });
this.heightTxt = page.getByLabel('Height', { exact: true });
this.propertyCrops = page.getByTestId('property:crops');
this.createCropBtn = this.propertyCrops.getByRole('button', { name: 'Create' });
this.editCropBtn = this.propertyCrops.getByRole('button', { name: 'Edit' });
// Numeric
this.minimumTxt = page.getByTestId('property:min').locator('#input');
this.maximumTxt = page.getByTestId('property:max').locator('#input');
this.stepSizeTxt = page.getByTestId('property:step').locator('#input');
this.allowDecimalsToggle = page.locator('umb-property[label="Allow decimals"] #toggle');
// Radiobox
this.optionTxt = page.getByTestId('property:items').locator('#input');
this.addOptionBtn = page.getByTestId('property:items').getByLabel('Add', { exact: true });
// Textarea - Textstring
this.maximumAllowedCharsTxt = page.getByTestId('property:maxChars').locator('#input');
this.numberOfRowsTxt = page.getByTestId('property:rows').locator('#input');
this.minHeightTxt = page.getByTestId('property:minHeight').locator('#input');
this.maxHeightTxt = page.getByTestId('property:maxHeight').locator('#input');
// Upload
this.acceptedFileExtensionsTxt = page.getByTestId('property:fileExtensions').locator('#input');
this.addAcceptedFileExtensionsBtn = page.getByTestId('property:fileExtensions').getByLabel('Add', { exact: true });
// Multi URL Picker
this.minimumNumberOfItemsTxt = page.getByTestId('property:minNumber').locator('#input');
this.maximumNumberOfItemsTxt = page.getByTestId('property:maxNumber').locator('#input');
this.overlaySizeDropDownBox = page.getByTestId('property:overlaySize').locator('select');
this.hideAnchorQueryStringInputToggle = page.getByTestId('property:hideAnchor').locator('#toggle');
// Media Picker
this.pickMultipleItemsToggle = page.getByTestId('property:multiple').locator('#toggle');
this.enableFocalPointToggle = page.getByTestId('property:enableLocalFocalPoint').locator('#toggle');
this.amountLowValueTxt = page.getByTestId('property:validationLimit').getByLabel('Low value');
this.amountHighValueTxt = page.getByTestId('property:validationLimit').getByLabel('High value');
this.chooseAcceptedTypesBtn = page.getByTestId('property:filter').getByLabel('Choose');
this.chooseWithPlusBtn = page.locator('#btn-add').filter({ hasText: 'Choose' });
this.chooseStartNodeBtn = page.getByTestId('property:startNodeId').locator('#btn-add');
// Rich Editor
this.toolbarCheckboxes = page.getByTestId('property:toolbar').locator('uui-checkbox');
this.addStylesheetBtn = page.getByTestId('property:stylesheets').getByLabel('Add stylesheet');
this.dimensionsWidthTxt = page.getByTestId('property:dimensions').getByLabel('Width');
this.dimensionsHeightTxt = page.getByTestId('property:dimensions').getByLabel('Height');
this.maxImageSizeTxt = page.getByTestId('property:maxImageSize').locator('#input');
this.hideLabelToggle = page.getByTestId('property:hideLabel').locator('#toggle');
this.inlineRadioBtn = page.getByTestId('property:mode').locator('uui-radio[value="Inline"]');
this.addWithPlusBtn = page.getByTestId('property:blocks').locator('#add-button');
// Tags
this.defineTagGroupTxt = page.getByTestId('property:group').locator('#input');
this.storageTypeDropDownBox = page.locator('#native');
// Content Picker
this.showOpenButtonToggle = page.getByTestId('property:showOpenButton').locator('#toggle');
// Dropdown
this.enableMultipleChoiceToggle = page.getByTestId('property:multiple').locator('#toggle');
this.addOptionsBtn = page.getByTestId('property:items').getByLabel('Add', { exact: true });
// True/false
this.presetValueToggle = page.getByTestId('property:default').locator('#toggle');
this.showToggleLabelsToggle = page.getByTestId('property:showLabels').locator('#toggle');
this.labelOnTxt = page.getByTestId('property:labelOn').locator('#input');
this.labelOffTxt = page.getByTestId('property:labelOff').locator('#input');
// Block List Editor and Block Grid Editor
this.addBlockBtn = page.locator('umb-input-block-type #blocks').getByLabel('open');
this.minAmountTxt = page.getByLabel('Low value');
this.maxAmountTxt = page.getByLabel('High value');
this.singleBlockModeBtn = this.page.locator('umb-property-layout').filter({ hasText: 'Single block mode' }).locator('#toggle');
this.liveEditingModeBtn = this.page.locator('umb-property-layout').filter({ hasText: 'Live editing' }).locator('#toggle');
this.inlineEditingModeBtn = this.page.locator('umb-property-layout').filter({ hasText: 'Inline editing' }).locator('#toggle');
this.propertyEditorWidthTxt = this.page.locator('umb-property-layout').filter({ hasText: 'Property editor width' }).locator('#input');
this.labelTextTxt = this.page.locator('[label="Label"]').locator('#input');
this.overlaySizeOption = this.page.locator('[label="Overlay editor size"]').locator('#native');
this.chooseContentModelBtn = this.page.locator('[alias="contentElementTypeKey"]').getByLabel('Choose');
this.chooseSettingsModelBtn = this.page.locator('[alias="settingsElementTypeKey"]').getByLabel('Choose');
this.contentModelNode = this.page.locator('[alias="contentElementTypeKey"]').locator('uui-ref-node-document-type');
this.settingsModelNode = this.page.locator('[alias="settingsElementTypeKey"]').locator('uui-ref-node-document-type');
this.removeExactContentModelNodeBtn = this.page.locator('[alias="contentElementTypeKey"]').getByLabel('Remove', { exact: true });
this.removeExactSettingsModelNodeBtn = this.page.locator('[alias="settingsElementTypeKey"]').getByLabel('Remove', { exact: true });
this.openBtn = this.page.getByLabel('Open', { exact: true });
this.backgroundColorBtn = this.page.locator('umb-property-layout').filter({ hasText: 'Background color' }).getByLabel('Eye dropper');
this.backgroundColorTxt = this.page.locator('[label="Background color"]').locator('[label="Eye dropper"]').locator('#input');
this.iconColorBtn = this.page.locator('umb-property-layout').filter({ hasText: 'Icon color' }).getByLabel('Eye dropper');
this.iconColorTxt = this.page.locator('[label="Icon color"]').locator('[label="Eye dropper"]').locator('#input');
this.stylesheetRemoveBtn = this.page.locator('uui-ref-node').getByLabel('Remove', { exact: true });
this.hideContentEditorBlockListBtn = this.page.locator('[alias="forceHideContentEditorInOverlay"]').locator('#toggle');
this.hideContentEditorBlockGridBtn = this.page.locator('[alias="hideContentEditor"]').locator('#toggle');
this.customStylesheetLabel = this.page.locator('[label="Custom stylesheet"]');
this.chooseThumbnailAlias = this.page.locator('[alias="thumbnail"]').getByLabel('Choose');
this.documentTypeWorkspace = this.page.locator('umb-document-type-workspace-editor');
this.editorWidthTxt = this.page.locator('umb-property-layout').filter({ hasText: 'Editor width' }).locator('#input');
this.createButtonLabelTxt = this.page.locator('umb-property-layout').filter({ hasText: 'Create button label' }).locator('#input');
this.gridColumnsTxt = this.page.locator('umb-property-layout').filter({ hasText: 'Grid columns' }).locator('#input');
this.showResizeOptionsBtn = this.page.getByLabel('Show resize options');
this.columnSpanOptions = this.page.locator('[alias="columnSpanOptions"]');
this.areasTabBtn = this.page.getByRole('tab', { name: 'Areas' });
this.availableRowSpansLowValueTxt = this.page.locator('[label="Available row spans"]').getByLabel('Low value');
this.availableRowSpansHighValueTxt = this.page.locator('[label="Available row spans"]').getByLabel('High value');
this.areaGridColumnsTxt = this.page.locator('[alias="areaGridColumns"]').locator('#input');
this.addAreaBtn = this.page.getByLabel('Add area');
this.blockAreaConfig = this.page.locator('umb-block-area-config-entry');
this.aliasAliasTxt = this.page.locator('[alias="alias"]').locator('#input');
this.blockGridAreaWorkspaceSubmitBtn = this.page.locator('umb-block-grid-area-type-workspace-editor').getByLabel('Submit');
this.createLabelTxt = this.page.locator('[alias="createLabel"]').locator('#input');
this.minAllowedTxt = this.page.locator('#container').getByLabel('Low value');
this.maxAllowedTxt = this.page.locator('#container').getByLabel('High value');
this.addSpecifiedAllowanceBtn = this.page.locator('[alias="specifiedAllowance"]').getByLabel('Add');
this.advancedTabBtn = this.page.getByRole('tab', { name: 'Advanced' });
this.allowBlockAtRootToggle = this.page.getByTestId('property:allowAtRoot').locator('#toggle');
this.allowInAreasToggle = this.page.getByTestId('property:allowInAreas').locator('#toggle');
this.expandChildItemsForMediaBtn = this.page.getByLabel('Expand child items for media', { exact: true });
this.chooseCustomStylesheetBtn = this.page.locator('[label="Custom stylesheet"]').getByLabel('Choose');
// Tiptap
this.tiptapToolbarConfiguration = this.page.locator('umb-property-editor-ui-tiptap-toolbar-configuration');
this.addGroupToolbarBtn = this.tiptapToolbarConfiguration.locator('uui-button').filter({ hasText: 'Add group' });
this.addRowToolbarBtn = this.tiptapToolbarConfiguration.locator('uui-button').filter({ hasText: 'Add row' });
this.tiptapExtensionsConfiguration = this.page.locator('umb-property-editor-ui-tiptap-extensions-configuration');
this.propertyEditor = this.page.locator('umb-ref-property-editor-ui');
this.selectIconBtn = page.getByLabel('Select icon');
this.dataTypeBtn = this.createOptionActionListModal.locator('[name="New Data Type"]');
this.dataTypesMenu = page.locator('#menu-item').getByRole('link', { name: 'Data Types' });
this.tiptapStatusbarConfiguration = this.page.locator('umb-property-editor-ui-tiptap-statusbar-configuration');
// Settings
this.propertyEditorConfig = page.locator('umb-property-editor-config');
this.propertyEditorConfigItems = this.propertyEditorConfig.locator('umb-property');
this.blockThumbnailImage = page.locator('uui-card-block-type').locator('img');
this.dataTypeTreeRoot = page.locator('[alias="Umb.TreeItem.DataType"]').locator('uui-menu-item[label="Data Types"]');
}
async clickActionsMenuForDataType(name) {
await this.clickActionsMenuForName(name);
}
async clickActionsMenuAtRoot() {
await this.clickActionsMenuForDataType('Data Types');
}
async clickRootFolderCaretButton() {
await this.openCaretButtonForName('Data Types');
}
async createDataTypeFolder(folderName) {
await this.clickCreateActionMenuOption();
await this.clickFolderButton();
await this.enterFolderName(folderName);
await this.clickConfirmCreateFolderButton();
}
async goToDataType(dataTypeName) {
await this.clickRootFolderCaretButton();
await (0, test_1.expect)(this.sectionSidebar.getByLabel(dataTypeName, { exact: true })).toBeVisible();
await this.sectionSidebar.getByLabel(dataTypeName, { exact: true }).click();
}
async clickMoveToButton() {
await (0, test_1.expect)(this.moveToBtn).toBeVisible();
await this.moveToBtn.click();
}
async clickDuplicateToButton() {
await (0, test_1.expect)(this.duplicateToBtn).toBeVisible();
await this.duplicateToBtn.click();
}
async waitForDataTypeToBeCreated() {
await this.waitForNetworkToBeIdle();
}
async isDataTypeTreeItemVisible(name, isVisible = true) {
{
const hasShowChildren = await this.dataTypeTreeRoot.getAttribute('show-children') !== null;
if (!hasShowChildren) {
await this.dataTypeTreeRoot.locator(this.caretBtn).first().click();
}
await this.isTreeItemVisible(name, isVisible);
}
}
async waitForDataTypeToBeDeleted() {
await this.waitForNetworkToBeIdle();
}
async waitForDataTypeToBeRenamed() {
await this.waitForNetworkToBeIdle();
}
async clickNewDataTypeButton() {
await (0, test_1.expect)(this.newDataTypeBtn).toBeVisible();
await this.newDataTypeBtn.click();
}
async clickNewDataTypeFolderButton() {
await (0, test_1.expect)(this.newFolderBtn).toBeVisible();
await this.newFolderBtn.click();
}
async enterDataTypeName(name) {
await (0, test_1.expect)(this.dataTypeNameTxt).toBeVisible();
await this.dataTypeNameTxt.click();
await this.dataTypeNameTxt.clear();
await this.dataTypeNameTxt.fill(name);
}
async clickCreateFolderButton() {
await (0, test_1.expect)(this.createFolderBtn).toBeVisible();
await this.createDataTypeFolderBtn.click();
await this.page.waitForTimeout(500); // Wait for the action to complete
}
async clickUpdateFolderButton() {
await (0, test_1.expect)(this.updateDataTypeFolderBtn).toBeVisible();
await this.updateDataTypeFolderBtn.click();
}
async deleteDataType(name) {
await this.clickActionsMenuForDataType(name);
await this.clickDeleteAndConfirmButton();
}
async deleteDataTypeFolder(folderName) {
await this.clickActionsMenuForDataType(folderName);
await this.deleteFolder();
}
async moveDataTypeToFolder(folderName) {
await this.clickMoveToActionMenuOption();
await (0, test_1.expect)(this.sidebarModal.getByText(folderName, { exact: true })).toBeVisible();
await this.sidebarModal.getByText(folderName, { exact: true }).click();
await this.chooseModalBtn.click();
}
async duplicateDataTypeToFolder(folderName) {
await this.clickDuplicateToActionMenuOption();
await (0, test_1.expect)(this.sidebarModal.getByText(folderName, { exact: true })).toBeVisible();
await this.sidebarModal.getByText(folderName, { exact: true }).click();
await this.duplicateBtn.click();
}
async addMediaStartNode(mediaName) {
await (0, test_1.expect)(this.mediaCardItems.filter({ hasText: mediaName })).toBeVisible();
await this.mediaCardItems.filter({ hasText: mediaName }).click();
await this.clickChooseModalButton();
}
async addContentStartNode(contentName) {
await this.clickTextButtonWithName(contentName);
await this.chooseModalBtn.click();
}
async clickSelectAPropertyEditorButton() {
await this.selectAPropertyEditorBtn.click();
}
async selectAPropertyEditor(propertyName, filterKeyword) {
await this.typeToFilterTxt.fill(filterKeyword ? filterKeyword : propertyName);
await this.clickTextButtonWithName(propertyName);
}
// Approved Color
async clickIncludeLabelsToggle() {
await this.includeLabelsToggle.click();
}
async removeColorByValue(value) {
await this.page.locator('[value="' + value + '"] uui-button svg').click();
await this.confirmToDeleteBtn.click();
}
async addColor(value) {
await this.addColorBtn.click();
await this.colorValueTxt.clear();
await this.colorValueTxt.fill(value);
}
// Label
async changeValueType(valueType) {
await this.page.getByLabel('Select a value type').selectOption({ label: valueType });
}
// Date Picker
async clickOffsetTimeToggle() {
await this.offsetTimeToggle.click();
}
async enterDateFormatValue(value) {
await this.dateFormatTxt.clear();
await this.dateFormatTxt.fill(value);
}
// List View
async enterPageSizeValue(value) {
await this.pageSizeTxt.clear();
await this.pageSizeTxt.fill(value);
}
async chooseOrderDirection(isAscending) {
if (isAscending) {
await this.ascendingRadioBtn.click();
}
else {
await this.descendingRadioBtn.click();
}
}
async addColumnDisplayed(contentType, contentName, propertyAlias) {
await this.chooseColumnsDisplayedBtn.click();
await this.clickTextButtonWithName(contentType);
await this.clickTextButtonWithName(contentName);
await this.clickChooseContainerButton();
await this.clickTextButtonWithName(propertyAlias);
}
async removeColumnDisplayed(propertyAlias) {
await this.columnsDisplayedItems.filter({ has: this.page.getByText(propertyAlias, { exact: true }) }).getByText('Remove').click();
}
async addLayouts(layoutName) {
await (0, test_1.expect)(this.chooseLayoutsBtn).toBeVisible();
await this.chooseLayoutsBtn.click();
await (0, test_1.expect)(this.page.locator('[name="' + layoutName + '"]')).toBeVisible();
await this.page.locator('[name="' + layoutName + '"]').click();
}
async removeLayouts(layoutAlias) {
await this.layoutsItems.filter({ has: this.page.getByText(layoutAlias, { exact: true }) }).getByText('Remove').click();
}
async chooseOrderByValue(value) {
await this.orderByDropDownBox.selectOption({ label: value });
}
async enterWorkspaceViewName(name) {
await this.workspaceViewName.clear();
await this.workspaceViewName.fill(name);
}
async clickShowContentWorkspaceViewFirstToggle() {
await this.showWorkspaceViewFirstToggle.click();
}
async clickEditInInfiniteEditorToggle() {
await this.editInInfiniteEditorToggle.click();
}
async clickBulkActionPermissionsToggleByValue(value) {
await this.page.locator("uui-toggle[label='" + value + "'] #toggle").click();
}
async clickSelectIconButton() {
await (0, test_1.expect)(this.selectIconBtn).toBeVisible();
// Force click is needed
await this.selectIconBtn.click({ force: true });
}
async chooseWorkspaceViewIconByValue(value) {
await this.page.locator('[label="' + value + '"] svg').click();
await this.submitBtn.click();
}
// Image Cropper
async enterCropValues(label, alias, width, height) {
await (0, test_1.expect)(this.labelTxt).toBeVisible();
await this.labelTxt.clear();
await this.labelTxt.fill(label);
await (0, test_1.expect)(this.aliasTxt).toBeVisible();
await this.aliasTxt.clear();
await this.aliasTxt.fill(alias);
await (0, test_1.expect)(this.widthTxt).toBeVisible();
await this.widthTxt.clear();
await this.widthTxt.fill(width);
await this.heightTxt.clear();
await this.heightTxt.fill(height);
}
async clickCreateCropButton() {
await (0, test_1.expect)(this.createCropBtn).toBeVisible();
await this.createCropBtn.click();
}
async clickEditCropButton() {
await (0, test_1.expect)(this.editCropBtn).toBeVisible();
await this.editCropBtn.click();
}
async editCropByAlias(alias) {
await (0, test_1.expect)(this.page.locator('.crop').filter({ has: this.page.getByText(alias) }).getByText('Edit')).toBeVisible();
await this.page.locator('.crop').filter({ has: this.page.getByText(alias) }).getByText('Edit').click();
}
async removeCropByAlias(alias) {
await (0, test_1.expect)(this.page.locator('.crop').filter({ has: this.page.getByText(alias) }).getByText('Remove')).toBeVisible();
await this.page.locator('.crop').filter({ has: this.page.getByText(alias) }).getByText('Remove').click();
}
// Numeric
async enterMinimumValue(value) {
await (0, test_1.expect)(this.minimumTxt).toBeVisible();
await this.minimumTxt.clear();
await this.minimumTxt.fill(value);
}
async enterMaximumValue(value) {
await (0, test_1.expect)(this.maximumTxt).toBeVisible();
await this.maximumTxt.clear();
await this.maximumTxt.fill(value);
}
async enterStepSizeValue(value) {
await (0, test_1.expect)(this.stepSizeTxt).toBeVisible();
await this.stepSizeTxt.clear();
await this.stepSizeTxt.fill(value);
}
async clickAllowDecimalsToggle() {
await (0, test_1.expect)(this.allowDecimalsToggle).toBeVisible();
await this.allowDecimalsToggle.click();
}
// Radiobox
async removeOptionByName(name) {
await (0, test_1.expect)(this.page.locator("uui-button[label='Remove " + name + "'] svg")).toBeVisible();
await this.page.locator("uui-button[label='Remove " + name + "'] svg").click();
await this.confirmToDeleteBtn.click();
}
async enterOptionName(name) {
await (0, test_1.expect)(this.optionTxt.last()).toBeVisible();
await this.optionTxt.last().clear();
await this.optionTxt.last().fill(name);
}
async clickAddOptionButton() {
await (0, test_1.expect)(this.addOptionBtn).toBeVisible();
await this.addOptionBtn.click();
}
// Textarea - Textstring
async enterMaximumAllowedCharactersValue(value) {
await (0, test_1.expect)(this.maximumAllowedCharsTxt).toBeVisible();
await this.maximumAllowedCharsTxt.clear();
await this.maximumAllowedCharsTxt.fill(value);
}
async enterNumberOfRowsValue(value) {
await (0, test_1.expect)(this.numberOfRowsTxt).toBeVisible();
await this.numberOfRowsTxt.clear();
await this.numberOfRowsTxt.fill(value);
}
async enterMaxHeightValue(value) {
await (0, test_1.expect)(this.maxHeightTxt).toBeVisible();
await this.maxHeightTxt.clear();
await this.maxHeightTxt.fill(value);
}
async enterMinHeightValue(value) {
await this.minHeightTxt.clear();
await this.minHeightTxt.fill(value);
}
// Upload
async enterAcceptedFileExtensions(value) {
await this.acceptedFileExtensionsTxt.last().clear();
await this.acceptedFileExtensionsTxt.last().fill(value);
}
async removeAcceptedFileExtensionsByValue(value) {
await this.page.locator("uui-button[label='Remove " + value + "'] svg").click();
await this.confirmToDeleteBtn.click();
}
async clickAddAcceptedFileExtensionsButton() {
await this.addAcceptedFileExtensionsBtn.click();
}
// Multi URL Picker
async enterMinimumNumberOfItemsValue(value) {
await this.minimumNumberOfItemsTxt.clear();
await this.minimumNumberOfItemsTxt.fill(value);
}
async enterMaximumNumberOfItemsValue(value) {
await this.maximumNumberOfItemsTxt.clear();
await this.maximumNumberOfItemsTxt.fill(value);
}
async clickIgnoreUserStartNodesToggle() {
await this.ignoreUserStartNodesToggle.click();
}
async chooseOverlaySizeByValue(value) {
await this.overlaySizeDropDownBox.selectOption({ value: value });
}
async clickHideAnchorQueryStringInputToggle() {
await this.hideAnchorQueryStringInputToggle.click();
}
// Media Picker
async clickPickMultipleItemsToggle() {
await this.pickMultipleItemsToggle.click();
}
async clickEnableFocalPointToggle() {
await (0, test_1.expect)(this.enableFocalPointToggle).toBeVisible();
await this.enableFocalPointToggle.click();
}
async enterAmountValue(lowValue, highValue) {
await this.amountLowValueTxt.clear();
await this.amountLowValueTxt.fill(lowValue);
await this.amountHighValueTxt.clear();
await this.amountHighValueTxt.fill(highValue);
}
async addAcceptedType(mediaTypeName) {
await this.chooseAcceptedTypesBtn.click();
await this.clickTextButtonWithName(mediaTypeName);
await this.chooseModalBtn.click();
}
async removeAcceptedType(mediaTypeName) {
await this.page.locator('uui-ref-node-document-type[name="' + mediaTypeName + '"]').getByLabel('Remove').click();
await this.confirmToRemoveBtn.click();
}
async removeMediaStartNode(mediaName) {
await this.page.locator('uui-card-media[name="' + mediaName + '"]').locator('[label="Remove"]').click();
await this.confirmToRemoveBtn.click();
}
async clickChooseStartNodeButton() {
await this.chooseStartNodeBtn.click();
}
// Richtext Editor
async clickToolbarOptionByValue(values) {
for (var index in values) {
await this.toolbarCheckboxes.filter({ has: this.page.getByLabel(values[index]) }).locator('#ticker svg').click();
}
}
async addStylesheet(stylesheetName) {
await this.addStylesheetBtn.click();
await this.page.getByLabel(stylesheetName).click();
await this.chooseModalBtn.click();
}
async enterDimensionsValue(width, height) {
await this.dimensionsWidthTxt.clear();
await this.dimensionsWidthTxt.fill(width);
await this.dimensionsHeightTxt.clear();
await this.dimensionsHeightTxt.fill(height);
}
async enterMaximumSizeForImages(value) {
await this.maxImageSizeTxt.clear();
await this.maxImageSizeTxt.fill(value);
}
async clickHideLabelToggle() {
await this.hideLabelToggle.click();
}
async clickInlineRadioButton() {
await this.inlineRadioBtn.click();
}
async clickChooseWithPlusButton() {
await this.chooseWithPlusBtn.click();
}
async addImageUploadFolder(mediaFolderName) {
await this.clickChooseWithPlusButton();
await this.selectMediaWithName(mediaFolderName);
await this.clickChooseModalButton();
}
async clickAddWithPlusButton() {
await (0, test_1.expect)(this.addWithPlusBtn).toBeVisible();
await this.addWithPlusBtn.click();
}
async addAvailableBlocks(blockName) {
await this.clickAddWithPlusButton();
await this.clickTextButtonWithName(blockName);
await this.clickChooseModalButton();
await this.clickSubmitButton();
}
// Tags
async enterDefineTagGroupValue(value) {
await (0, test_1.expect)(this.defineTagGroupTxt).toBeVisible();
await this.defineTagGroupTxt.clear();
await this.defineTagGroupTxt.fill(value);
}
async selectStorageTypeOption(option) {
await (0, test_1.expect)(this.storageTypeDropDownBox).toBeVisible();
await this.storageTypeDropDownBox.selectOption({ label: option });
}
// Content Picker
async clickShowOpenButtonToggle() {
await (0, test_1.expect)(this.showOpenButtonToggle).toBeVisible();
await this.showOpenButtonToggle.click();
}
async removeContentStartNode(contentName) {
const startNodeLocator = this.page.locator('umb-entity-item-ref').filter({ has: this.page.locator('[name="' + contentName + '"]') });
await startNodeLocator.hover();
await startNodeLocator.getByLabel('Remove').click();
await this.clickConfirmRemoveButton();
}
// Dropdown
async clickEnableMultipleChoiceToggle() {
await (0, test_1.expect)(this.enableMultipleChoiceToggle).toBeVisible();
await this.enableMultipleChoiceToggle.click();
}
async clickAddOptionsButton() {
await (0, test_1.expect)(this.addOptionsBtn).toBeVisible();
await this.addOptionsBtn.click();
}
// True/false
async clickPresetValueToggle() {
await (0, test_1.expect)(this.presetValueToggle).toBeVisible();
await this.presetValueToggle.click();
}
async clickShowToggleLabelsToggle() {
await (0, test_1.expect)(this.showToggleLabelsToggle).toBeVisible();
await this.showToggleLabelsToggle.click();
}
async enterLabelOnValue(value) {
await (0, test_1.expect)(this.labelOnTxt).toBeVisible();
await this.labelOnTxt.clear();
await this.labelOnTxt.fill(value);
}
async enterLabelOffValue(value) {
await (0, test_1.expect)(this.labelOffTxt).toBeVisible();
await this.labelOffTxt.clear();
await this.labelOffTxt.fill(value);
}
// Block List Editor
async clickAddBlockButton(index = 0) {
await (0, test_1.expect)(this.addBlockBtn.nth(index)).toBeVisible();
await this.addBlockBtn.nth(index).click();
}
async clickRemoveBlockWithName(name) {
const blockWithNameLocator = this.page.locator('umb-block-type-card', { hasText: name });
await (0, test_1.expect)(blockWithNameLocator).toBeVisible();
// The force click is necessary.
await blockWithNameLocator.getByLabel('Remove block').click({ force: true });
}
async enterMinAmount(value) {
await (0, test_1.expect)(this.minAmountTxt).toBeVisible();
await this.minAmountTxt.clear();
await this.minAmountTxt.fill(value);
}
async enterMaxAmount(value) {
await (0, test_1.expect)(this.maxAmountTxt).toBeVisible();
await this.maxAmountTxt.clear();
await this.maxAmountTxt.fill(value);
}
async doesAmountContainErrorMessageWithText(errorMessage) {
return await (0, test_1.expect)(this.page.getByText(errorMessage)).toBeVisible();
}
async clickSingleBlockMode() {
await (0, test_1.expect)(this.singleBlockModeBtn).toBeVisible();
await this.singleBlockModeBtn.click();
}
async clickLiveEditingMode() {
await (0, test_1.expect)(this.liveEditingModeBtn).toBeVisible();
await this.liveEditingModeBtn.click();
}
async clickInlineEditingMode() {
await (0, test_1.expect)(this.inlineEditingModeBtn).toBeVisible();
await this.inlineEditingModeBtn.click();
}
async enterPropertyEditorWidth(width) {
await (0, test_1.expect)(this.propertyEditorWidthTxt).toBeVisible();
await this.propertyEditorWidthTxt.clear();
await this.propertyEditorWidthTxt.fill(width);
}
async goToBlockWithName(name) {
await (0, test_1.expect)(this.page.getByRole('link', { name: name })).toBeVisible();
await this.page.getByRole('link', { name: name }).click();
}
async enterBlockLabelText(label) {
await this.removeBlockLabelText();
await this.labelTextTxt.fill(label);
}
async removeBlockLabelText() {
await (0, test_1.expect)(this.labelTextTxt).toBeVisible();
await this.labelTextTxt.clear();
}
async clickAllowInRootForBlock() {
await (0, test_1.expect)(this.allowBlockAtRootToggle).toBeVisible();
await this.allowBlockAtRootToggle.click();
}
async clickAllowInAreasForBlock() {
await (0, test_1.expect)(this.allowInAreasToggle).toBeVisible();
await this.allowInAreasToggle.click();
}
async updateBlockOverlaySize(size) {
await (0, test_1.expect)(this.overlaySizeOption).toBeVisible();
await this.overlaySizeOption.selectOption(size);
}
async addBlockContentModel(elementName) {
await (0, test_1.expect)(this.chooseContentModelBtn).toBeVisible();
await this.chooseContentModelBtn.click();
await this.clickButtonWithName(elementName);
await this.clickChooseButton();
}
async addBlockSettingsModel(elementName) {
await (0, test_1.expect)(this.chooseSettingsModelBtn).toBeVisible();
await this.chooseSettingsModelBtn.click();
await this.clickButtonWithName(elementName);
await this.clickChooseModalButton();
}
async removeBlockContentModel() {
await (0, test_1.expect)(this.contentModelNode).toBeVisible();
await this.contentModelNode.hover();
await (0, test_1.expect)(this.removeExactContentModelNodeBtn).toBeVisible();
await this.removeExactContentModelNodeBtn.click();
}
async removeBlockSettingsModel() {
await (0, test_1.expect)(this.settingsModelNode).toBeVisible();
await this.settingsModelNode.hover();
await (0, test_1.expect)(this.removeExactSettingsModelNodeBtn).toBeVisible();
await this.removeExactSettingsModelNodeBtn.click();
}
async openBlockContentModel() {
await (0, test_1.expect)(this.contentModelNode).toBeVisible();
await this.contentModelNode.hover();
await (0, test_1.expect)(this.openBtn).toBeVisible();
await this.openBtn.click();
}
async openBlockSettingsModel() {
await (0, test_1.expect)(this.settingsModelNode).toBeVisible();
await this.settingsModelNode.hover();
await (0, test_1.expect)(this.openBtn).toBeVisible();
await this.openBtn.click();
}
async isElementWorkspaceOpenInBlock(elementTypeName) {
return await (0, test_1.expect)(this.documentTypeWorkspace.filter({ hasText: elementTypeName })).toBeVisible();
}
async selectBlockBackgroundColor(color) {
await (0, test_1.expect)(this.backgroundColorBtn).toBeVisible();
await this.backgroundColorBtn.click();
await this.backgroundColorTxt.clear();
await this.backgroundColorTxt.fill(color);
}
async selectBlockIconColor(color) {
await (0, test_1.expect)(this.iconColorBtn).toBeVisible();
await this.iconColorBtn.click();
await this.iconColorTxt.clear();
await this.iconColorTxt.fill(color);
}
async clickExpandChildItemsForMediaButton() {
await (0, test_1.expect)(this.expandChildItemsForMediaBtn).toBeVisible();
await this.expandChildItemsForMediaBtn.click();
}
async clickRemoveCustomStylesheetWithName(name) {
await (0, test_1.expect)(this.customStylesheetLabel.locator('[name="' + name + '"]')).toBeVisible();
await this.customStylesheetLabel.locator('[name="' + name + '"]').click();
await (0, test_1.expect)(this.stylesheetRemoveBtn).toBeVisible();
await this.stylesheetRemoveBtn.click();
await this.clickConfirmRemoveButton();
}
async clickBlockGridHideContentEditorButton() {
await (0, test_1.expect)(this.hideContentEditorBlockGridBtn).toBeVisible();
await this.hideContentEditorBlockGridBtn.click();
}
async chooseBlockCustomStylesheetWithName(name) {
await (0, test_1.expect)(this.chooseCustomStylesheetBtn).toBeVisible();
await this.chooseCustomStylesheetBtn.click();
await this.openCaretButtonForName('wwwroot');
await this.openCaretButtonForName('css');
await this.clickLabelWithName(name, true);
await this.clickChooseModalButton();
}
async chooseBlockThumbnailWithPath(mediaPath) {
const mediaItems = mediaPath.split('/media/')[1].split('/');
await (0, test_1.expect)(this.chooseThumbnailAlias).toBeVisible();
await this.chooseThumbnailAlias.click();
await this.openCaretButtonForName('wwwroot');
await this.clickExpandChildItemsForMediaButton();
for (let i = 0; i < mediaItems.length; i++) {
if (i === mediaItems.length - 1) {
await this.clickLabelWithName(mediaItems[i], true);
}
else {
await this.page.locator('uui-menu-item[label="' + mediaItems[i] + '"] #caret-button').click();
}
}
await this.clickChooseModalButton();
}
async clickBlockListHideContentEditorButton() {
await (0, test_1.expect)(this.hideContentEditorBlockListBtn).toBeVisible();
await this.hideContentEditorBlockListBtn.click();
}
async enterEditorWidth(value) {
await (0, test_1.expect)(this.editorWidthTxt).toBeVisible();
await this.editorWidthTxt.clear();
await this.editorWidthTxt.fill(value);
}
async enterCreateButtonLabel(value) {
await (0, test_1.expect)(this.createButtonLabelTxt).toBeVisible();
await this.createButtonLabelTxt.clear();
await this.createButtonLabelTxt.fill(value);
}
async enterGridColumns(value) {
await (0, test_1.expect)(this.gridColumnsTxt).toBeVisible();
await this.gridColumnsTxt.clear();
if (value === undefined) {
return;
}
await this.gridColumnsTxt.fill(value.toString());
}
async clickShowResizeOptions() {
await (0, test_1.expect)(this.showResizeOptionsBtn).toBeVisible();
await this.showResizeOptionsBtn.click();
}
async clickAvailableColumnSpans(columnSpans) {
for (let index in columnSpans) {
await (0, test_1.expect)(this.columnSpanOptions.getByLabel(columnSpans[index].toString(), { exact: true })).toBeVisible();
await this.columnSpanOptions.getByLabel(columnSpans[index].toString(), { exact: true }).click();
}
}
async goToBlockAreasTab() {
await (0, test_1.expect)(this.areasTabBtn).toBeVisible();
await this.areasTabBtn.click();
}
async enterMinRowSpan(value) {
await (0, test_1.expect)(this.availableRowSpansLowValueTxt).toBeVisible();
await this.availableRowSpansLowValueTxt.clear();
if (value === undefined) {
return;
}
await this.availableRowSpansLowValueTxt.fill(value.toString());
}
async enterMaxRowSpan(value) {
await (0, test_1.expect)(this.availableRowSpansHighValueTxt).toBeVisible();
await this.availableRowSpansHighValueTxt.clear();
if (value === undefined) {
return;
}
await this.availableRowSpansHighValueTxt.fill(value.toString());
}
async enterGridColumnsForArea(value) {
await (0, test_1.expect)(this.areaGridColumnsTxt).toBeVisible();
await this.areaGridColumnsTxt.clear();
if (value === undefined) {
return;
}
await this.areaGridColumnsTxt.fill(value.toString());
}
async addAreaButton() {
await (0, test_1.expect)(this.addAreaBtn).toBeVisible();
await this.addAreaBtn.click();
}
async goToAreaByAlias(alias) {
const editAreaWithAliasLocator = this.blockAreaConfig.filter({ hasText: alias }).getByLabel('edit');
await (0, test_1.expect)(editAreaWithAliasLocator).toBeVisible();
await editAreaWithAliasLocator.click({ force: true });
}
async clickRemoveAreaByAlias(alias) {
const removeAreaWithAliasLocator = this.blockAreaConfig.filter({ hasText: alias }).getByLabel('delete');
await (0, test_1.expect)(removeAreaWithAliasLocator).toBeVisible();
await removeAreaWithAliasLocator.click({ force: true });
await this.clickConfirmToDeleteButton();
}
async enterAreaAlias(alias) {
await (0, test_1.expect)(this.aliasAliasTxt).toBeVisible();
await this.aliasAliasTxt.clear();
await this.aliasAliasTxt.fill(alias);
}
async clickAreaSubmitButton() {
await (0, test_1.expect)(this.blockGridAreaWorkspaceSubmitBtn).toBeVisible();
await this.blockGridAreaWorkspaceSubmitBtn.click();
await this.page.waitForTimeout(500);
}
async enterCreateButtonLabelInArea(value) {
await (0, test_1.expect)(this.createLabelTxt.nth(1)).toBeVisible();
await this.createLabelTxt.nth(1).clear();
if (value === undefined) {
return;
}
await this.createLabelTxt.nth(1).fill(value);
}
async enterMinAllowedInArea(value) {
await (0, test_1.expect)(this.minAllowedTxt).toBeVisible();
await this.minAllowedTxt.clear();
if (value === undefined) {
return;
}
await this.minAllowedTxt.fill(value.toString());
}
async enterMaxAllowedInArea(value) {
await (0, test_1.expect)(this.maxAllowedTxt).toBeVisible();
await this.maxAllowedTxt.clear();
if (value === undefined) {
return;
}
await this.maxAllowedTxt.fill(value.toString());
}
async clickAddSpecifiedAllowanceButton() {
await (0, test_1.expect)(this.addSpecifiedAllowanceBtn).toBeVisible();
await this.addSpecifiedAllowanceBtn.click();
}
async goToBlockAdvancedTab() {
await (0, test_1.expect)(this.advancedTabBtn).toBeVisible();
await this.advancedTabBtn.click();
}
async getLinkWithName(name) {
await (0, test_1.expect)(this.page.getByRole('link', { name: name })).toBeVisible();
return this.page.getByRole('link', { name: name });
}
async getAddButtonInGroupWithName(name) {
await (0, test_1.expect)(this.page.locator('.group').filter({ hasText: name }).locator('#add-button')).toBeVisible();
return this.page.locator('.group').filter({ hasText: name }).locator('#add-button');
}
async clickRemoveStylesheetButton(stylesheetName) {
await (0, test_1.expect)(this.page.locator('[name="' + stylesheetName + '"]').getByLabel('Remove')).toBeVisible();
await this.page.locator('[name="' + stylesheetName + '"]').getByLabel('Remove').click();
}
// TipTap
async deleteToolbarGroup(groupIndex, rowIndex = 0) {
const groupButton = this.tiptapToolbarConfiguration.locator('.row').nth(rowIndex).locator('.group').nth(groupIndex);
await (0, test_1.expect)(groupButton).toBeVisible();
await groupButton.hover();
const actionsInGroup = groupButton.locator('.items').locator('uui-button');
const actionsCount = await actionsInGroup.count();
for (let i = 0; i < actionsCount; i++) {
await actionsInGroup.first().click();
}
await groupButton.locator('[label="Remove group"]').click();
}
async deleteToolbarRow(rowIndex) {
const rowButton = this.tiptapToolbarConfiguration.locator('.row').nth(rowIndex);
await (0, test_1.expect)(rowButton).toBeVisible();
await rowButton.hover();
await rowButton.locator('[label="Remove row"]').click();
}
async clickAddRowToolbarButton() {
await (0, test_1.expect)(this.addRowToolbarBtn).toBeVisible();
await this.addRowToolbarBtn.click();
}
async clickAddGroupToolbarButton() {
await (0, test_1.expect)(this.addGroupToolbarBtn).toBeVisible();
await this.addGroupToolbarBtn.click();
}
async clickExtensionItemWithName(name) {
await (0, test_1.expect)(this.tiptapExtensionsConfiguration.locator('uui-checkbox[label="' + name + '"]')).toBeVisible();
await this.tiptapExtensionsConfiguration.locator('uui-checkbox[label="' + name + '"]').click();
}
async doesPropertyEditorHaveUiAlias(uiAlias) {
await (0, test_1.expect)(this.propertyEditor).toHaveAttribute('alias', uiAlias);
}
async doesPropertyEditorHaveName(name) {
await (0, test_1.expect)(this.propertyEditor).toHaveAttribute('name', name);
}
async doesPropertyEditorHaveAlias(alias) {
await (0, test_1.expect)(this.propertyEditor).toHaveAttribute('property-editor-schema-alias', alias);
}
async clickDataTypeButton() {
await (0, test_1.expect)(this.dataTypeBtn).toBeVisible();
await this.dataTypeBtn.click();
}
async clickDataTypesMenu() {
await (0, test_1.expect)(this.dataTypesMenu).toBeVisible();
await this.dataTypesMenu.click();
}
async doesSettingHaveValue(settings) {
for (let index = 0; index < Object.keys(settings).length; index++) {
const [label, description] = settings[index];
await (0, test_1.expect)(this.propertyEditorConfigItems.nth(index).