How to Automate a Real E2E User Flow involving App and Browser with Appium

What is a Real E2E User Flow?

You might be wondering what is meant by a real E2E user flow. Well, the answer is pretty simple. It is an end to end process flow, where the user performs a set of different functions. These set of functions are dependent on the use case and might involve an app and a browser. Such flows that involve different applications are known as multi-app-flow.

While end to end testing for a single-app-flow is fairly straightforward, which can be performed using test automation frameworks such as Protractor, NightwatchJS, etc. 

Let’s understand this with an example that is based on a customer query about automating the user flow between app and browser, also known as a multi-app-flow. 

In this example, a user needs to perform an action in the native app which triggers the opening of a browser where the flow proceeds. This can be whatever flow where you just need to switch from your app to the browser.

To demonstrate this example of real E2E multi-app-flow, perform the following steps:

1. Open the sample app and perform certain actions.
2. Navigate to a mobile browser and login to the BStackDemo website.
3. Navigate back to the sample app and perform additional actions.

There are two major components involved in automating this E2E use case.

1. A mechanism to switch to a particular App.
2. A mechanism to switch to a particular context (Native or WebView) for the App.

Before diving into code, it is noteworthy that Appium can be used with different frameworks and different coding languages. The following coding examples will use Java as a coding language. However the steps are kept generic for you might be able to translate them back into your preferred framework/coding language.

Automating a real E2E user flow on Android

In this guide, we will be using the below apps to demonstrate the end to end workflow.

Install the Wikipedia Sample App on your device/emulator. 

The installed App will be opened at the start of the test execution by providing the App Package and App Activity details in the capabilities. You can directly start performing actions on the sample app. Once the actions are completed you would need to open the Chrome Mobile App. 

You can open the Chrome Mobile App by using the below code. The Activity object would contain the details (App Package and App Activity) of the App which needs to be started. By providing the false parameter to the setStopApp method, you would ensure that the app will not restart when we trigger the startActivity method. The startActivity method will open the Chrome Mobile App.

Activity activity = new Activity(“com.android.chrome”, “com.google.android.apps.chrome.Main”);
activity.setStopApp(false);
driver.startActivity(activity);

After switching to the Chrome Mobile App, you would, at the moment, only be able to interact with the Native elements of the Chrome App. In order to use the web aspects of the mobile browser, you would need to change the context of the driver to WebView, in this case, specifically WEBVIEW_chrome. 

The driver sometimes won’t be able to get the WebView context in its first try. To have the correct context, you would need to poll for a certain duration to check if there are more than one contexts available. Once the WEBVIEW_chrome context is available, the context method will change the context to WebView and you would be able to use browser based selenium commands in the Chrome Mobile App.

driver.context(“WEBVIEW_chrome”);

To switch back to the Wikipedia Sample App, you would need to provide the Activity object (with App Package and App Activity details) and the startActivity method will switch to the App.

activity = new Activity(“org.wikipedia.alpha”, “org.wikipedia.main.MainActivity”);

activity.setStopApp(false);

driver.startActivity(activity);

Now in the Wikipedia Sample App, in order to use the App’s Native elements to perform actions, you would need to switch the context back to NATIVE_APP.

driver.context(“NATIVE_APP”);

Automating a real E2E user flow on iOS

In this guide, we will be using the below apps to demonstrate the end to end workflow.

Automating a real E2E user flow on iOS using Safari

Install the iOS Sample App on your device/simulator. The installed App will be opened at the start of the test execution by providing the Bundle ID details in the capabilities. You can directly start performing actions on the sample app. Once the actions are completed we need to open the Safari Mobile App.

Safari will not provide its WebView context in the set of context handles received by default. In order to get the WebView context, you would need to set the includeSafariInWebviews capability as true.

caps.setCapability(“includeSafariInWebviews”, true);

Also the WebView context provided for iOS apps are generic. An example of a WebView context would be WEBVIEW_76851.1 . To have the correct context, you would need to get additional details from every context that is available. To get these details, you would need to set the fullContextList capability as true.

