I Can Test - Debugging an Inconsistent Behavior

 

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:

1. Few could scan the QR Code and could register
2. A couple of members could not see the registration form as the scanning of the QR Code failed  
3. Requests made to share the URL of the registration form than sharing the QR Code
4. Requests made to share both -- the QR Code and URL of the registration form
5. The reason -- why the QR Code is shared and not the URL
6. 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

As I see no remote address for this request, I turned off the network.  I uploaded the QR Code image; I see the data URL fired.  Further, I observe this request is exactly similar to the one I see with the network.  So I learn, 

1. Fetching the URL from the QR Code is being done within the browser
2. 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!
3. This tells me, could be JavaScript is doing the job here!
• It is a key learning from my so far observations

Now, I look at the Console to see if I can find more hints to my test investigation.

Diving into Console and JavaScript

In the Console, 

1. For qareader dot online, I see:
• Couldn't find enough finder patterns (found 0)
2. For helloacm dot com/tools/qrcode-reader/, I see
• Couldn't find enough finder patterns

Pic: Message on qrreader dot com

Pic: Message on helloacm dot com

This is the source of the problem -- the QR Code could not be decoded.  If the Finder Patterns are not identifiable in the QR Code, then data in the QR Code cannot be decoded.  I see "found 0" in the console log.

But, why the Finder Patterns are not identified in this case though it is seen in an image by the human eyes?  This is the start of the actual test investigation and debugging for the behavior experienced.

Further, I learn both these websites make use of the same JavaScript -- llqrcode.js.  Another key learning!  I see this JavaScript is copyrighted to Lazar Laszlo.  And, I found another website that scans the QR Code image -- webqr dot com.  I experience the same behavior on uploading the TTC QR Code here as well, that is the message -- error decoding QR Code.  The same text and in the same format!

Pic: Message on webqr dot com

Reading through the below JavaScript, I make few more observations.

Pic: llqrcode.js

I learn:

1. 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
2. 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
3. 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

This information tells me, there is something to do with the QR Code shared by the TTC.  But, how come it works on smartphone apps?  

I have not attempted to fetch the code from the smartphone app and analyze it at this point in time of testing.  I make an assumption -- could be the program used in the smartphone app can identify the Finder Patterns irrespective of the color and shape in the QR Code.

I had made an observation documented in the beginning -- the Finder Pattern is in oval shape and not in the concentric square shape.

Testing the Tests

I picked the QR Code image shared by the TTC and converted it to a grayscale image.  I used this grayscale image in the above said three websites.  I see the same message -- error decoding QR Code.

I picked the registration form URL that I had got by scanning QR Code using the mobile app.  I generated the QR Code and uploaded it to these three websites.  I see the QR Code decoded successfully now; I see the Google Form URL to register.  Note that, if I turn off the internet and use a valid QR Code, I see the URL.

This tells me, there is no problem with Google Form URL accessibility or encoding or decoding.  It is to do with the QR Code shared by TTC.

Pic: QR Code shared by TTC

Pic: Grayscale QR Code generated by me

Pic: QR Code generated by me with Google Form URL

Pic: QR Code on qrreader dot online on uploading TTC QR Code

Pic: QR Code on webqr dot com on uploading TTC QR Code

The dimension and size of the QR Code image file shared by TTC are not the same as the one generated by JavaScript.  I see pixelation and a bit of distortion in the QR Code generated by JavaScript using TTC QR Code.  

Look at the Pattern Finders in the QR Code from JavaScript; compare it with the QR Code shared by the TTC.  They don't look the same.

Understanding the QR Code

QR stands for Quick Response.  QR Code was pioneered by Masahiro Hara at Japanese company Denso-Wave in 1990.  QR code has different sections and Finding Patterns is one.

I find information on these web pages useful:

• 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?

From the inferences I'm making from my tests so far, it looks like

1. 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
2. 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

Need to understand how the mobile app code can read it successfully.  Then figure out the differences in the mobile app code and the JavaScript referred here.

I'm stopping my testing for now.

I can test! I test!