How to read QR Code content from your Mobile or Web App
Having some QR Codes to scan from your mobile and or web app is getting common nowadays. You can read to add a new contact to your phone, distribute it or even validate a financial transaction.
An approach to get the QR Code image is necessary to guarantee end-to-end (e2e) testing through an application where you need to read it.
There are two different approaches: one for the Mobile app and another one for the Web App.
We will use ZXing (zebra crossing) is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages. One supported 2D format is the QR Code.
This is the dependency we will use in the project:
<!-- https://mvnrepository.com/artifact/com.google.zxing/javase --> <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version>3.4.1</version> </dependency>
Mobile app solution
An easy solution to read the QR Code content in a mobile app is to take a screenshot from the device screen and crop it. We can send the image to Zxing to decode it.
How to read the QR Code content in the mobile app
First, as described above, we must take a screenshot of where the QR Code is. Then we need to crop the image to have only the QR Code in it. After that, we need to decode the image with Zxing to get its contents.
First, let us visualize the test.
- On line 3, we found the element which contains the QR Code image and assigns it to the
- On line 4, we took a screenshot and assign its contents as a
- On line 6, we are using the
decodeQRCodemethod sending, as parameters, the element and image (screenshot).
- On line 7, we are asserting the content returned from the
Did you notice that the
decodeQRCode uses another method
generateImage? This method uses the element dimensions to crop the QR Code from the screenshot. It’s a better approach to avoid any problem when we are reading it using Zxing.
Now we can use the
generateImage result, which is a
BufferedImage, as a parameter on
decodeQRCode. We are using here the specific Zxing classes to decode the image and return its content.
Now, we can use the UUID returned from the QR Code content to assert it. In real life, it could be a key to validate a transaction.
Where to find the code example?
You can take a look at https://github.com/eliasnogueira/appium-read-qrcode to see a complete example using Appium to interact with the mobile app.
Web App solution
In this Web App solution, we will try to mimic a real-life situation where we need to validate a transaction reading a QR Code content. Usually, it will contain a unique and temporary key to validate the transaction you are doing.
Unlike the Mobile app, we can read the QR Content getting the image from the image
src attribute. After that, we can use Zxing to decode it.
How to read the QR Code content in the web app
We first need to navigate to the page and get the content of the image src attribute.
- On line 3 we are finding the element that is the image and getting the content of the image which is the full image path (in this scenario).
- On line 6, we are using the
decodeQRcodemethod to decode it
But Zxing needs an image to read its content. So we need to transform the full image path into an image.
- On line 8, we check if the
qrCodeImagecontent contains the text
http, so we know it is an image path.
- On line 9, we are creating a BufferedImage based on the image path (URL)
- Lines 17 to 20 does the trick reading the image content and decoding it using the Zxing classes.
Back to the test, we are getting the QR code content and asserting it by the expected UUID.
Bonus: How to read the QR Code content from a Base64 string
We could have the scenario where, instead of adding the image path in the src attribute, we have an image as a Base64 string. It can happen when it’s generated dynamically.
In the code above, you can see:
- On line 12 an
- Line 13 gets the content (a Base64 string) and decodes it into a byte’s array.
- On line 14, we are conventing the byte array into a
BufferedImage. Now we can decode it using Zxing
Where to find the full code example?
You can take a look at https://github.com/eliasnogueira/selenium-read-qrcode/ to see a complete example using Selenium WebDriver interacting with the web app and get the image content.