Deploy preview for PR 4 🛫

pr-preview/pr-4/tests/pages/MRZScannerPage.ts → 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);
+  }
 }

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";

pr-preview/pr-4/tests/e2e/test-MRZScanner.spec.ts → pr-preview/pr-4/e2e/tests/MRZScanner.spec.ts

@@ -1,53 +1,40 @@
-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();
   });
 
   test("should display the correct title", async ({ mrzScannerPage }) => {
     // 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");
   });
-
 });

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: {