e2e(FR-1221): add visual regression test for vfolder, import and start page (#3988)

resolves #3921 (FR-1221)

## description
In this PR, I added vrt file for vfolder, import, and start page. Because I didn't upload image file, you need to run this command before you run test file.
`pnpm playwright test e2e/<filename> --update-snapshots`
that code makes expected image for vrt.

Author: hummingbbird

e2e/utils/test-util.ts

@@ -154,7 +154,8 @@ export async function verifyVFolder(
   await page.getByRole('tab', { name: statusTab }).click();
   await page.getByTestId('vfolder-filter').locator('div').nth(2).click();
   await page.getByRole('option', { name: 'Name' }).locator('div').click();
-  const searchInput = page.locator('#rc_select_8');
+
+  const searchInput = page.locator('input[type="search"].ant-input');
   await searchInput.fill(folderName);
   await page.getByRole('button', { name: 'search' }).click();
   await expect(
@@ -189,15 +190,17 @@ export async function moveToTrashAndVerify(page: Page, folderName: string) {
   await page.getByRole('link', { name: 'Data' }).click();
   await page.getByTestId('vfolder-filter').locator('div').nth(2).click();
   await page.getByRole('option', { name: 'Name' }).locator('div').click();
-  const searchInput = page.locator('#rc_select_8');
+  const searchInput = page.locator('input[type="search"].ant-input');
   await searchInput.fill(folderName);
   await page.getByRole('button', { name: 'search' }).click();
   await page
     .getByRole('row', { name: `VFolder Identicon ${folderName}` })
     .getByRole('button')
     .nth(1)
     .click();
-  await page.getByRole('button', { name: 'Move' }).click();
+  const moveButton = page.getByRole('button', { name: 'Move' });
+  await expect(moveButton).toBeVisible();
+  await moveButton.click();
   await removeSearchButton(page, folderName);
   await verifyVFolder(page, folderName, 'Trash');
 }
@@ -208,7 +211,7 @@ export async function deleteForeverAndVerifyFromTrash(
 ) {
   await page.getByRole('link', { name: 'Data' }).click();
   await page.getByRole('tab', { name: 'Trash' }).click();
-  const searchInput = page.locator('#rc_select_8');
+  const searchInput = page.locator('input[type="search"].ant-input');
   await searchInput.fill(folderName);
   await page.getByRole('button', { name: 'search' }).click();
   // Delete forever
@@ -284,7 +287,7 @@ export async function restoreVFolderAndVerify(page: Page, folderName: string) {
   await page.getByRole('tab', { name: 'Trash' }).click();
   await page.locator('#react-root').getByTitle('Name').click();
   await page.getByRole('option', { name: 'Name' }).locator('div').click();
-  const searchInput = page.locator('#rc_select_8');
+  const searchInput = page.locator('input[type="search"].ant-input');
   await searchInput.fill(folderName);
   // Restore
   await page

e2e/visual_regression/import/import_page.test.ts

@@ -0,0 +1,25 @@
+import { loginAsVisualRegressionUser2 } from '../../utils/test-util';
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.setViewportSize({
+    width: 1500,
+    height: 1500,
+  });
+  await loginAsVisualRegressionUser2(page);
+  await page.getByRole('menuitem', { name: 'Import & Run' }).click();
+  await page.waitForLoadState('networkidle');
+});
+
+test('Import & Run page Visual Regression Test', async ({ page }) => {
+  await expect(page).toHaveScreenshot('import_page.png', {
+    mask: [
+      page.locator('#cpu-usage-bar #front'),
+      page.locator('#cpu-usage-bar-2 #front'),
+      page.locator('#mem-usage-bar'),
+      page.locator('#mem-usage-bar-2'),
+      page.locator('#concurrency-usage-bar'),
+    ],
+    fullPage: true,
+  });
+});

e2e/visual_regression/import/snapshot/import-page.png

@@ -0,0 +1,18 @@
+import { loginAsVisualRegressionUser2 } from '../../utils/test-util';
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.setViewportSize({
+    width: 1500,
+    height: 1000,
+  });
+  await loginAsVisualRegressionUser2(page);
+  await page.getByRole('menuitem', { name: 'Start' }).click();
+  await page.waitForLoadState('networkidle');
+});
+
+test('Start page Visual Regression Test', async ({ page }) => {
+  await expect(page).toHaveScreenshot('start_page.png', {
+    fullPage: true,
+  });
+});

e2e/visual_regression/start/snapshot/start-page.png

@@ -0,0 +1,59 @@
+import { loginAsVisualRegressionUser2 } from '../../utils/test-util';
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await loginAsVisualRegressionUser2(page);
+  await page.setViewportSize({
+    width: 1500,
+    height: 1000,
+  });
+  await page.getByRole('link', { name: 'Data' }).click();
+  await page.getByText('This storage backend').waitFor();
+});
+
+test.describe('Vfolder page Visual Regression Test', () => {
+  test('Full page', async ({ page }) => {
+    await expect(page).toHaveScreenshot('vfolder_page.png', {
+      fullPage: true,
+    });
+  });
+
+  test('Create Folder modal', async ({ page }) => {
+    await page.getByRole('button', { name: 'Create Folder' }).nth(1).click();
+    const folderCreationModal = page.locator('.ant-modal-content').first();
+    await expect(folderCreationModal).toHaveScreenshot(
+      'create_folder_modal.png',
+    );
+    await page.getByRole('button', { name: 'Close' }).click();
+  });
+
+  test.describe('existing folder action modal', () => {
+    test('Folder info modal', async ({ page }) => {
+      await page.getByRole('link', { name: 'model_folder' }).click();
+      await page
+        .getByRole('heading', {
+          name: 'model_folder',
+          exact: true,
+        })
+        .waitFor();
+
+      const folderInfoModal = page.locator('.ant-modal-content').first();
+      await expect(folderInfoModal).toHaveScreenshot('folder_info_modal.png');
+      await page.getByRole('button', { name: 'Close' }).click();
+    });
+
+    test('Modify Permission modal', async ({ page }) => {
+      await page
+        .getByRole('row', { name: `VFolder Identicon model_folder` })
+        .getByRole('button')
+        .first()
+        .click();
+      await page.getByText('Modify Permissions').waitFor();
+      const modifyPermissionModal = page.locator('.ant-modal-content').first();
+      await expect(modifyPermissionModal).toHaveScreenshot(
+        'modify_permission_modal.png',
+      );
+      await page.getByRole('button', { name: 'Close' }).click();
+    });
+  });
+});