caps.setCapability(“fullContextList”, true);

After setting the above mentioned capability, you will get detailed context details like below.

{id=NATIVE_APP}

{id=WEBVIEW_12787.1, title=, url=about:blank, bundleId=com.apple.mobilesafari}

You can open the Safari Mobile App by using the below code. The activateApp method just requires the Bundle ID of the App which needs to be launched.

driver.activateApp(“com.apple.mobilesafari”);

After switching to the Safari Mobile App, you would at the moment only be able to interact only with the Native elements of the app. In order to use the web aspects of the mobile browser, you would need to change the context of the driver to WebView. 

To have the correct context, you would need to poll for a certain duration to check if more than one contexts are available. Once that’s true, you can select the context which has Safari’s bundle ID.

for (Object context : driver.getContextHandles()) {

    Map<String, String> contextMap = (Map<String, String>) context;

    if (contextMap.getOrDefault(“bundleId”, “”).equals(“com.apple.mobilesafari”)) {

        driver.context(contextMap.get(“id”));

    }

}

To switch back to the iOS Sample App, you would need to use the activateApp method and provide the Bundle ID for the App. Now in the iOS Sample App, in order to use the App’s Native elements to perform actions, you would need to switch the context back to NATIVE_APP.

driver.activateApp(“com.browserstack.Sample-iOS”);

driver.context(“NATIVE_APP”);

Automating a real E2E user flow on iOS using Chrome

Ensure that you have Chrome Mobile App installed on your device/simulator. Install the iOS Sample App on your device/simulator. The installed App will be opened at the start of the test execution by providing the Bundle ID details in the capabilities. You can directly start performing actions on the sample app. Once the actions are completed we need to open the Chrome Mobile App.

As the WebView contexts provided for iOS apps are generic, you would need to set the fullContextList capability as true.

caps.setCapability(“fullContextList”, true);

After setting the above mentioned capability, you would get detailed context details like below.

{id=NATIVE_APP}

{id=WEBVIEW_11739.4, title=, url=about://newtab/, bundleId=*}

You can open the Chrome Mobile App by using the below code. The activateApp method just requires the Bundle ID of the App which needs to be launched.

driver.activateApp(“com.google.chrome.ios”);

After switching to the Chrome Mobile App, you would at the moment only be able to interact only with the Native elements of the app. In order to use the web aspects of the mobile browser, you would need to change the context of the driver to WebView. Chrome WebView is available by default, so you don’t have to provide any additional capability for it. 

To have the correct context, you would need to poll for a certain duration to check if there are more than one contexts available. Once that’s true, you would need to select the context which has the url value set to about://newtab/ , as Chrome’s bundle ID information is not available in the context details.

for (Object context : driver.getContextHandles()) {

    Map<String, String> contextMap = (Map<String, String>) context;

    if (contextMap.getOrDefault(“url”, “”).equals(“about://newtab/”)) {

        driver.context(contextMap.get(“id”));

    }

}

To switch back to the iOS Sample App, you would need to use the activateApp method and provide the Bundle ID for the App. Now in the iOS Sample App, in order to use the App’s Native elements to perform actions, you would need to switch the context back to NATIVE_APP.

driver.activateApp(“com.browserstack.Sample-iOS”);

driver.context(“NATIVE_APP”);

Wrapping it up

This guide covered how to automate an end-to-end user flow using Appium. If you’re looking for a quick and easy way to test real E2E user flows with your own app on a Real Android or iOS device, you can Sign-up for free with BrowserStack. It is recommended to test on real device cloud for better accuracy of the test results as it takes various real user conditions into account while testing. 

BrowserStack App Automate offers cloud-based access to 3000+ real browser-device combinations which include both the latest and legacy devices (Android, iOS, and Windows) installed with real operating systems. App Automate also requires no additional setup, helping testers save precious time and meet their deadlines that much faster.

By running tests on real Android and iOS devices, testers can ensure that their apps are working as expected in real user conditions. Run as many tests as possible on as many real Android and iOS devices to offer a consistently optimal user experience.

Try BrowserStack for free