V16 Cherrypick changes from 17

lib/helpers/ConstantHelper.ts

@@ -35,8 +35,8 @@
   }
 
   public static readonly approvedColorSettings = {
-    0: ['Include labels?', 'Stores colors as a JSON object containing both the color hex string and label, rather than just the hex string.'],
-    1: ['Colors', 'Add, remove or sort colors'],
+    0: ['Include labels?', 'Displays colored field and a label for each color in the color picker, rather than just a colored field.'],
+    1: ['Colors', 'Add, remove or sort colors (and labels).'],
   }
 
   public static readonly checkboxListSettings = {

lib/helpers/ContentUiHelper.ts

@@ -8,7 +8,6 @@ export class ContentUiHelper extends UiBaseLocators {
   private readonly publishBtn: Locator;
   private readonly unpublishBtn: Locator;
   private readonly actionMenuForContentBtn: Locator;
-  private readonly openedModal: Locator;
   private readonly textstringTxt: Locator;
   private readonly infoTab: Locator;
   private readonly linkContent: Locator;
@@ -52,8 +51,6 @@ export class ContentUiHelper extends UiBaseLocators {
   private readonly documentTypeWorkspace: Locator;
   private readonly addMultipleTextStringBtn: Locator;
   private readonly multipleTextStringValueTxt: Locator;
-  private readonly markdownTxt: Locator;
-  private readonly codeEditorTxt: Locator;
   private readonly sliderInput: Locator;
   private readonly tabItems: Locator;
   private readonly documentWorkspace: Locator;
@@ -174,6 +171,7 @@ export class ContentUiHelper extends UiBaseLocators {
   private readonly memberPickerSearchTxt: Locator;
   private readonly refListBlock: Locator;
   private readonly propertyActionMenu: Locator;
+  private readonly documentCreateOptionsModal: Locator;
 
   constructor(page: Page) {
     super(page);
@@ -185,7 +183,6 @@ export class ContentUiHelper extends UiBaseLocators {
     this.publishBtn = page.getByLabel(/^Publish(…)?$/);
     this.unpublishBtn = page.getByLabel(/^Unpublish(…)?$/);
     this.actionMenuForContentBtn = page.locator('#header').getByTestId('open-dropdown');
-    this.openedModal = page.locator('uui-modal-container[backdrop]');
     this.textstringTxt = page.locator('umb-property-editor-ui-text-box #input');
     this.reloadChildrenThreeDotsBtn = page.getByRole('button', {name: 'Reload children…'});
     this.contentTree = page.locator('umb-tree[alias="Umb.Tree.Document"]');
@@ -212,8 +209,6 @@ export class ContentUiHelper extends UiBaseLocators {
     this.documentTypeWorkspace = this.sidebarModal.locator('umb-document-type-workspace-editor');
     this.addMultipleTextStringBtn = page.locator('umb-input-multiple-text-string').getByLabel('Add');
     this.multipleTextStringValueTxt = page.locator('umb-input-multiple-text-string').getByLabel('Value');
-    this.markdownTxt = page.locator('umb-input-markdown textarea');
-    this.codeEditorTxt = page.locator('umb-code-editor textarea');
     this.sliderInput = page.locator('umb-property-editor-ui-slider #input');
     this.tabItems = page.locator('uui-tab');
     this.documentWorkspace = page.locator('umb-document-workspace-editor');
@@ -235,6 +230,7 @@ export class ContentUiHelper extends UiBaseLocators {
     this.editDocumentTypeBtn = this.generalItem.filter({hasText: 'Document Type'}).locator('#button');
     this.addTemplateBtn = this.generalItem.filter({hasText: 'Template'}).locator('#button');
     this.id = this.generalItem.filter({hasText: 'Id'}).locator('span');
+    this.documentCreateOptionsModal = page.locator('umb-document-create-options-modal');
     // Culture and Hostname
     this.cultureAndHostnamesBtn = page.getByLabel(/^Culture and Hostnames(…)?$/);
     this.cultureLanguageDropdownBox = page.locator('[headline="Culture"]').getByLabel('combobox-input');
@@ -317,7 +313,7 @@ export class ContentUiHelper extends UiBaseLocators {
     this.tipTapPropertyEditor = page.locator('umb-property-editor-ui-tiptap');
     this.tipTapEditor = this.tipTapPropertyEditor.locator('#editor .tiptap');
     this.uploadedSvgThumbnail = page.locator('umb-input-upload-field-svg img');
-    this.insertBlockBtn = page.locator('[title="Insert Block"]');
+    this.insertBlockBtn = page.getByTestId('action:tiptap-toolbar:Umb.Tiptap.Toolbar.BlockPicker');
     this.blockWorkspace = page.locator('umb-block-workspace-editor');
     this.tiptapInput = page.locator('umb-input-tiptap');
     this.rteBlockInline = page.locator('umb-rte-block-inline');
@@ -827,14 +823,12 @@ export class ContentUiHelper extends UiBaseLocators {
 
   // Code Editor
   async enterCodeEditorValue(value: string) {
-    await this.codeEditorTxt.clear();
-    await this.codeEditorTxt.fill(value);
+    await this.enterMonacoEditorValue(value);
   }
 
   // Markdown Editor
   async enterMarkdownEditorValue(value: string) {
-    await this.markdownTxt.clear();
-    await this.markdownTxt.fill(value);
+    await this.enterMonacoEditorValue(value);
   }
 
   // Slider
@@ -847,7 +841,7 @@ export class ContentUiHelper extends UiBaseLocators {
   }
 
   async doesModalHaveText(text: string) {
-    return expect(this.sidebarModal).toContainText(text);
+    return expect(this.openedModal).toContainText(text);
   }
 
   // Collection tab
@@ -1746,4 +1740,17 @@ export class ContentUiHelper extends UiBaseLocators {
     await expect(actionLocator).toBeVisible();
     await actionLocator.click();
   }
+
+  async isContentWithNameVisibleInList(contentName: string, isVisible: boolean = true) {
+    await expect(this.documentTableColumnName.filter({hasText: contentName})).toBeVisible({visible: isVisible});
+  }
+
+  async selectDocumentBlueprintWithName(blueprintName: string) {
+    await expect(this.documentCreateOptionsModal.locator('uui-menu-item', {hasText: blueprintName})).toBeVisible();
+    await this.documentCreateOptionsModal.locator('uui-menu-item', {hasText: blueprintName}).click();
+  }
+
+  async doesDocumentModalHaveText(text: string) {
+    await expect(this.documentCreateOptionsModal).toContainText(text);
+  }
 }

lib/helpers/DocumentBlueprintUiHelper.ts

@@ -54,6 +54,10 @@ export class DocumentBlueprintUiHelper extends UiBaseLocators{
   async clickCreateDocumentBlueprintButton() {
     await this.createDocumentBlueprintBtn.click();
   }
+
+  async clickCreateNewDocumentBlueprintButton() {
+    await this.createNewDocumentBlueprintBtn.click();
+  }
 
   async enterDocumentBlueprintName(blueprintName: string) {
     await expect(this.documentBlueprintNameTxt).toBeVisible();

lib/helpers/LanguageUiHelper.ts

@@ -11,10 +11,12 @@ export class LanguageUiHelper extends UiBaseLocators {
   private readonly languageTable: Locator;
   private readonly deleteLanguageEntityAction: Locator;
   private readonly languageCreateBtn: Locator;
+  private readonly settingsSidebar: Locator;
 
   constructor(page: Page) {
     super(page);
-    this.languagesMenu = page.locator('umb-menu').getByLabel('Languages', {exact: true});
+    this.settingsSidebar = page.getByTestId('section-sidebar:Umb.SectionSidebarMenu.Settings');
+    this.languagesMenu = this.settingsSidebar.getByRole('link', {name: 'Languages'});
     this.languageDropdown = page.locator('umb-input-culture-select #expand-symbol-wrapper');
     this.defaultLanguageToggle = page.locator('uui-toggle').filter({hasText: /Default language/}).locator('#toggle');
     this.mandatoryLanguageToggle = page.locator('uui-toggle').filter({hasText: /Mandatory language/}).locator('#toggle');

lib/helpers/ScriptUiHelper.ts

@@ -9,9 +9,9 @@ export class ScriptUiHelper extends UiBaseLocators{
 
   constructor(page: Page) {
     super(page);
-    this.newJavascriptFileBtn = page.getByLabel('New Javascript file');
+    this.newJavascriptFileBtn = page.getByRole('link', {name: 'New Javascript file'});
     this.scriptTree = page.locator('umb-tree[alias="Umb.Tree.Script"]');
-    this.newFolderThreeDots = page.getByLabel('New Folder...');
+    this.newFolderThreeDots = page.getByRole('button', {name: 'New Folder...'});
   }
 
   async clickActionsMenuForScript(name: string) {
@@ -20,6 +20,7 @@ export class ScriptUiHelper extends UiBaseLocators{
 
   async createScriptFolder(folderName: string) {
     await this.clickCreateOptionsActionMenuOption();
+    await expect(this.newFolderThreeDots).toBeVisible();
     await this.newFolderThreeDots.click();
     await this.enterFolderName(folderName);
     await this.clickConfirmCreateFolderButton();
@@ -34,6 +35,7 @@ export class ScriptUiHelper extends UiBaseLocators{
   }
 
   async clickNewJavascriptFileButton() {
+    await expect(this.newJavascriptFileBtn).toBeVisible();
     await this.newJavascriptFileBtn.click();
   }
 

lib/helpers/UiBaseLocators.ts

@@ -149,6 +149,8 @@ export class UiBaseLocators {
   public readonly caretBtn: Locator;
   public readonly workspaceActionMenuBtn: Locator;
   public readonly monacoEditor: Locator;
+  public readonly createNewDocumentBlueprintBtn: Locator;
+  public readonly openedModal: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -194,7 +196,7 @@ export class UiBaseLocators {
     this.filterChooseBtn = page.locator('button').filter({hasText: 'Choose'});
     this.updateBtn = page.getByLabel('Update');
     this.changeBtn = page.getByLabel('Change');
-    this.propertyNameTxt = page.locator('#name-input #input');
+    this.propertyNameTxt = page.getByTestId('input:entity-name').locator('#input').first();
     this.selectPropertyEditorBtn = page.getByLabel('Select Property Editor');
     this.addGroupBtn = page.getByLabel('Add group', {exact: true});
     this.iAmDoneReorderingBtn = page.getByLabel('I am done reordering');
@@ -212,7 +214,7 @@ export class UiBaseLocators {
     this.addPropertyBtn = page.getByLabel('Add property', {exact: true});
     this.typeToFilterSearchTxt = page.locator('[type="search"] #input');
     this.editorSettingsBtn = page.getByLabel('Editor settings');
-    this.labelAboveBtn = page.locator('button').filter({hasText: 'Label above'});
+    this.labelAboveBtn = page.locator('.appearance-option').filter({hasText: 'Label above'});
     // tab: means that the tab is unnamed
     this.unnamedTabTxt = page.getByTestId('tab:').getByTestId('tab:name-input').locator('#input');
     this.deleteThreeDotsBtn = page.getByLabel('Delete…');
@@ -250,7 +252,7 @@ export class UiBaseLocators {
     this.backOfficeHeader = page.locator('umb-backoffice-header');
     this.failedStateButton = page.locator('uui-button[state="failed"]');
     this.mediaCardItems = page.locator('uui-card-media');
-    this.enterPropertyEditorDescriptionTxt = this.sidebarModal.getByLabel('Enter a description...');
+    this.enterPropertyEditorDescriptionTxt = this.sidebarModal.getByTestId('input:entity-description').locator('#textarea');
     this.breadcrumbsTemplateModal = this.sidebarModal.locator('umb-template-workspace-editor uui-breadcrumbs');
     this.documentTypeNode = page.locator('uui-ref-node-document-type');
     this.groupLabel = page.getByLabel('Group', {exact: true});
@@ -262,6 +264,7 @@ export class UiBaseLocators {
     this.listBtn = page.getByLabel('List');
     this.viewBundleBtn = page.locator('umb-collection-view-bundle uui-button svg');
     this.createDocumentBlueprintBtn = page.getByLabel(/^Create Document Blueprint(…)?$/);
+    this.createNewDocumentBlueprintBtn = page.getByRole('button', { name: 'New Document Blueprint for...' });
     this.chooseDocumentInputBtn = page.locator('umb-input-document').getByLabel('Choose');
     this.chooseMediaInputBtn = page.locator('umb-input-media').getByLabel('Choose');
     this.container = page.locator('#container');
@@ -289,8 +292,8 @@ export class UiBaseLocators {
     this.folderBtn = this.createOptionActionListModal.locator('[name="Folder"]');
     this.reloadChildrenBtn = page.getByRole('button', {name: 'Reload children'});
     this.confirmActionModalEntityReferences = page.locator('umb-confirm-action-modal-entity-references,umb-confirm-bulk-action-modal-entity-references');
-    this.referenceHeadline = this.confirmActionModalEntityReferences.locator('#reference-headline');
-    this.entityItemRef = this.confirmActionModalEntityReferences.locator('umb-entity-item-ref');
+    this.referenceHeadline = this.confirmActionModalEntityReferences.locator('#reference-headline').first();
+    this.entityItemRef = this.confirmActionModalEntityReferences.locator('uui-ref-list').first().getByTestId('entity-item-ref');
     this.validationMessage = page.locator('umb-form-validation-message').locator('#messages');
     this.successStateIcon = this.successState.locator('#state');
     this.workspaceAction = page.locator('umb-workspace-action');
@@ -301,6 +304,7 @@ export class UiBaseLocators {
     // Workspace Entity Action
     this.workspaceActionMenuBtn = page.getByTestId('workspace:action-menu-button');
     this.monacoEditor = page.locator('.monaco-editor');
+    this.openedModal = page.locator('uui-modal-container[backdrop]');
   }
 
   async clickActionsMenuForNameInSectionSidebar(name: string) {
@@ -1239,7 +1243,7 @@ export class UiBaseLocators {
   }
 
   async doesReferenceHeadlineHaveText(text: string) {
-    await expect(this.referenceHeadline).toHaveText(text);
+    await expect(this.referenceHeadline).toContainText(text);
   }
 
   async isReferenceHeadlineVisible(isVisible: boolean) {
@@ -1363,8 +1367,8 @@ export class UiBaseLocators {
   }
 
   async clickModalMenuItemWithName(name: string) {
-    await expect(this.sidebarModal.locator('uui-menu-item[label="' + name + '"]')).toBeVisible();
-    await this.sidebarModal.locator('uui-menu-item[label="' + name + '"]').click();
+    await expect(this.openedModal.locator('uui-menu-item[label="' + name + '"]')).toBeVisible();
+    await this.openedModal.locator('uui-menu-item[label="' + name + '"]').click();
   }
 
   async isModalMenuItemWithNameDisabled(name: string) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco/playwright-testhelpers",
-  "version": "16.0.55",
+  "version": "16.0.56",
   "description": "Test helpers for making playwright tests for Umbraco solutions",
   "main": "dist/lib/index.js",
   "files": [