banner image 1 banner image 2

WebdriverIO Browserstack -Automating Barcode Scanner

January 20, 2023
3 mins
command
blog-img 1
Pravin Kumar
Author

This article will explain how we have automated barcode scanning features using BrowserStack and WebdriverIO iOS App Automation.

By Pravin Kumar — If you automate a mess, you get an automated mess


When we had the barcode scanning feature implemented in our application there was a lot of verification that has to be done manually, which is a very tiring process. Later we found that this can be done via the BrowserStack app automated session.

How does BrowserStack QR Scanner work?

BrowserStack enables you to test image capture and QR/Bar code scanning from BrowserStack’s mobile device camera. If your mobile app has features, like check scanning, profile image capture, and QR/Bar code scanning, you can use this feature to automate the testing of such a feature in your app.

Browserstack QR Scanner

Preparing the test data beforehand

For the Browserstack to detect barcode correctly, the test data for the barcode should be created such that the barcode image can fit into the scanning area as shown below.

Sample Barcode gave by Browserstack

Uploading QR/Barcode image to Browserstack

The image can be uploaded using BrowserStack API with the help of the curl command. Supported formats for images are JPG, JPEG, PNG, and the max file size allowed is 10 MB. We can also use custom_id to retrieve the image uploaded and can use it later in the script.

https://gist.github.com/markepvinrap/5ee9e36f9d68516d6aff1d33b4ba2f30#file-upload-sh

Once we hit the above curl command we will get the response with the media URL and include custom_id as well.

https://gist.github.com/markepvinrap/d4342e998d27f729b543c113190590e9#file-media-json

Enabling camera injection using Appium capabilities

Enabling enableCameraImageInjection: “true” in the desired capabilities ensures your app undergoes Sensor Instrumentation, a process using which BrowserStack supports an app’s interaction with different mobile sensors, such as a Camera or bio metric authentication.

https://gist.github.com/markepvinrap/51ca446066ed550aabdbcef6d8682798#file-caps-js

Upload the Scanner image before the Camera is triggered in the application

By BrowserStack’s custom execute the command with the action cameraImageInjection as shown in the following code snippets. Ensure the image is injected before the Camera is triggered in the app as the Camera only captures the last injected image.

https://gist.github.com/markepvinrap/645e5e1c0c2f785b13484b720b6ac669#file-scanner-js

Now add logic to click the camera button in our mobile application after the uploaded scanner image script. The application will automatically scan the last uploaded image to the BrowserStack cloud.

Scanner flow in Application

References :

[embed]https://webdriver.io/docs/browserstack-service[/embed][embed]https://webdriver.io/docs/browserstack-service[/embed]

Meet the team!

Author

Pravin Kumar

Editor

Seema Jain


We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to careers@caratlane.com!
blog-img 2

Discussions

blog-img 3
5 mins
May 17, 2023
Sharing Data Between Controllers: Best Practices S...

This article will help you to understand the diffe

By Naveen C

blog-img 3
5 mins
March 21, 2023
Understanding Auto Layout and Constraints in Swift...

This article gives you an easy way of understandin

By Ramasamy P