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
I think there are 2 common use cases that related to QR Code/Barcode testing
- 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.
- 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.
Let’s create an example tests
I developed a simple website that render QR Code and Barcode in image <img>
like this
- 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.
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: