feat: Initialize Playwright testing (#12)

Co-authored-by: Eugene Yu <Eugene.Yu@dynamsoft.com>

Author: Felix-Dynamsoft

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm i
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -12,6 +12,7 @@ CaptureImageModal
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+CaptureImageModal
 
 # Editor directories and files
 .idea
@@ -26,7 +27,6 @@ __pycache__
 ~~*
 --*
 ==*
-package-lock.json
 yarn.lock
 .git
 .npmrc
@@ -35,12 +35,14 @@ yarn.lock
 /*.exe
 /*.jar
 /*.md
-/*.json
 /*.js
 /*.txt
 /.gitattributes
 /.*ignore
 
 !bower.json
 !composer.json
-!package.js
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -10,6 +10,33 @@
 
 You can request a 30-day trial license via the [Request a Trial License](https://www.dynamsoft.com/customer/license/trialLicense/?product=cvs&utm_source=github&package=js) link.
 
+## Testing
+
+This repository also includes end-to-end tests for each samples using [Playwright](https://playwright.dev/). The tests are organized per sample, and the setup supports cross-browser testing across Chromium, Firefox, and WebKit.
+
+### Installation
+
+``` bash
+npm install
+npx playwright install --with-deps # installs playwright browsers
+```
+
+### Running Tests
+
+```bash
+npx playwright test # or `npm test`
+```
+
+### View Test Reports
+
+```bas
+npx playwright show-report
+```
+
+### CI Integration
+
+This repository is set up to run tests automatically on each commit via CI Github Actions. To learn more, visit https://playwright.dev/docs/ci-intro.
+
 ## Contact Us
 
 [https://www.dynamsoft.com/company/contact/](https://www.dynamsoft.com/company/contact/?product=cvs&utm_source=github&package=js)

VINScanner/tests/index.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+
+test("load local page", async ({ page }) => {
+  await page.goto("/VINScanner/index.html");
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(await page.title()).toContain("VIN Scanner");
+});

VINScanner/tests/minimum-elements.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+
+test("load local page", async ({ page }) => {
+  await page.goto("/VINScanner/minimum-elements.html");
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(await page.title()).toContain("VIN Scanner - Minimum elements");
+});