Automated Testing QR Codes in Selenium WebDriver

How to test QR Codes on a web page in automated test scripts

A repost of my daughter’s article with permission, add it here for my blog subscribers. This is also included in my “How to in Selenium WebDriver” series.

QR Codes are a barcode that can be scanned with a camera app or dedicated scanner. QR Codes are becoming a more and more common method of link sharing, but how can we test that the QR Code you generated goes where it needs to go?

This tutorial will show you how to verify that a valid QR Code was created and it successfully goes to a particular URL.

Tutorial Website

The WhenWise app (created by me) has a QR Code for directly booking an appointment with a resource. The below QR Code is an example on a server running locally for testing purposes (if you try to scan it, it won’t work).

Test Design

1. Save the QR Code image
   Selenium 4 supports saving an individual page element to an image. Typically, generated QR codes are in SVG format, not conventional bitmap images formats such as PNG.
2. Read the QR code
   We need to decode the QR code to text. This can be achieved from a library.
   (The availability of many libraries is one great benefit of writing automated tests in a powerful scripting language such as Ruby.)
3. Verify the URL
   Determine the expected URL first, then compare it with the decoded text from the QR code.

I used raw Selenium WebDriver with RSpec syntax for automated test scripts (AgileWay Test Automation Formula).

Prerequisite

I use qrio, a QR code decoder library in pure Ruby. Install it on your command line with:

gem install qrio

We can use QRio to extract the text from a QR Code image. Example usage from the documentation is:

require 'qrio'
qr_decoded = Qrio::Qr.load("qr-code.png").qr.text

Complete Test Script