QR Code/Barcode Testing with Cypress

Hello! As you may know, QR Code and Barcode are now commonly used in modern web applications. For example if you want to purchase something on the website, the app may allow you to scan QR Code or Barcode as a payment method. Or for the ticketing system, the app may reads QR Code to get user’s identity to check an ownership of the ticket.

In terms of system testing perspective, how do you test the QR Code/Barcode displaying on your website ? In this article, I’ll introduce the simple way to test QR Code/Barcode on your web application using Cypress.

QR Code/Barcode Testing Practices

Photo by Kampus Production: https://www.pexels.com/photo/person-taking-photo-of-the-qr-code-7289717/

I think there are 2 common use cases that related to QR Code/Barcode testing

1. The Web Application generates QR Code/Barcode and allows user to scan the code via their smartphones, then users can use data in that QR Code with other systems. For example, users scan a QR Code to get payment url and redirect to banking system.
2. The Web Applications generates unique QR Code/Barcode for each user to use it as user’s identification data. We often see this use case in the ticketing system.

So basically if we can read the data in the QR Code/Barcode and verify if the data is correct. I think this is fair enough for automation testing. We don’t have to use the camera on smartphone to scan it for real, right ?

QR Code/Barcode Testing with Cypress

Since we write a Cypress tests in Javascript/TypeScript. So you can use any QR Code/Barcode readers that supported in Javascript to decode its data for your tests.

In this article, I’d like to introduce one of the library that can decode the QR Code/Barcode in many formats. It is zxing-js

zxing or “Zebra-Crossing” is an open source library that can process QR Code/Barcode in many formats using an image processing. The library is originally developed in Java and ports to many programming languages including Javascript.

You can see supported QR Code/Barcode formats (in JS) below.

For more information: https://github.com/zxing-js/library

Let’s create an example tests

I developed a simple website that render QR Code and Barcode in image <img> like this

Example QR Code/Barcode Web App

1. Install zxing-js library

Firstly, we have to install zxing-js library into our Cypress project. There are 2 required libraries for QR Code/Barcode readers which are: @zxing/library and @zxing/browser

sh$ npm install cypress @zxing/library @zxing/browser

2. Writing tests to check QR Code/Barcode data with Cypress

There is a BrowserMultiFormatReader module in zxing-js that you can use it to decode QR Code/Barcode data and verify it with Cypress. In this example, I’ll use the decodeFromElement() API to decode data from HTMLImageElement directly. You can see an example code below.

In this test case, I decode the QR Code data after selecting the <img> element via cy.get() command. After that, I create a HTMLImageElement, set its necessary properties like src, width, height and crossOrigin. Then passing that element to BrowserMultiFormatReader instance to get the data. After getting the data, verify it with Cypress Assertions.

As you can see, the test code looks pretty much too long, it has to do many steps. To improve this, I created a Cypress Custom Command to decode any QR Code/Barcode like this

The test code looks pretty much shorter, more readable and understandable. Since reader.decodeFromImageElement() returns Promise so that I can use Cypress Assertions to call it in Chainable way. So we can check the text property in the DecodedResult using .should() command.

Simpler way to test QR Code/Barcode using Cypress Custom Command

So in this example, we can use Cypress to test QR Code/Barcode rendering on your website with the same .readCode() command. The command is generic and reusable for other tests.

Summary

I hope this article may help you to test QR Code/Barcode or any code rendering on your web application. With Cypress and zxing-js, it makes your testing better than ever. Happy Testing!

References:

GitHub - zxing-js/browser: ZXing for JS's browser layer with decoding implementations for browser.

Custom Commands | Cypress Documentation