diff --git a/pr-preview/pr-4/tests/video-src/sample.y4m b/pr-preview/pr-4/e2e/assets/sample.y4m
similarity index 100%
rename from pr-preview/pr-4/tests/video-src/sample.y4m
rename to pr-preview/pr-4/e2e/assets/sample.y4m
diff --git a/pr-preview/pr-4/tests/pages/MRZScannerPage.ts b/pr-preview/pr-4/e2e/fixtures/MRZScanner.fixture.ts
similarity index 82%
rename from pr-preview/pr-4/tests/pages/MRZScannerPage.ts
rename to pr-preview/pr-4/e2e/fixtures/MRZScanner.fixture.ts
index b700cac..2abc702 100644
--- a/pr-preview/pr-4/tests/pages/MRZScannerPage.ts
+++ b/pr-preview/pr-4/e2e/fixtures/MRZScanner.fixture.ts
@@ -2,7 +2,7 @@ import { Page, Locator } from "@playwright/test";
 
 // TODO: Update the URL when we upload the page to live server.
 
-const URL = '/index.html';
+const URL = "/index.html";
 
 export class MRZScannerPage {
   private page: Page;
@@ -12,7 +12,6 @@ export class MRZScannerPage {
   private scanIDButton: Locator;
   private scanPassportButton: Locator;
   private scanBothButton: Locator;
-  
 
   constructor(page: Page) {
     this.page = page;
@@ -28,13 +27,12 @@ export class MRZScannerPage {
    * Close the license related dialog if it shows.
    */
   async closeDialogIfPresent() {
-
-    await this.dialogCloseButton.click();    
+    await this.dialogCloseButton.click();
   }
 
   async navigateTo() {
     await this.page.setExtraHTTPHeaders({
-      "sec-ch-ua": '"Chromium";v="91", " Not;A Brand";v="99"'
+      "sec-ch-ua": '"Chromium";v="91", " Not;A Brand";v="99"',
     });
 
     await this.page.goto(URL);
@@ -51,11 +49,10 @@ export class MRZScannerPage {
 
   async clickStartButton() {
     await this.startButton.click();
-    
-    // Ensuring the page is loaded after clicked on the Start button
-    await this.page.waitForLoadState('networkidle', {timeout: 30000});
-    await this.page.waitForLoadState('domcontentloaded', {timeout: 30000});
 
+    // Ensuring the page is loaded after clicked on the Start button
+    await this.page.waitForLoadState("networkidle", { timeout: 30000 });
+    await this.page.waitForLoadState("domcontentloaded", { timeout: 30000 });
   }
 
   async clickscanIDButton() {
@@ -72,5 +69,8 @@ export class MRZScannerPage {
     await this.scanBothButton.click();
     await this.page.waitForTimeout(2000);
   }
-  
+
+  async evaluate(props) {
+    await this.page.evaluate(props);
+  }
 }
diff --git a/pr-preview/pr-4/e2e/fixtures/index.ts b/pr-preview/pr-4/e2e/fixtures/index.ts
new file mode 100644
index 0000000..a0baa79
--- /dev/null
+++ b/pr-preview/pr-4/e2e/fixtures/index.ts
@@ -0,0 +1,13 @@
+import { test as baseTest } from "@playwright/test";
+import { MRZScannerPage } from "./MRZScanner.fixture";
+
+export const test = baseTest.extend<{
+  mrzScannerPage: MRZScannerPage;
+}>({
+  mrzScannerPage: async ({ page }, use) => {
+    const mrzScannerPage = new MRZScannerPage(page);
+    await use(mrzScannerPage);
+  },
+});
+
+export { expect } from "@playwright/test";
diff --git a/pr-preview/pr-4/tests/e2e/test-MRZScanner.spec.ts b/pr-preview/pr-4/e2e/tests/MRZScanner.spec.ts
similarity index 66%
rename from pr-preview/pr-4/tests/e2e/test-MRZScanner.spec.ts
rename to pr-preview/pr-4/e2e/tests/MRZScanner.spec.ts
index cead1ed..f5f8b93 100644
--- a/pr-preview/pr-4/tests/e2e/test-MRZScanner.spec.ts
+++ b/pr-preview/pr-4/e2e/tests/MRZScanner.spec.ts
@@ -1,17 +1,10 @@
-import { test, expect } from '../fixtures';
+import { test, expect } from "../fixtures";
 
-// Adding userAgent to avoid firefox headless mode to block the script as it is being detected as bot.
-const userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:130.0) Gecko/20100101 Firefox/130.0"; 
-
-
-test.describe.configure({ mode: 'serial' });
-
-test.describe("Verify the VIN Scanner Page title and veirfy user can select different settings", () => {
-  test.use({userAgent});
+test.describe.configure({ mode: "serial" });
 
+test.describe("Verify the MRZ Scanner page title and verify user can select different settings", () => {
   test.beforeEach(async ({ mrzScannerPage }) => {
-    
-    // Navigate to the VIN Scanner page
+    // Navigate to the MRZ Scanner page
     await mrzScannerPage.navigateTo();
   });
 
@@ -19,35 +12,29 @@ test.describe("Verify the VIN Scanner Page title and veirfy user can select diff
     // Validate the page title
     const title = await mrzScannerPage.getTitle();
     await expect(title).toContain("Dynamsoft MRZ Scanner");
-
   });
 
-
   test('should click "Both" button on the page and validate the header label text', async ({ mrzScannerPage }) => {
     await mrzScannerPage.clickStartButton();
 
     await mrzScannerPage.clickScanBothButton();
     const selectedBtn = await mrzScannerPage.getSelectedButton();
-    await expect(selectedBtn).toHaveText('Both');
-
+    await expect(selectedBtn).toHaveText("Both");
   });
 
   test('should click "ID" button on the page and validate the header label text', async ({ mrzScannerPage }) => {
     await mrzScannerPage.clickStartButton();
-  
+
     await mrzScannerPage.clickscanIDButton();
     const selectedBtn = await mrzScannerPage.getSelectedButton();
-    await expect(selectedBtn).toHaveText('ID');
-
+    await expect(selectedBtn).toHaveText("ID");
   });
 
   test('should click "Passport" button on the page and validate the header label text', async ({ mrzScannerPage }) => {
     await mrzScannerPage.clickStartButton();
-    
-    await mrzScannerPage.clickscanPassportButton();
-    const selectedBtn = await mrzScannerPage.getSelectedButton(); 
-    await expect(selectedBtn).toHaveText('Passport');
 
+    await mrzScannerPage.clickscanPassportButton();
+    const selectedBtn = await mrzScannerPage.getSelectedButton();
+    await expect(selectedBtn).toHaveText("Passport");
   });
-
 });
diff --git a/pr-preview/pr-4/playwright.config.js b/pr-preview/pr-4/playwright.config.js
index e76beb3..9683827 100644
--- a/pr-preview/pr-4/playwright.config.js
+++ b/pr-preview/pr-4/playwright.config.js
@@ -5,7 +5,7 @@ import * as path from "path";
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: "./tests",
+  testDir: "./e2e",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -21,7 +21,7 @@ export default defineConfig({
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: "http://localhost:3000",
     /* Enable headless mode by default */
-    headless: true,
+    headless: true, // Change to `false` to see the browser during testing
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
   },
@@ -36,10 +36,10 @@ export default defineConfig({
           args: [
             "--disable-web-security",
             "--enable-web-rtc",
-            "--headless=chrome",
+            "--headless=chrome", // Comment to see the browser during testing
             "--use-fake-device-for-media-stream",
             // "--use-fake-ui-for-media-stream",
-            `--use-file-for-fake-video-capture=${path.join(__dirname, "./tests/video-src/sample.y4m")}`,
+            `--use-file-for-fake-video-capture=${path.join(__dirname, "./e2e/assets/sample.y4m")}`,
           ],
         },
         contextOptions: {
diff --git a/pr-preview/pr-4/tests/fixtures.ts b/pr-preview/pr-4/tests/fixtures.ts
deleted file mode 100644
index da5649f..0000000
--- a/pr-preview/pr-4/tests/fixtures.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { test as baseTest } from '@playwright/test';
-import { MRZScannerPage } from './pages/MRZScannerPage';
-
-type MyFixtures = {
-  mrzScannerPage: MRZScannerPage;
-};
-
-export const test = baseTest.extend<MyFixtures>({
-  
-  mrzScannerPage: async ({ page }, use) => {
-    const mrzScannerPage = new MRZScannerPage(page);
-    await use(mrzScannerPage);
-  },
-  
-});
-
-export { expect } from '@playwright/test';
diff --git a/pr-preview/pr-4/tests/unittest/index.test.ts b/pr-preview/pr-4/tests/unittest/index.test.ts
deleted file mode 100644
index 1423cb7..0000000
--- a/pr-preview/pr-4/tests/unittest/index.test.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-/*
-1. Test whether the license is valid
-2. Test whether the cameraEnhancer is initialized and working properly
-3. Test whether the cameraView is initialized and working properly
-4. Test whether the cvRouter is initialized and working properly
-5. Test whether the result can be populated and copied //TODO
-*/
-
-const URL = '/index.html';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto(URL);
-  await page.click('.start-btn');
-});
-
-test('License is valid', async ({ page }) => {
-  // Check if the demo project is using the correct license
-  const useDemoLicense = await page.evaluate(() => {
-    return Dynamsoft.License.LicenseManager.license == 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
-  });
-  
-  expect(useDemoLicense).toBeTruthy();
-});
-
-test('CameraEnhancer is initialized and working', async ({ page }) => {
-  
-  // Check if camera view is displayed
-  const cameraView = await page.locator('.dce-video-container');
-  await expect(cameraView).toBeVisible();
-  const hasCameraEnhancer = await page.evaluate(() => {
-    return typeof cameraEnhancer !== undefined;
-  });
-  expect(hasCameraEnhancer).toBeTruthy();
-});
-
-test('CameraView is initialized and working', async ({ page }) => {
-  
-  // Check if scan region is displayed
-  const scanRegion = await page.locator('.dce-scanarea');
-  await expect(scanRegion).toBeVisible();
-});
-
-test('CVRouter is initialized and working', async ({ page }) => {
-  const hasCVRouter = await page.evaluate(() => {
-    return cvRouter !== undefined;
-  });
-  expect(hasCVRouter).toBeTruthy();
-
-});