Playwright test - Initial commit

.github/workflows/main.yml

@@ -15,6 +15,8 @@ jobs:
 
     # The type of runner that the job will run on
     runs-on: self-hosted
+    env:
+      ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION: true
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:

.github/workflows/playwright.yml

@@ -0,0 +1,37 @@
+name: Playwright Tests
+on:
+  push:
+    branches: 
+      - main
+  pull_request:
+    branches: 
+      - main    
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  test:
+    env:
+      HOME: /root
+    name: 'Playwright Tests'
+    runs-on: ubuntu-latest
+    container: 
+      image: mcr.microsoft.com/playwright:v1.46.1-jammy
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies (clean install)
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm test
+    - name: Upload test results
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report
+        retention-days: 30

.github/workflows/preview.yml

@@ -0,0 +1,26 @@
+# .github/workflows/deploy.yml
+name: Deploy PR previews
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Deploy PR Preview
+        uses: rossjrw/[email protected]
+        with:
+          token: ${{ secrets.PREVIEW_TOKEN }}
+          preview-branch: gh-pages
+          source-dir: .
+          umbrella-dir: pr-preview
+          action: auto

.gitignore

@@ -20,6 +20,7 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+.vs
 
 __pycache__
 ~~*
@@ -42,4 +43,8 @@ yarn.lock
 
 !bower.json
 !composer.json
-!package.js
+!package.js
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -2,13 +2,20 @@
 
 This repository contains multiple samples that demonstrates how to use the [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/?utm_source=sampleReadme) for creating web-based barcode scanning applications.
 
+## Get the Code
+
+Since the repository has a lot of history, it is slow to clone directly. Please download the [zip](https://github.com/Dynamsoft/barcode-reader-javascript-samples/archive/refs/heads/main.zip)/[tar.gz](https://github.com/Dynamsoft/barcode-reader-javascript-samples/archive/refs/heads/main.tar.gz), or use the `--depth 1` to clone the code.
+```git
+git clone https://github.com/Dynamsoft/barcode-reader-javascript-samples.git --depth 1
+```
+
 ## Request a trial license
 
-A default license is included which allows you to test the sample apps for up to 24 hours. You can [request a trial license](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=sampleReadme) via Dynamsoft customer portal to evaluate further.
+A default license is included which allows you to test the sample apps for up to 24 hours. You can [request a 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=sampleReadme) via Dynamsoft website to evaluate further.
 
 ## Documentation
 
-For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/programming/javascript/?ver=10.0.21&utm_source=sampleReadme).
+For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/programming/javascript/?ver=10.4.2000&utm_source=sampleReadme).
 
 ## Support
 
@@ -22,10 +29,11 @@ Get the basic features of the library working with plain/native JavaScript or wi
 
 * [**Hello World**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript.
 * [**Read an Image**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/read-an-image.html?utm_source=sampleReadme): Decode barcodes from images in mobile album or desktop file system.
-* [**Hello World in Angular**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/angular/dist/angular?utm_source=sampleReadme): Read barcodes from camera and images in an Angular application.
-* [**Hello World in React**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/react/build/?utm_source=sampleReadme): Read barcodes from camera and images in a React application.
-* [**Hello World in React using Hooks**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/react-hooks/build/?utm_source=sampleReadme): Read barcodes from camera and images in a React application and use the Hooks charactor of React.
-* [**Hello World in Vue**](https://demo.dynamsoft.com/samples/dbr/js/hello-world/vue/dist/?utm_source=sampleReadme): Read barcodes from camera and images in a Vue 3 application.
+* [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/angular#readme): Read barcodes from camera and images in an Angular application.
+* [**Hello World in Blazor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/blazor#readme): Read barcodes from camera and images in a Blazor application.
+* [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react#readme): Read barcodes from camera and images in a React application.
+* [**Hello World in React using Hooks**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react-hooks#readme): Read barcodes from camera and images in a React application and use the Hooks charactor of React.
+* [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/vue#readme): Read barcodes from camera and images in a Vue 3 application.
 * [**Hello World in Next.js**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/next#readme): Read barcodes from camera and images in a Next.js application.
 * [**Hello World in Nuxt**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/nuxt#readme): Read barcodes from camera and images in a Nuxt application.
 * [**Hello World in Electron**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/electron#readme): Read barcodes from camera and images in a Electron application.
@@ -37,8 +45,9 @@ Get the basic features of the library working with plain/native JavaScript or wi
 ### Use Cases
 
 * [**Read Video and Fill a Form**](https://demo.dynamsoft.com/samples/dbr/js/use-case/fill-a-form-with-barcode-reading.html?utm_source=sampleReadme): Read barcodes to fill a form.
-* [**Read a Driver's License**](https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license.html?utm_source=sampleReadme): Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it.
+* [**Read a Driver's License**](https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license/index.html?utm_source=sampleReadme): Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it.
 * [**Show Result Texts on the Video**](https://demo.dynamsoft.com/samples/dbr/js/use-case/show-result-texts-on-the-video.html?utm_source=sampleReadme): Read barcodes via camera and show result texts on the video.
+* [**Locate an Item with Barcode**](https://demo.dynamsoft.com/samples/dbr/js/use-case/locate-an-item-with-barcode/index.html?utm_source=sampleReadme): Find a specific item in a large collection by scanning its unique barcode
 
 ### Others
 

hello-world/README.md

@@ -1,6 +1,6 @@
 # The Hello World Sample Set
 
-As you have already gone through the [user guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10#getting-started---hello-world), you may have come across some basic "Hello World" code that can help you create a simple web application using our SDK quickly.
+As you have already gone through the [user guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.4.2000#getting-started---hello-world), you may have come across some basic "Hello World" code that can help you create a simple web application using our SDK quickly.
 
 In this set of samples, we will revisit the "Hello World" code and show how to implement it using some popular frameworks, such as Angular, React, and Vue.