fix(FR-1844): migrate E2E tests to Ant Design 6 locators (#4919)

Resolves [FR-1844](https://lablup.atlassian.net/browse/FR-1844)

## Summary
Migrate E2E test locators to Ant Design 6 patterns following the upgrade from Ant Design 5. This fixes broken E2E tests by replacing fragile class-based selectors with semantic, role-based selectors.

## Changes

### Modal Selectors Migration
- `.ant-modal-content` → `getByRole('dialog')`
- More semantic and resilient to DOM structure changes
- Updated in: environment.test.ts, session.test.ts, vfolder-explorer-modal.spec.ts

### Dropdown & Combobox Updates
- `.ant-select-dropdown` → `getByRole('option')`
- Complex nested combobox locators → `getByRole('combobox')`
- Simplified selectors in: session.test.ts

### Notification Selectors
- `.ant-notification-notice-message` → `getByText()`
- User-centric, content-based selector
- Updated in: login.test.ts

### Input Number Unit Selector
- Updated structure for Ant Design 6: `.ant-select .ant-typography`
- Fixed in: environment.test.ts

### Test Utility Classes
- FolderExplorerModal: Updated to use `getByRole('dialog')`
- FolderCreationModal: Text-based card selectors
- StartPage: Improved element detection

### Viewport Fixes
- Added `scrollIntoViewIfNeeded()` for dropdown options
- Prevents "Element is outside of the viewport" errors

## Benefits
✅ **Semantic selectors**: Role-based locators reflect actual user interactions
✅ **Better accessibility**: Tests verify accessible interface elements
✅ **Resilient to changes**: Not tied to CSS implementation details
✅ **Follows Playwright best practices**: Recommended selector patterns

## Test Coverage
- ✅ agent.test.ts
- ✅ config.test.ts
- ✅ environment.test.ts
- ✅ login.test.ts
- ✅ maintenance.test.ts
- ✅ session.test.ts
- ✅ vfolder-explorer-modal.spec.ts

**Files Changed:** 11 files (+117/-124)

[FR-1844]: https://lablup.atlassian.net/browse/FR-1844?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: yomybaby

.cspell.json

@@ -43,6 +43,7 @@
     "Keypairs",
     "Lablup",
     "lucide",
+    "networkidle",
     "noti",
     "OPENBLAS",
     "Popconfirm",

e2e/agent.test.ts

@@ -1,24 +1,26 @@
 import { loginAsAdmin } from './utils/test-util';
 import { checkActiveTab, findColumnIndex } from './utils/test-util-antd';
-import { test, expect } from '@playwright/test';
+import { test, expect, Locator } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await loginAsAdmin(page);
+  await page.getByRole('menuitem', { name: 'Admin Settings' }).click();
   await page.getByRole('menuitem', { name: 'hdd Resources' }).click();
   await expect(
     page.getByTestId('webui-breadcrumb').getByText('Resources'),
   ).toBeVisible();
+  await page.waitForLoadState('networkidle');
+  // Click on Agent tab if not already active
+  await page.getByRole('tab', { name: 'Agent' }).click();
 });
 
 test.describe('Agent list', () => {
-  let resourcesPageTab;
-  let agentListTable;
+  let agentListTable: Locator;
 
   test.beforeEach(async ({ page }) => {
     const firstCard = await page
       .locator('.ant-layout-content .ant-card')
       .first();
-    resourcesPageTab = await firstCard.locator('.ant-tabs');
     agentListTable = await firstCard.locator('.ant-table');
   });
 

e2e/config.test.ts

@@ -71,16 +71,17 @@ test.describe.parallel('config.toml', () => {
       await loginAsAdmin(page);
 
       // Step 2: Go to Environments page and find an uninstalled image
-      await page
-        .getByRole('group')
-        .getByText('Environments', { exact: true })
-        .click();
-
-      // Wait for the table to load and have data (excluding measure rows)
-      await page.waitForSelector('table tbody tr:not(.ant-table-measure-row)', {
-        state: 'visible',
-        timeout: 15000,
-      });
+      await page.getByRole('menuitem', { name: 'Admin Settings' }).click();
+      await page.getByRole('menuitem', { name: 'Environments' }).click();
+
+      // Wait for the table to load and have data (excluding measure rows and placeholder)
+      await page.waitForSelector(
+        'table tbody tr:not(.ant-table-measure-row):not(.ant-table-placeholder)',
+        {
+          state: 'visible',
+          timeout: 15000,
+        },
+      );
 
       // Sort by Status column to get uninstalled images first
       const statusHeader = page.getByRole('columnheader', { name: 'Status' });
@@ -89,7 +90,9 @@ test.describe.parallel('config.toml', () => {
       // Find the first row where the status cell (2nd cell) is empty (uninstalled image)
       // Uninstalled images have no status badge
       // Exclude ant-table-measure-row which is hidden
-      const allRows = page.locator('tbody tr:not(.ant-table-measure-row)');
+      const allRows = page.locator(
+        'tbody tr:not(.ant-table-measure-row):not(.ant-table-placeholder)',
+      );
       let uninstalledImageName: string | null = null;
 
       // Wait for at least one row to be available

e2e/environment.test.ts

@@ -1,13 +1,20 @@
 import { loginAsAdmin, navigateTo } from './utils/test-util';
-import { findColumnIndex, getMenuItem } from './utils/test-util-antd';
+import { findColumnIndex } from './utils/test-util-antd';
 import { expect, test } from '@playwright/test';
 
 test.describe('environment ', () => {
   test.beforeEach(async ({ page }) => {
     await loginAsAdmin(page);
-    await getMenuItem(page, 'Environments').click();
+    await page.getByRole('menuitem', { name: 'Admin Settings' }).click();
+    await page
+      .getByRole('menuitem', { name: 'file-done Environments' })
+      .click();
     await expect(page).toHaveURL(/\/environment/);
     await page.waitForLoadState('networkidle');
+    // Wait for the table to be visible
+    await page
+      .locator('.ant-table-content')
+      .waitFor({ state: 'visible', timeout: 10000 });
   });
   test('Rendering Image List', async ({ page }) => {
     const table = page.locator('.ant-table-content');
@@ -74,9 +81,10 @@ test.describe('environment ', () => {
       .click();
     await page.waitForLoadState('networkidle');
     // get resource limit from control modal
-    const resourceLimitControlModal = page.locator(
-      '.ant-modal-content:has-text("Modify Minimum Image Resource Limit")',
-    );
+    const resourceLimitControlModal = page.getByRole('dialog', {
+      name: /Modify Minimum Image Resource Limit/i,
+    });
+
     await expect(resourceLimitControlModal).toBeVisible();
 
     const cpuFormItem = resourceLimitControlModal.locator(
@@ -92,8 +100,9 @@ test.describe('environment ', () => {
       '.ant-input-number input',
     );
     const memoryValue = await memoryFormItemInput.getAttribute('value');
+    // In Ant Design 6, the unit selector structure changed - use .ant-select .ant-typography
     const memorySize = await memoryFormItem
-      .locator('.ant-input-number-group-addon .ant-select-selection-item')
+      .locator('.ant-select .ant-typography')
       .textContent();
     // modify resource limit
     await cpuFormItemInput.fill(CPU_CORE);
@@ -115,9 +124,10 @@ test.describe('environment ', () => {
       .getByRole('button', { name: 'setting' })
       .click();
     await page.waitForLoadState('networkidle');
-    const modifiedResourceLimitControlModal = page.locator(
-      '.ant-modal-content:has-text("Modify Minimum Image Resource Limit")',
-    );
+    // In Ant Design 6, use role-based selector for dialog
+    const modifiedResourceLimitControlModal = page.getByRole('dialog', {
+      name: /Modify Minimum Image Resource Limit/i,
+    });
     await expect(modifiedResourceLimitControlModal).toBeVisible();
     const modifiedCpuFormItemInput = modifiedResourceLimitControlModal.locator(
       '.ant-form-item-row:has-text("CPU") input',
@@ -128,10 +138,11 @@ test.describe('environment ', () => {
       );
     await expect(modifiedCpuFormItemInput).toHaveValue(CPU_CORE);
     await expect(modifiedMemoryFormItemInput).toHaveValue(MEMORY_SIZE);
+    // In Ant Design 6, the unit selector structure changed - use .ant-select .ant-typography
     await expect(
-      memoryFormItem.locator(
-        '.ant-input-number-group-addon .ant-select-selection-item',
-      ),
+      modifiedResourceLimitControlModal
+        .locator('.ant-form-item-row:has-text("Memory")')
+        .locator('.ant-select .ant-typography'),
     ).toHaveText('GiB');
 
     // reset resource limit
@@ -141,8 +152,9 @@ test.describe('environment ', () => {
     await expect(modifiedMemoryFormItemInput).toHaveValue(
       memoryValue as string,
     );
+    // In Ant Design 6, click on the select component wrapper
     const memorySizeAddon = modifiedResourceLimitControlModal.locator(
-      '.ant-form-item-row:has-text("Memory") .ant-select-selector',
+      '.ant-form-item-row:has-text("Memory") .ant-select',
     );
     await memorySizeAddon.click();
     await page
@@ -175,7 +187,8 @@ test.describe('environment ', () => {
       .click();
 
     // Add app
-    const modal = page.locator('.ant-modal-content:has-text("Manage Apps")');
+    // In Ant Design 6, use role-based selector for dialog
+    const modal = page.getByRole('dialog', { name: /Manage Apps/i });
     await expect(modal).toBeVisible();
     const numberOfAppsBeforeAdd = await modal.locator('.ant-form-item').count();
     await modal.getByRole('button', { name: 'plus Add' }).click();
@@ -207,9 +220,8 @@ test.describe('environment ', () => {
       .nth(controlColumnIndex)
       .getByRole('button', { name: 'appstore' })
       .click();
-    const modalAfterAdd = page.locator(
-      '.ant-modal-content:has-text("Manage Apps")',
-    );
+    // In Ant Design 6, use role-based selector for dialog
+    const modalAfterAdd = page.getByRole('dialog', { name: /Manage Apps/i });
     await expect(modalAfterAdd).toBeVisible();
     const numberOfApps = await modalAfterAdd.locator('.ant-form-item').count();
     expect(numberOfApps).toBe(numberOfAppsBeforeAdd + 1);

e2e/login.test.ts

@@ -1,13 +1,13 @@
 import {
-  login,
   loginAsAdmin,
   userInfo,
   webServerEndpoint,
+  webuiEndpoint,
 } from './utils/test-util';
 import { test, expect } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('http://127.0.0.1:9081');
+  await page.goto(webuiEndpoint);
 });
 
 test.describe('Before login', () => {
@@ -45,9 +45,10 @@ test.describe('Login failure cases', () => {
       .fill(webServerEndpoint);
     await page.getByLabel('Login', { exact: true }).click();
 
+    // Wait for and verify the error notification appears
     await expect(
-      page.locator('.ant-notification-notice-message'),
-    ).toContainText('Login information mismatch. Check your information');
+      page.getByText('Login information mismatch. Check your information'),
+    ).toBeVisible();
   });
 
   test('should display error message for incorrect password', async ({
@@ -62,8 +63,9 @@ test.describe('Login failure cases', () => {
       .fill(webServerEndpoint);
     await page.getByLabel('Login', { exact: true }).click();
 
+    // Wait for and verify the error notification appears
     await expect(
-      page.locator('.ant-notification-notice-message'),
-    ).toContainText('Login information mismatch. Check your information');
+      page.getByText('Login information mismatch. Check your information'),
+    ).toBeVisible();
   });
 });

e2e/maintenance.test.ts

@@ -7,7 +7,9 @@ import { test, expect } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await loginAsAdmin(page);
-  await page.getByRole('menuitem', { name: 'Maintenance' }).click();
+  await page.getByRole('menuitem', { name: 'Admin Settings' }).click();
+  await page.getByRole('menuitem', { name: 'tool Maintenance' }).click();
+  await page.waitForLoadState('networkidle');
 });
 
 test.describe('test maintenance page', () => {

e2e/session.test.ts

@@ -23,25 +23,19 @@ const createInteractiveSessionOnSessionStartPage = async (
   await page.waitForLoadState('networkidle');
 
   // select default resource group
-  const resourceGroup = page
-    .locator('.ant-form-item-row:has-text("Resource Group")')
-    .locator(
-      '.ant-form-item-control-input-content > .ant-select > .ant-select-selector',
-    )
-    .locator('input');
+  const resourceGroup = page.getByRole('combobox', {
+    name: 'Resource Group',
+  });
   await expect(resourceGroup).toBeVisible();
   await resourceGroup.fill('default');
-  await page.locator('.ant-select-dropdown:has-text("default")').click();
+  await page.keyboard.press('Enter');
   // select Minimum Requirements
-  const ResourcePreset = page
-    .locator('.ant-form-item-row:has-text("Resource Presets")')
-    .locator(
-      '.ant-form-item-control-input-content > .ant-select > .ant-select-selector',
-    )
-    .locator('input');
+  const ResourcePreset = page.getByRole('combobox', {
+    name: 'Resource Presets',
+  });
   await expect(ResourcePreset).toBeVisible();
   await ResourcePreset.fill('minimum');
-  await page.locator('.ant-select-dropdown:has-text("minimum")').click();
+  await page.getByRole('option', { name: 'minimum' }).click();
   // launch
   await page.getByRole('button', { name: 'Skip to review' }).click();
 
@@ -50,17 +44,11 @@ const createInteractiveSessionOnSessionStartPage = async (
   await expect(launchButton).toBeEnabled({ timeout: 10000 });
   await launchButton.click();
 
-  // Wait for either success or modal to appear
-  try {
-    await expect(page.locator('.ant-modal-confirm-title')).toHaveText(
-      'No storage folder is mounted',
-      { timeout: 10000 },
-    );
-    await page.getByRole('button', { name: 'Start' }).click();
-  } catch (error) {
-    // Modal might not appear if storage is already configured
-    console.log('No storage modal appeared, session might start directly');
-  }
+  await page
+    .getByRole('dialog')
+    .filter({ hasText: 'No storage folder is mounted' })
+    .getByRole('button', { name: 'Start' })
+    .click();
 };
 
 const createBatchSessionOnSessionStartPage = async (
@@ -85,25 +73,20 @@ const createBatchSessionOnSessionStartPage = async (
   await page.waitForLoadState('networkidle');
 
   // select default resource group
-  const resourceGroup = page
-    .locator('.ant-form-item-row:has-text("Resource Group")')
-    .locator(
-      '.ant-form-item-control-input-content > .ant-select > .ant-select-selector',
-    )
-    .locator('input');
+  const resourceGroup = page.getByRole('combobox', {
+    name: 'Resource Group',
+  });
   await expect(resourceGroup).toBeVisible();
   await resourceGroup.fill('default');
-  await page.locator('.ant-select-dropdown:has-text("default")').click();
+  await page.keyboard.press('Enter');
+
   // select Minimum Requirements
-  const ResourcePreset = page
-    .locator('.ant-form-item-row:has-text("Resource Presets")')
-    .locator(
-      '.ant-form-item-control-input-content > .ant-select > .ant-select-selector',
-    )
-    .locator('input');
+  const ResourcePreset = page.getByRole('combobox', {
+    name: 'Resource Presets',
+  });
   await expect(ResourcePreset).toBeVisible();
   await ResourcePreset.fill('minimum');
-  await page.locator('.ant-select-dropdown:has-text("minimum")').click();
+  await page.getByRole('option', { name: 'minimum' }).click();
   // launch
   await page.getByRole('button', { name: 'Skip to review' }).click();
 
@@ -113,16 +96,11 @@ const createBatchSessionOnSessionStartPage = async (
   await launchButton.click();
 
   // Wait for either success or modal to appear
-  try {
-    await expect(page.locator('.ant-modal-confirm-title')).toHaveText(
-      'No storage folder is mounted',
-      { timeout: 10000 },
-    );
-    await page.getByRole('button', { name: 'Start' }).click();
-  } catch (error) {
-    // Modal might not appear if storage is already configured
-    console.log('No storage modal appeared, session might start directly');
-  }
+  await page
+    .getByRole('dialog')
+    .filter({ hasText: 'No storage folder is mounted' })
+    .getByRole('button', { name: 'Start' })
+    .click();
 };
 
 test.describe('Session Launcher', () => {

e2e/utils/classes/FolderCreationModal.ts

@@ -4,9 +4,10 @@ export class FolderCreationModal {
   private readonly modal: Locator;
   private readonly page: Page;
   constructor(page: Page) {
-    this.modal = page.locator(
-      '.ant-modal-content:has-text("Create a new storage folder")',
-    );
+    this.modal = page
+      .getByRole('dialog')
+      .filter({ hasText: 'Create a new storage folder' });
+
     this.page = page;
   }
 

e2e/utils/classes/FolderExplorerModal.ts

@@ -5,7 +5,7 @@ export class FolderExplorerModal {
   private readonly page: Page;
 
   constructor(page: Page) {
-    this.modal = page.locator('.ant-modal').first();
+    this.modal = page.getByRole('dialog').first();
     this.page = page;
   }
 

e2e/utils/classes/StartPage.ts

@@ -9,6 +9,11 @@ export class StartPage {
   }
 
   async goto(): Promise<void> {
+    // If in admin settings pages, click Go Back first
+    const goBackButton = this.page.getByRole('button', { name: 'Go Back' });
+    if (await goBackButton.isVisible()) {
+      await goBackButton.click();
+    }
     await getMenuItem(this.page, 'Start').click();
   }