Before I Say, I Can Test
In this post, I'm demonstrating how I approached my testing and debugged an inconsistent behavior that was reported in the Telegram space of The Test Chat. A contest that is about to start and is hosted by The Test Chat. The title of the contest is - So You Think You Can Test? The registration is open. How to register detail is shared on the Telegram chat and other social media space of TTC.
The QR Code is shared in Telegram; asked to scan and submit the registration. Here is what I observe reading through messages in the Telegram:
- Few could scan the QR Code and could register
- A couple of members could not see the registration form as the scanning of the QR Code failed
- Requests made to share the URL of the registration form than sharing the QR Code
- Requests made to share both -- the QR Code and URL of the registration form
- The reason -- why the QR Code is shared and not the URL
- And the URL of the registration form is also shared now
What made me curious is, a member had replied that on multiple attempts to scan the QR Code using a mobile app, it did not fetch the URL. This member observed the same behavior on the web, that is, on uploading the QR Code image, it did not fetch the URL.
I see a behavior now to Test Investigate and debug to learn what's happening. With that, I have an opportunity now to say I Can Test right here on the registration procedure of So You Think You Can Test? contest.
What I did and What I Observe
It is a QR Code!
- This QR Code shared from TTC:
- Is not like other regular QR Code I usually see
- I see black background and data with yellow foreground
- I see the Finding Pattern i.e. concentric squares in an oval shape
- These two observations are prominent in this QR Code
- I installed a QR Code reader app on my phone and scanned the QR Code
- It fetches me the registration form URL; I can open the registration form
- Then I get the question -- why those testers are experiencing a problem?
- I read through their messages and observe for clues what they have left for me
- I read the words -- drag and drop
- Ah! The web browser is as well used
- This is a very useful clue to me
- I have no idea on what desktop browser, QR Code reader websites, mobile apps, and smartphones used by these testers
- I proceed now to use an online QR Code reader
- I pick these two:
- qrreader dot online
- helloacm dot com/tools/qrcode-reader/
- I uploaded the QR Code shared by TTC on these two websites
- I see the same message and in the same format on these two websites
- The message reads -- error decoding QR Code
- Per me, this is a key observation
- What makes these two web pages show the same message and in the same format?
- I analyze the network when uploading the image and for the response I receive
- In the request
- I see the Data URL used
- Protocol mentions data
- No remote address, that is no server IP to which the request is to be sent
- Another critical observation
- I see the request initiator
- The data (jpeg image) is sent in base64 format - a binary format
- I can see the preview of the QR Code
- I see the request method as GET
- This is interesting!
- Why GET and not POST?
- I see the HTTP Status Code 200
- I see just the User-Agent in the Request Headers
- In the Response
- In the Response tab, I see the message -- This request has no response data available
- I see Content-Type: image/jpeg in the Response Headers
- Fetching the URL from the QR Code is being done within the browser
- I have to just launch these pages and use the QR Code images to fetch the data out of it
- No need for internet here
- And moreover, there is no remote address at all; then why the internet is needed to upload images!
- This tells me, could be JavaScript is doing the job here!
- It is a key learning from my so far observations
Diving into Console and JavaScript
- For qareader dot online, I see:
- Couldn't find enough finder patterns (found 0)
- For helloacm dot com/tools/qrcode-reader/, I see
- Couldn't find enough finder patterns
- When the image is about to be decoded
- It is taken as a 2D image
- The height and width of the QR Code image are collected and calculated
- The check is made if they are appropriate to consume and process further
- In the process function,
- The QR Code is converted to a grayscale image
- The grayscale is the usual one that we see around us in black-and-white
- Now trying to look for Finding Patterns,
- Looks like it is executing the condition if (h < 3)
- So the message in console -- Couldn't find enough finder patterns
- As a result, the decoding of QR is returning message -- error decoding QR Code
Testing the Tests
Understanding the QR Code
- https://www.explainthatstuff.com/how-data-matrix-codes-work.html
- http://qrcode.meetheed.com/question14.php
- http://www.keepautomation.com/tips/qr_code/functions_of_qr_code_function_patterns.html.
So, What's the Problem Here?
- The QR Code from TTC has data (shape and color) that cannot be processed by this JavaScript?
- Not very sure!
- But the so far analysis says yes with the code read
- Need to generate more customized QR Code
- If possible include Finding Patterns in different geometric shapes -- primary suspect
- Then rule out or point in if that's the problem source
- If this is not the problem, then
- The dimensions of the QR Code image file is the problem?
- For now, this is the second suspect
- But, the read JavaScript code does not say this