V17 Cherry pick the test helper for workspace view and updated test helper to avoid flaky tests (#309)

* Updated test helper to avoid flaky tests

* Cherry pick the test helper for workspace view

* Bumped version

* Format code

Author: nhudinh0309

lib/helpers/DataTypeUiHelper.ts

@@ -930,7 +930,7 @@ export class DataTypeUiHelper extends UiBaseLocators {
   async addBlockSettingsModel(elementName: string) {
     await expect(this.chooseSettingsModelBtn).toBeVisible();
     await this.chooseSettingsModelBtn.click();
-    await this.clickButtonWithName(elementName);
+    await this.clickModalMenuItemWithName(elementName);
     await this.clickChooseModalButton();
   }
 

lib/helpers/RelationTypeUiHelper.ts

@@ -40,6 +40,7 @@ export class RelationTypeUiHelper extends UiBaseLocators{
   async goToRelationTypeWithName(name: string) {
     await expect(this.relationTypeCollection.getByText(name)).toBeVisible();
     await this.relationTypeCollection.getByText(name).click();
+    await this.waitUntilUiLoaderIsNoLongerVisible();
   }
 
   async clickRootFolderCaretButton() {

lib/helpers/UiBaseLocators.ts

@@ -151,6 +151,7 @@ export class UiBaseLocators {
   public readonly monacoEditor: Locator;
   public readonly createNewDocumentBlueprintBtn: Locator;
   public readonly openedModal: Locator;
+  public readonly uiLoader: Locator;
   public readonly createDocumentBlueprintModal: Locator;
 
   constructor(page: Page) {
@@ -307,6 +308,7 @@ export class UiBaseLocators {
     this.workspaceActionMenuBtn = page.getByTestId('workspace:action-menu-button');
     this.monacoEditor = page.locator('.monaco-editor');
     this.openedModal = page.locator('uui-modal-container[backdrop]');
+    this.uiLoader = page.locator('uui-loader');
   }
 
   async clickActionsMenuForNameInSectionSidebar(name: string) {
@@ -1155,9 +1157,10 @@ export class UiBaseLocators {
     await this.mediaPickerModalSubmitBtn.click();
   }
 
-  async selectMediaWithName(mediaName: string) {
-    await expect(this.mediaCardItems.filter({hasText: mediaName})).toBeVisible();
-    await this.mediaCardItems.filter({hasText: mediaName}).click({position: {x: 0.5, y: 0.5}});
+  async selectMediaWithName(mediaName: string, isForce: boolean = false) {
+    const mediaLocator = this.mediaCardItems.filter({hasText: mediaName});
+    await expect(mediaLocator).toBeVisible();
+    await mediaLocator.click({position: {x: 0.5, y: 0.5}, force: isForce});
   }
 
   async selectMediaWithTestId(mediaKey: string) {
@@ -1414,4 +1417,12 @@ export class UiBaseLocators {
     await this.page.keyboard.press('Backspace');
     await this.page.keyboard.insertText(value);
   }
+
+  async waitUntilUiLoaderIsNoLongerVisible() {
+    await expect(this.uiLoader).toBeVisible({visible: false, timeout: 10000});
+  }
+
+  async isWorkspaceViewTabWithAliasVisible(alias: string, isVisible: boolean = true) {
+    await expect(this.page.getByTestId('workspace:view-link:' + alias)).toBeVisible({ visible: isVisible });
+  }
 }

package-lock.json

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