update from e2e/notebook

Author: dididy

zeppelin-web-angular/e2e/models/base-page.ts

@@ -17,14 +17,73 @@ export const BASE_URL = 'http://localhost:4200';
 
 export class BasePage {
   readonly page: Page;
-  readonly e2eTestFolder: Locator;
+
+  // Common Zeppelin component locators
+  readonly zeppelinNodeList: Locator;
+  readonly zeppelinWorkspace: Locator;
+  readonly zeppelinHeader: Locator;
+  readonly zeppelinPageHeader: Locator;
 
   constructor(page: Page) {
     this.page = page;
-    this.e2eTestFolder = page.locator(`[data-testid="folder-${E2E_TEST_FOLDER}"]`);
+    this.zeppelinNodeList = page.locator('zeppelin-node-list');
+    this.zeppelinWorkspace = page.locator('zeppelin-workspace');
+    this.zeppelinHeader = page.locator('zeppelin-header');
+    this.zeppelinPageHeader = page.locator('zeppelin-page-header');
   }
 
   async waitForPageLoad(): Promise<void> {
     await this.page.waitForLoadState('domcontentloaded', { timeout: 15000 });
   }
+
+  // Common navigation patterns
+  async navigateToRoute(
+    route: string,
+    options?: { timeout?: number; waitUntil?: 'load' | 'domcontentloaded' | 'networkidle' }
+  ): Promise<void> {
+    await this.page.goto(`/#${route}`, {
+      waitUntil: 'domcontentloaded',
+      timeout: 60000,
+      ...options
+    });
+    await this.waitForPageLoad();
+  }
+
+  async navigateToHome(): Promise<void> {
+    await this.navigateToRoute('/');
+  }
+
+  getCurrentPath(): string {
+    const url = new URL(this.page.url());
+    return url.hash || url.pathname;
+  }
+
+  async waitForUrlNotContaining(fragment: string): Promise<void> {
+    await this.page.waitForURL(url => !url.toString().includes(fragment));
+  }
+
+  // Common form interaction patterns
+  async fillInput(locator: Locator, value: string, options?: { timeout?: number; force?: boolean }): Promise<void> {
+    await locator.fill(value, { timeout: 15000, ...options });
+  }
+
+  async clickElement(locator: Locator, options?: { timeout?: number; force?: boolean }): Promise<void> {
+    await locator.click({ timeout: 15000, ...options });
+  }
+
+  async getInputValue(locator: Locator): Promise<string> {
+    return await locator.inputValue();
+  }
+
+  async isElementVisible(locator: Locator): Promise<boolean> {
+    return await locator.isVisible();
+  }
+
+  async isElementEnabled(locator: Locator): Promise<boolean> {
+    return await locator.isEnabled();
+  }
+
+  async getElementText(locator: Locator): Promise<string> {
+    return (await locator.textContent()) || '';
+  }
 }

zeppelin-web-angular/e2e/models/folder-rename-page.util.ts

@@ -10,29 +10,20 @@
  * limitations under the License.
  */
 
