Test camera image capture and QR/barcode scanning

BrowserStack enables you to test image capture and QR/Bar code scanning from BrowserStack’s mobile device camera. If your mobile app has features, such as 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.

In this guide, you will learn about :

1. How BrowserStack enables camera testing
2. How to test Camera image capture in an AppAutomate session
3. How to test QR/Barcode scanning in an AppAutomate session
4. Frequently Asked Questions (FAQs)

1. How BrowserStack enables camera testing

BrowserStack supports an app’s interaction with different mobile sensors, such as a Camera or biometric authentication, using Sensor Instrumentation. Sensor Instrumentation is the process in which, if Camera Image Injection is enabled for the session, we inject BrowserStack’s Camera code module into the app. This code module mocks or overrides iOS SDK or Android SDK Camera APIs used by the app.

2. Test camera image capture in an AppAutomate session

Consider the example of a banking app in the following image that accepts the image capture of the front and back of a physical check. This is a common use case in modern banking applications that lets customers deposit their physical check using pictures of the check. To test such a use case, upload the image to our cloud, set the appium capability, and then inject the image just before the click camera button event occurs in the script.

Testing the camera image capture involves:

• Learning about supported APIs
• Uploading the image
• Setting the Camera Image Injection capability
• Injecting the uploaded image

2.1 Learn about supported APIs & devices

Camera image injection is supported for the following Camera APIs. Check with your app development team to get more details about the Camera APIs your app uses.

2.2 Upload desired image to BrowserStack

Upload your desired image to BrowserStack using the following cURL command. Supported formats for images are JPG, JPEG, PNG, and the max file size allowed is 10 MB.

    curl -u "YOUR_USERNAME:YOUR_ACCESS_KEY" \
    -X POST "https://api-cloud.browserstack.com/app-automate/upload-media" \
    -F "file=@/path/to/media/file/<your_image>.png" \
    -F "custom_id=SampleMedia"

The following image shows the sample response that includes the media ID to be set in the image_url used later in the test script.

{"media_url":"media://02b3466cd0b5b4825d925eb1c69f7d901890b136","custom_id":"SampleMedia","shareable_id”:”<username>/SampleMedia"}

2.3 Enable Camera Image Injection in the Appium session

Enable Camera Image Injection capability to ensure your app undergoes Sensor Instrumentation, a process using which BrowserStack supports an app’s interaction with different mobile sensors, such as Camera or biometric authentication.

DesiredCapabilities capabilities = new DesiredCapabilities();
HashMap<String, Object> browserstackOptions = new HashMap<String, Object>();
browserstackOptions.put("enableCameraImageInjection", "true");

var capabilities = {
  	'bstack:options' : {
  		"enableCameraImageInjection" : "true",
  	},
}

desired_cap = {
  	'bstack:options' : {
  		"enableCameraImageInjection" : "true",
  	},
}

capabilities = {
    'bstack:options' => {
        "enableCameraImageInjection" => "true",
    },
}

AppiumOptions capabilities = new AppiumOptions();
Dictionary<string, object> browserstackOptions = new Dictionary<string, object>();
browserstackOptions.Add("enableCameraImageInjection", "true");

DesiredCapabilities desiredCapabilities = new DesiredCapabilities();
desiredCapabilities.setCapability("browserstack.enableCameraImageInjection", "true");

var capabilities = {
    "browserstack.enableCameraImageInjection" : "true"
}

desired_cap = {
	"browserstack.enableCameraImageInjection" : "true"
}

desired_caps = {
    "browserstack.enableCameraImageInjection" => "true"
}

DesiredCapabilities capability = new DesiredCapabilities();
desiredCapabilities.SetCapability("browserstack.enableCameraImageInjection", "true");

2.4 Inject the uploaded image before Camera is triggered in the app

Inject the uploaded image using BrowserStack’s custom executor 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.

JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {\"imageUrl\" : \"media://<id>\"}}")

await driver.execute("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
  \"imageUrl\" : \"media://<id>\"
}}”)

