Test camera image injection with Appium on BrowserStack

BrowserStack App Automation enables you to test image capture and QR/Bar code scanning from our mobile device camera

BrowserStack’s Image Injection simulates a device camera capturing specific images in automated tests. Use this feature to test image capture, QR scanning, and barcode recognition, automating mobile app features like check scanning and profile image capture.

How BrowserStack enables camera testing?

BrowserStack enables apps to interact with mobile sensors like cameras and biometric authentication using Sensor Instrumentation. When Camera Image Injection is enabled, BrowserStack injects its Camera code module into the app. This module overrides or mocks the camera APIs in the iOS or Android SDK that the app uses.

Test camera image capture in an App Automate 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 capability, and then inject the image just before the click camera button event occurs in the script.

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.

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"

Here is a sample response that includes the media ID to be set in the cameraInjectionMedia used later in the test script.

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

Enable Camera Image Injection in the test 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.

enableCameraImageInjection: true

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");

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>\"}}");

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>\"}}");

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.

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

See JavaScript Executors for a list of various JavaScript Executors that BrowserStack offers.