-import { expect, Page } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { FolderRenamePage } from './folder-rename-page';
 
 export class FolderRenamePageUtil {
-  constructor(
-    private readonly page: Page,
-    private readonly folderRenamePage: FolderRenamePage
-  ) {}
+  private folderRenamePage: FolderRenamePage;
 
-  private getFolderNode(folderName: string) {
-    return this.page
-      .locator('.node')
-      .filter({
-        has: this.page.locator('.folder .name', { hasText: folderName })
-      })
-      .first();
+  constructor(folderRenamePage: FolderRenamePage) {
+    this.folderRenamePage = folderRenamePage;
   }
 
   async verifyRenameButtonIsVisible(folderName: string): Promise<void> {
     await this.folderRenamePage.hoverOverFolder(folderName);
     const folderNode = this.getFolderNode(folderName);
     const renameButton = folderNode.locator('.folder .operation a[nz-tooltip][nztooltiptitle="Rename folder"]');
-    // Just verify the element exists in DOM, not visibility(for Webkit & Edge)
     await expect(renameButton).toHaveCount(1);
   }
 
@@ -53,8 +44,6 @@ export class FolderRenamePageUtil {
 
   async verifyRenameModalOpens(folderName: string): Promise<void> {
     await this.folderRenamePage.clickRenameMenuItem(folderName);
-
-    // Wait for modal to appear with extended timeout
     await expect(this.folderRenamePage.renameModal).toBeVisible({ timeout: 10000 });
   }
 
@@ -71,21 +60,17 @@ export class FolderRenamePageUtil {
 
     await this.folderRenamePage.clickConfirm();
 
-    // Wait for the modal to disappear
     await expect(this.folderRenamePage.renameModal).not.toBeVisible({ timeout: 10000 });
 
-    // Wait for the UI to update before reloading for the old name to disappear
-    const oldFolder = this.page.locator('.folder .name', { hasText: oldName });
+    const oldFolder = this.folderRenamePage.page.locator('.folder .name', { hasText: oldName });
     await expect(oldFolder).not.toBeVisible({ timeout: 10000 });
 
-    // Optional: Keep the reload as a final sanity check against the backend state
-    await this.page.reload();
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.folderRenamePage.page.reload();
+    await this.folderRenamePage.waitForPageLoad();
 
     const baseNewName = newName.split('/').pop();
 
-    // Ensure the folder list is stable and contains the new folder after reload
-    await this.page.waitForFunction(
+    await this.folderRenamePage.page.waitForFunction(
       ([expectedBaseName]) => {
         if (!expectedBaseName) {
           throw Error('Renamed Folder name is not exist.');
@@ -103,15 +88,12 @@ export class FolderRenamePageUtil {
     await this.folderRenamePage.clickRenameMenuItem(folderName);
     await this.folderRenamePage.clearNewName();
 
-    // NEW ASSERTION: The confirm button should be disabled when the input is empty.
     await expect(this.folderRenamePage.confirmButton).toBeDisabled({ timeout: 5000 });
 
-    // Clean up: Click cancel to close the modal after verifying validation.
     await this.folderRenamePage.clickCancel();
     await expect(this.folderRenamePage.renameModal).not.toBeVisible({ timeout: 5000 });
 
-    // Verify the original folder still exists and was not renamed or deleted.
-    const originalFolderLocator = this.page.locator('.folder .name', { hasText: folderName });
+    const originalFolderLocator = this.folderRenamePage.page.locator('.folder .name', { hasText: folderName });
     await expect(originalFolderLocator).toBeVisible({ timeout: 5000 });
   }
 
@@ -127,4 +109,13 @@ export class FolderRenamePageUtil {
     await this.verifyRenameButtonIsVisible(folderName);
     await this.verifyDeleteButtonIsVisible(folderName);
   }
+
+  private getFolderNode(folderName: string) {
+    return this.folderRenamePage.page
+      .locator('.node')
+      .filter({
+        has: this.folderRenamePage.page.locator('.folder .name', { hasText: folderName })
+      })
+      .first();
+  }
 }

zeppelin-web-angular/e2e/models/home-page.ts

@@ -33,6 +33,9 @@ export class HomePage extends BasePage {
   readonly notebookHeading: Locator;
   readonly helpHeading: Locator;
   readonly communityHeading: Locator;
+  readonly createNoteModal: Locator;
+  readonly createNoteButton: Locator;
+  readonly notebookNameInput: Locator;
   readonly externalLinks: {
     documentation: Locator;
     mailingList: Locator;
@@ -80,6 +83,9 @@ export class HomePage extends BasePage {
     this.notebookHeading = this.notebookColumn.locator('h3');
     this.helpHeading = page.locator('h3').filter({ hasText: 'Help' });
     this.communityHeading = page.locator('h3').filter({ hasText: 'Community' });
+    this.createNoteModal = page.locator('div.ant-modal-content');
+    this.createNoteButton = this.createNoteModal.locator('button', { hasText: 'Create' });
+    this.notebookNameInput = this.createNoteModal.locator('input[name="noteName"]');
 
     this.externalLinks = {
       documentation: page.locator('a[href*="zeppelin.apache.org/docs"]'),
@@ -171,6 +177,25 @@ export class HomePage extends BasePage {
 
   async clickCreateNewNote(): Promise<void> {
     await this.nodeList.createNewNoteLink.click();
+    await this.createNoteModal.waitFor({ state: 'visible' });
+  }
+
+  async createNote(notebookName: string): Promise<void> {
+    await this.clickCreateNewNote();
+    await this.fillInput(this.notebookNameInput, notebookName, { force: true });
+
+    // Wait for input value to be set (especially important for Webkit)
+    await this.page.waitForFunction(
+      name => {
+        const input = document.querySelector('input[name="noteName"]') as HTMLInputElement;
+        return input && input.value === name;
+      },
+      notebookName,
+      { timeout: 5000 }
+    );
+
+    await this.clickElement(this.createNoteButton);
+    await this.waitForPageLoad();
   }
 
   async clickImportNote(): Promise<void> {

zeppelin-web-angular/e2e/models/home-page.util.ts

@@ -13,13 +13,13 @@
 import { expect, Page } from '@playwright/test';
 import { getBasicPageMetadata } from '../utils';
 import { HomePage } from './home-page';
+import { BasePage } from './base-page';
 
-export class HomePageUtil {
+export class HomePageUtil extends BasePage {
   private homePage: HomePage;
-  private page: Page;
 
   constructor(page: Page) {
-    this.page = page;
+    super(page);
     this.homePage = new HomePage(page);
   }
 
@@ -31,7 +31,7 @@ export class HomePageUtil {
   }> {
     await this.homePage.navigateToLogin();
 
-    const currentPath = this.homePage.getCurrentPath();
+    const currentPath = this.getCurrentPath();
     const isLoginUrlMaintained = currentPath.includes('#/login');
     const isHomeContentDisplayed = await this.homePage.isHomeContentDisplayed();
     const isAnonymousUser = await this.homePage.isAnonymousUser();
@@ -63,12 +63,12 @@ export class HomePageUtil {
     pathAfterClick: string;
     homeContentMaintained: boolean;
   }> {
-    const pathBeforeClick = this.homePage.getCurrentPath();
+    const pathBeforeClick = this.getCurrentPath();
 
     await this.homePage.clickZeppelinLogo();
-    await this.homePage.waitForPageLoad();
+    await this.waitForPageLoad();
 
-    const pathAfterClick = this.homePage.getCurrentPath();
+    const pathAfterClick = this.getCurrentPath();
     const homeContentMaintained = await this.homePage.isHomeContentDisplayed();
 
     return {
@@ -99,7 +99,7 @@ export class HomePageUtil {
     const headingText = await this.homePage.getWelcomeHeadingText();
     expect(headingText.trim()).toBe('Welcome to Zeppelin!');
 
-    const welcomeText = await this.homePage.welcomeDescription.textContent();
+    const welcomeText = await this.getElementText(this.homePage.welcomeDescription);
     expect(welcomeText).toContain('web-based notebook');
     expect(welcomeText).toContain('interactive data analytics');
   }
@@ -109,20 +109,17 @@ export class HomePageUtil {
     await expect(this.homePage.notebookHeading).toBeVisible();
     await expect(this.homePage.refreshNoteButton).toBeVisible();
 
-    // Wait for notebook list to load with timeout
     await this.page.waitForSelector('zeppelin-node-list', { timeout: 10000 });
-    await expect(this.homePage.notebookList).toBeVisible();
+    await expect(this.zeppelinNodeList).toBeVisible();
   }
 
   async verifyNotebookRefreshFunctionality(): Promise<void> {
     await this.homePage.clickRefreshNotes();
 
-    // Wait for refresh operation to complete
     await this.homePage.waitForRefreshToComplete();
 
-    // Ensure the notebook list is still visible after refresh
-    await expect(this.homePage.notebookList).toBeVisible();
-    const isStillVisible = await this.homePage.isNotebookListVisible();
+    await expect(this.zeppelinNodeList).toBeVisible();
+    const isStillVisible = await this.isElementVisible(this.zeppelinNodeList);
     expect(isStillVisible).toBe(true);
   }
 
@@ -142,7 +139,6 @@ export class HomePageUtil {
     issuesTrackingHref: string | null;
     githubHref: string | null;
   }> {
-    // Get the parent links that contain the text
     const docLink = this.page.locator('a').filter({ hasText: 'Zeppelin documentation' });
     const mailLink = this.page.locator('a').filter({ hasText: 'Mailing list' });
     const issuesLink = this.page.locator('a').filter({ hasText: 'Issues tracking' });

zeppelin-web-angular/e2e/models/login-page.ts

@@ -19,6 +19,7 @@ export class LoginPage extends BasePage {
   readonly loginButton: Locator;
   readonly welcomeTitle: Locator;
   readonly formContainer: Locator;
+  readonly errorMessage: Locator;
 
   constructor(page: Page) {
     super(page);
@@ -27,27 +28,24 @@ export class LoginPage extends BasePage {
     this.loginButton = page.getByRole('button', { name: 'Login' });
     this.welcomeTitle = page.getByRole('heading', { name: 'Welcome to Zeppelin!' });
     this.formContainer = page.locator('form[nz-form]');
+    this.errorMessage = page.locator("text=The username and password that you entered don't match.").first();
   }
 
   async navigate(): Promise<void> {
-    await this.page.goto('/#/login');
-    await this.waitForPageLoad();
+    await this.navigateToRoute('/login');
   }
 
   async login(username: string, password: string): Promise<void> {
-    await this.userNameInput.fill(username);
-    await this.passwordInput.fill(password);
-    await this.loginButton.click();
+    await this.fillInput(this.userNameInput, username);
+    await this.fillInput(this.passwordInput, password);
+    await this.clickElement(this.loginButton);
   }
 
   async waitForErrorMessage(): Promise<void> {
-    await this.page.waitForSelector("text=The username and password that you entered don't match.", { timeout: 5000 });
+    await this.errorMessage.waitFor({ state: 'visible', timeout: 5000 });
   }
 
   async getErrorMessageText(): Promise<string> {
-    return (
-      (await this.page.locator("text=The username and password that you entered don't match.").first().textContent()) ||
-      ''
-    );
+    return this.getElementText(this.errorMessage);
   }
 }