Automated Testing

Automated testing of barcode scanning apps is not straightforward because of the camera requirement. The camera is a physical sensor exposed as a shared resource to the browser, with access gated by user-granted permissions.

There are multiple approaches to test webs apps that scan barcodes from the camera:

Test the barcode scanning workflow end-to-end using a fake camera stream. This is the most consequent approach but may be difficult to set up depending on your environment.
Inject or simulate a successfully scanned barcode: this typically requires dedicated code in your app to support running under test.
Simulating manual entry of the barcode value by the user. This aligns with our recommendation to always provide manual entry as a fallback in case barcode scanning is not possible.

Injecting a Fake Camera Stream using Playwright

We recommend using Playwright for automated end-to-end testing of web applications.

Playwright can be configured to start Chrome using special launch arguments that provide a fake video stream to the browser.

For more information on this approach, please refer to the article Automated Testing of Barcode Scanning Apps with Playwright on our blog.

Example: End-to-end testing of an ISBN Barcode Scan

The snippet below contains a Playwright script that tests scanning an ISBN barcode with our Demo App.

import {test, expect, chromium} from '@playwright/test';

test('Scans EAN/UPC Book Barcode', async () => {
  const browser = await chromium.launch({
    args: [
      "--use-fake-ui-for-media-stream",
      "--use-fake-device-for-media-stream",
      "--use-file-for-fake-video-capture=./test-videos/book_barcode.mjpeg",
    ]
  });
  const context = await browser.newContext({});
  const page = await context.newPage();

  // check start page is displayed
  await page.goto('https://demo.strich.io/');

  // select 1D retail barcodes and start scanning
  await page.getByText("1D Retail").click();
  await page.getByText("START SCANNING").click();

  // fake video stream starts, barcode should be read
  await expect(page.getByText('9781292223049')).toBeVisible();

  // clean up
  await context.close();
});

As the SDK considers the resolution of the video, the size of the host element and the region of interest defined (if specified), you will get the best results if the video file resolution has the same or similar aspect ratio as the browser viewport.

You can set a device from a list of built-in devices that Playwright supports on the test, or set a specific viewport directly. In most cases, adding a mobile browser project to your playwright.config.ts file should be enough.

Example: Mobile Browser Project in Playwright Configuration

export default defineConfig({
  testDir: './tests', 
  // ... other properties omitted...
  projects: [
    {
      name: 'Mobile Chrome', // use mobile viewport
      use: {...devices['Pixel 7']},
    }
  ]
});
``

Last modified: 31 March 2025