V17 Removed test helper for new modal (#310)

* Updated test helper to avoid flaky tests

* Cherry pick the test helper for workspace view

* Added ui helper for dashboard tab

* Removed test helper for new modal

* Format code

* Bumped version

* Bumped version

* Removed unused locator

* Fixed comment

Author: nhudinh0309

lib/helpers/DataTypeUiHelper.ts

@@ -304,7 +304,7 @@ export class DataTypeUiHelper extends UiBaseLocators {
     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="Data Type"]');
+    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');
 

lib/helpers/DocumentTypeUiHelper.ts

@@ -16,22 +16,20 @@ export class DocumentTypeUiHelper extends UiBaseLocators {
   private readonly setAsDefaultBtn: Locator;
   private readonly tabGroup: Locator;
   private readonly documentTypesMenu: Locator;
-  private readonly createDocumentModal: Locator;
 
   constructor(page: Page) {
     super(page);
-    this.createDocumentModal = page.locator('umb-entity-create-option-action-list-modal');
     this.newDocumentTypeBtn = page.getByLabel('New Document Type…');
     this.sharedAcrossCulturesToggle = page.locator('label').filter({hasText: 'Shared across cultures'}).locator('#toggle');
     this.tabGroup = page.getByTestId('workspace:view-links');
     this.documentTypeSettingsTabBtn = this.tabGroup.locator('[data-mark*="Settings"]');
     this.documentTypeTemplatesTabBtn = this.tabGroup.locator('[data-mark*="Templates"]');
     this.varyBySegmentsBtn = page.getByText('Vary by segment', {exact: true});
     this.varyByCultureBtn = page.getByText('Vary by culture', {exact: true});
-    this.createDocumentTypeBtn = this.createDocumentModal.locator('umb-ref-item').getByText('Document Type', {exact: true});
-    this.createDocumentTypeWithTemplateBtn = this.createDocumentModal.locator('umb-ref-item', {hasText: 'Document Type with template'});
-    this.createElementTypeBtn = this.createDocumentModal.locator('umb-ref-item', {hasText: 'Element Type'});
-    this.createDocumentFolderBtn = this.createDocumentModal.locator('umb-ref-item', {hasText: 'Folder'});
+    this.createDocumentTypeBtn = page.locator('umb-ref-item').getByText('Document Type', {exact: true});
+    this.createDocumentTypeWithTemplateBtn = page.locator('umb-ref-item').getByText('Document Type with Template', {exact: true});
+    this.createElementTypeBtn = page.locator('umb-ref-item').getByText('Element Type', {exact: true});
+    this.createDocumentFolderBtn = page.locator('umb-ref-item').getByText('Folder', {exact: true});
     this.preventCleanupBtn = page.getByText('Prevent clean up');
     this.setAsDefaultBtn = page.getByText('Set as default');
     this.documentTypesMenu = page.locator('#menu-item').getByRole('link', {name: 'Document Types'});

lib/helpers/PartialViewUiHelper.ts

@@ -7,16 +7,14 @@ export class PartialViewUiHelper extends UiBaseLocators {
   private readonly partialViewTree: Locator;
   private readonly partialViewUiLoader: Locator;
   private readonly newFolderThreeDots: Locator;
-  private readonly partialViewCreateModal: Locator;
 
   constructor(page: Page) {
     super(page);
-    this.partialViewCreateModal = page.locator('umb-partial-view-create-options-modal');
-    this.newEmptyPartialViewBtn = this.partialViewCreateModal.locator('uui-menu-item', {hasText: 'Empty partial view'});
-    this.newPartialViewFromSnippetBtn = this.partialViewCreateModal.locator('uui-menu-item', {hasText: 'Partial view from snippet'});
+    this.newEmptyPartialViewBtn = page.getByLabel('New empty partial view');
+    this.newPartialViewFromSnippetBtn = page.getByLabel('New partial view from snippet...');
     this.partialViewTree = page.locator('umb-tree[alias="Umb.Tree.PartialView"]');
     this.partialViewUiLoader = page.locator('uui-loader');
-    this.newFolderThreeDots = this.partialViewCreateModal.locator('uui-menu-item', {hasText: 'Folder'});
+    this.newFolderThreeDots = page.getByLabel('New Folder...');
   }
 
   async clickActionsMenuForPartialView(name: string) {

lib/helpers/ScriptUiHelper.ts

@@ -6,14 +6,12 @@ export class ScriptUiHelper extends UiBaseLocators{
   private readonly newJavascriptFileBtn: Locator;
   private readonly scriptTree: Locator;
   private readonly newFolderThreeDots: Locator;
-  private readonly scriptCreateModal: Locator;
 
   constructor(page: Page) {
     super(page);
-    this.scriptCreateModal = page.locator('umb-script-create-options-modal');
-    this.newJavascriptFileBtn = this.scriptCreateModal.locator('umb-ref-item', {hasText: 'JavaScript file'});
-    this.newFolderThreeDots = this.scriptCreateModal.locator('umb-ref-item', {hasText: 'Folder'});
+    this.newJavascriptFileBtn = page.getByRole('link', {name: 'New Javascript file'});
     this.scriptTree = page.locator('umb-tree[alias="Umb.Tree.Script"]');
+    this.newFolderThreeDots = page.getByRole('button', {name: 'New Folder...'});
   }
 
   async clickActionsMenuForScript(name: string) {

lib/helpers/StylesheetUiHelper.ts

@@ -1,20 +1,16 @@
 import {Page, Locator, expect} from "@playwright/test"
 import {UiBaseLocators} from "./UiBaseLocators";
-import { ConstantHelper } from "./ConstantHelper";
+import {ConstantHelper} from "./ConstantHelper";
 
 export class StylesheetUiHelper extends UiBaseLocators{
   private readonly newStylesheetBtn: Locator;
-  private readonly newStylesheetFolderBtn: Locator;
   private readonly stylesheetNameTxt: Locator;
   private readonly stylesheetTree: Locator;
-  private readonly stylesheetCreateModal: Locator;
 
   constructor(page: Page) {
     super(page);
-    this.stylesheetCreateModal = page.locator('umb-entity-create-option-action-list-modal');
-    this.newStylesheetBtn = this.stylesheetCreateModal.locator('umb-ref-item', {hasText: 'Stylesheet'});
-    this.newStylesheetFolderBtn = this.stylesheetCreateModal.locator('umb-ref-item', {hasText: 'Folder'});
     this.stylesheetNameTxt = page.locator('umb-stylesheet-workspace-editor').locator('#nameInput #input');
+    this.newStylesheetBtn = this.createOptionActionListModal.locator('[name="New Stylesheet"]');
     this.stylesheetTree = page.locator('umb-tree[alias="Umb.Tree.Stylesheet"]');
   }
 
@@ -24,7 +20,7 @@ export class StylesheetUiHelper extends UiBaseLocators{
 
   async createStylesheetFolder(folderName: string) {
     await this.clickCreateActionMenuOption();
-    await this.clickNewStylesheetFolderButton();
+    await this.clickFolderButton();
     await this.enterFolderName(folderName);
     await this.clickConfirmCreateFolderButton();
   }
@@ -41,11 +37,6 @@ export class StylesheetUiHelper extends UiBaseLocators{
     await expect(this.newStylesheetBtn).toBeVisible();
     await this.newStylesheetBtn.click();
   }  
-  
-  async clickNewStylesheetFolderButton() {
-    await expect(this.newStylesheetFolderBtn).toBeVisible();
-    await this.newStylesheetFolderBtn.click();
-  }
 
   async waitForStylesheetToBeCreated() {
     await this.waitForNetworkToBeIdle();

lib/helpers/UiBaseLocators.ts

@@ -152,7 +152,6 @@ export class UiBaseLocators {
   public readonly createNewDocumentBlueprintBtn: Locator;
   public readonly openedModal: Locator;
   public readonly uiLoader: Locator;
-  public readonly createDocumentBlueprintModal: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -265,9 +264,8 @@ export class UiBaseLocators {
     this.gridBtn = page.getByLabel('Grid');
     this.listBtn = page.getByLabel('List');
     this.viewBundleBtn = page.locator('umb-collection-view-bundle uui-button svg');
-    this.createDocumentBlueprintModal = page.locator('umb-document-blueprint-options-create-modal');
     this.createDocumentBlueprintBtn = page.getByLabel(/^Create Document Blueprint(…)?$/);
-    this.createNewDocumentBlueprintBtn = this.createDocumentBlueprintModal.locator('umb-ref-item', {hasText: 'Document Blueprint for'});
+    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');
@@ -292,7 +290,7 @@ export class UiBaseLocators {
     this.createActionButtonCollection = page.locator('umb-collection-create-action-button');
     this.createActionBtn = this.createActionButtonCollection.locator('[label="Create"]');
     this.collectionTreeItemTableRow = page.locator('umb-collection-workspace-view umb-table uui-table-row');
-    this.folderBtn = this.createOptionActionListModal.locator('umb-ref-item', {hasText: 'Folder'});
+    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').first();
@@ -1425,4 +1423,8 @@ export class UiBaseLocators {
   async isWorkspaceViewTabWithAliasVisible(alias: string, isVisible: boolean = true) {
     await expect(this.page.getByTestId('workspace:view-link:' + alias)).toBeVisible({ visible: isVisible });
   }
+
+  async isDashboardTabWithNameVisible(name: string, isVisible: boolean = true) {
+    await expect(this.page.locator('uui-tab[label="' + name + '"]')).toBeVisible({visible: isVisible});
+  }
 }

package-lock.json

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