driver.execute_script("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}}”)

@driver.execute_script("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}}”)

((IJavaScriptExecutor)driver).ExecuteScript("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": { \"imageUrl\" : \"media://<id>\"}}");

2.5 Trigger Camera in the app & take a photo

Add the logic to click the Camera button in the mobile app after the logic to inject the uploaded image is added in the script. The image captured from the Camera is the last injected image.

3. Test QR/Barcode scanning in an AppAutomate session

Consider the example of a banking app in the following image that requests you to scan the QR code with an emabedded URL to complete your identity verification. This is a common use case where mobile applications might embed URLs in QR codes, payment applications might embed payee information, or simply a contact information card. To test this use case, upload the image to our cloud, set the appium capability, and then inject the QR code image just before the click camera button event occurs in the script.

Testing the barcode scanning involves:

• Learning about supported APIs
• Uploading the QR/barcode image
• Setting the Camera Image Injection capability
• Injecting the uploaded image

3.1 Learn about Supported APIs

QR/barcode image injection is supported for the following APIs. Check with your app development team to get more details about the barcode APIs your app uses.

3.2 Upload desired QR/Barcode image to BrowserStack

Upload your desired QR/Barcode to BrowserStack using the following cURL command. Supported formats for images are JPG, JPEG, PNG, and the max file size allowed is 10 MB.

    curl -u "YOUR_USERNAME:YOUR_ACCESS_KEY" \
    -X POST "https://api-cloud.browserstack.com/app-automate/upload-media" \
    -F "file=@/path/to/media/file/<your_image>.png" \
    -F "custom_id=SampleMedia"

The following image shows the sample response that includes the media ID to be set in the image_url used later in the test script.

{"media_url":"media://02b3466cd0b5b4825d925eb1c69f7d901890b136","custom_id":"SampleMedia","shareable_id”:”<username>/SampleMedia"}

For your test to successfully complete, ensure that the QR/barcode image has the appropriate whitespace padding. You can use the following sample barcode or QR code to test the QR/barcode injection feature.

Sample barcode	Sample QR code

3.3 Enable Camera Image Injection in the Appium session

Enable Camera Image Injection capability to ensure your app undergoes Sensor Instrumentation, a process using which BrowserStack supports an app’s interaction with different mobile sensors, such as Camera or biometric authentication.

DesiredCapabilities capabilities = new DesiredCapabilities();
HashMap<String, Object> browserstackOptions = new HashMap<String, Object>();
browserstackOptions.put("enableCameraImageInjection", "true");

var capabilities = {
  	'bstack:options' : {
  		"enableCameraImageInjection" : "true",
  	},
}

desired_cap = {
  	'bstack:options' : {
  		"enableCameraImageInjection" : "true",
  	},
}

capabilities = {
    'bstack:options' => {
        "enableCameraImageInjection" => "true",
    },
}

AppiumOptions capabilities = new AppiumOptions();
Dictionary<string, object> browserstackOptions = new Dictionary<string, object>();
browserstackOptions.Add("enableCameraImageInjection", "true");

DesiredCapabilities desiredCapabilities = new DesiredCapabilities();
desiredCapabilities.setCapability("browserstack.enableCameraImageInjection", "true");

var capabilities = {
    "browserstack.enableCameraImageInjection" : "true"
}

desired_cap = {
	"browserstack.enableCameraImageInjection" : "true"
}

desired_caps = {
    "browserstack.enableCameraImageInjection" => "true"
}

DesiredCapabilities capability = new DesiredCapabilities();
desiredCapabilities.SetCapability("browserstack.enableCameraImageInjection", "true");

3.4 Inject the uploaded QR/Barcode image before Camera is triggered in the app

Inject the uploaded QR/Barcode using BrowserStack’s custom executor with action cameraImageInjection as shown in the following code snippet. Ensure that the QR/Barcode is injected before the Camera is triggered in the app as the camera only captures the last injected image.

JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {\"imageUrl\" : \"media://<id>\"}}")

await driver.execute("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
  \"imageUrl\" : \"media://<id>\"
}}”)

driver.execute_script("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}}”)

@driver.execute_script("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": {
    \"imageUrl\" : \"media://<id>\"
}}”)

((IJavaScriptExecutor)driver).ExecuteScript("browserstack_executor: {\"action\":\"cameraImageInjection\", \"arguments\": { \"imageUrl\" : \"media://<id>\"}}");

3.5 Trigger Camera in the app to start QR/Barcode scanning

Add the logic to click the Camera button in the mobile app after the inject uploaded image logic. The app automatically starts scanning the last injected QR/Barcode.

4. Frequently Asked Questions (FAQs)

1. Do we need to make any changes to the app code?

You do not need to make any changes to the app code.

2. What kind of apps are supported?

BrowserStack supports the following apps:

• Native Android and iOS apps
• Cross-platform iOS apps

Related topics

Check this page for a list of various JavaScript Executors that BrowserStack offers.

Need some help?

If you have any queries, get in touch with us.