Test image injection with XCUITest on BrowserStack

Use BrowserStack’s Image Injection to simulate a device camera in automated tests.

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.

Prerequisites

• Make sure you have a valid BrowserStack username and access key.
• Make sure you have the app file (.ipa file) and your XCUI testsuite having the test cases.

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 app to BrowserStack

To upload your app to BrowserStack use the following cURL command:

curl -u "YOUR_USERNAME:YOUR_ACCESS_KEY" \
-X POST "<https://api-cloud.browserstack.com/app-automate/xcuitest/v2/app>" \
-F "file=@/path/to/app/file/app-debug.ipa"

Here is a sample response:

{
    "app_name": "app-debug.ipa",
    "app_url": "bs://j3c874f21852ba00000a0fdc00f00000000c0ba0",
    "app_version": "1.0",
    "app_id": "j3c874f21852ba57957a3fdc33f47514288c4ba4",
    "uploaded_at": "2022-05-13 06:16:49 UTC",
    "expiry": "2022-06-12 06:16:49 UTC"
}

Configure XCUITest for Image Injection on BrowserStack

To integrate your XCUITest test suite with BrowserStack, find the BrowserStackTestHelper.framework file and drag and drop it into the UI Test target folder in Xcode. Make sure it is listed under Frameworks and Libraries in the Build Phases section of the UI Test target. To do this, follow these steps:

import BrowserStackTestHelper

let injector: InjectorProtocol = createInstance()

injector.injectImage(imageName: "image.png" ){ response in
    print(response.toDictionary())
    // add code to verify response if required
}

Upload modified XCUI test suite

To upload your XCUI test suite (.zip file), use the following cURL command:

curl -u "YOUR_USERNAME:YOUR_ACCESS_KEY" \
-X POST "<https://api-cloud.browserstack.com/app-automate/xcuitest/v2/test-suite>" \
-F "file=@/path/to/app/file/XCUITest.zip"

Here is a sample response:

{
    "test_suite_name": "XCUITest.zip",
    "test_suite_url": "bs://f7c874f21852ba00000a0fdc00f00000000c0ba0",
    "test_suite_id": "f7c874f21852ba00000a0fdc00f00000000c0ba0",
    "uploaded_at": "2022-05-13 06:17:50 UTC",
    "expiry": "2022-06-12 06:17:50 UTC",
    "framework": "xcuitest"
}

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

Inject the image using the following Set the enableCameraImageInjection capability to true 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.

Use the following cURL command to start the test execution by enabling the enableCameraImageInjection capability and adding cameraInjectionMedia.cameraInjectionMedia is an array of lists, where each list contains a media file:

curl -u "YOUR_USERNAME:YOUR_ACCESS_KEY" \
-X POST "https://api-cloud.browserstack.com/app-automate/xcuitest/v2/build" \
-d '{
   "app": "bs://j3c874f21852ba57957a3fdc00f00000000c0ba0", 
   "testSuite": "bs://j3c874f21852ba57957a3fdc00f00000000c0ba0", 
   "devices": ["iPhone 14 Pro-16.3"],
   "resignApp": "true",
   "enableCameraImageInjection": "true",
   "cameraInjectionMedia": [
       "media://7717712ffda8581f04455427b64ec581e35222a9",
       "media://cf8dab230c8781cfc2eb73a9aec2f24c9ea9202e"
   ],
   }' \
-H "Content-Type: application/json"

Here is a sample response:

{
    "message": "Success",
    "build_id": "4d2b4deb810af077d5aed98f000bfdd0e00f00c0"
}

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.

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 iOS apps
• Cross-platform iOS apps