Deliver Flawless Experience to Your Mobile Users

Test your websites and web apps on mobile browsers

Why perform cross-browser testing?

As someone who uses BrowserStack Automate to test web apps (including websites), you know what cross-browser testing is and why it is important.

To reiterate, cross-browser testing enables you to check whether your web apps work as intended when accessed through different:

• OS (Windows, macOS, iOS, Android) and browser (Google Chrome, Safari, Internet Explorer, Microsoft Edge, Mozilla Firefox) combinations
• Devices, including desktops, laptops, smartphones, and tablets
• Assistive technologies such as screen readers

Perform cross-browser testing to ensure that your users have a productive engagement with your web app. If you can’t offer an optimal experience, you alienate the user base. And they start looking for better alternatives instead.

Although browser vendors follow Open Web Standards, they have their own interpretations of it. Every vendor renders HTML, CSS, and JavaScript uniquely. Therefore, thoroughly debugging your website or web app’s source code can’t guarantee that your website would look and behave as intended on different browsers or on different versions of the same browser.

As a web app developer, the onus is on you to abstract browser differences. Which is precisely why you should perform cross-browser testing. It helps by pinpointing browser-specific compatibility errors so you can debug them quickly. As a result, you retain your audience.

Next, we’ll look at why you should perform cross-browser testing on mobile devices.

Why test on mobile browsers?

There are different ways to answer this question. To begin with, here’re some interesting stats:

• Individuals tend to check their phones an average of 58 times a day.
• Smartphone users worldwide:
  • Are expected to hit more than 7.5 billion by 2027.
  • Spend an average of 3 hours and 15 minutes on their phones.
• Millenials spend more than 5.7 hours on their smartphones per day.

The numbers speak for themselves. Users want to access everything from their smartphones. If you want to reach a broader audience, optimize your web apps for smartphones of widely different makes and models. How? By testing them on mobile browsers.

In addition, testing on mobile browsers enables you to:

• Test and optimize your web apps for multiple mobile browsers such as Google Chrome, Safari, and Samsung Internet.
• See how your web app renders on mobile browsers installed on unique operating systems like Android and iOS. This way you can eliminate compatibility issues for the target device-browser-OS combination.
• Increase the overall user-friendliness of a web app.
• Achieve higher rankings on search engines. See Google considers mobile-friendliness a ranking factor for details.

In short, mobile web testing helps create faster and more mobile-responsive web apps that deliver enriched user experiences across a wide range of mobile devices.

How to test on a mobile browser using BrowserStack Automate?

Now that you’ve learned about the benefits of testing on mobile browsers, let’s see how to test on mobile browsers with BrowserStack Automate. To do that, perform the following high-level tasks:

1. Integrate your test suite with BrowserStack Automate.
2. Run your test.

If you have tested web apps on desktop browsers using BrowserStack, then these tasks are fairly straightforward and should seem familiar. The only difference is to make a few changes to your BrowserStack configuration file to make use of the mobile infrastructure. That should set you up.

Recall the two ways to integrate your tests:

• The BrowserStack SDK way
• The legacy (manual) way

Since we recommend that you use the BrowserStack SDK, this article focuses on the steps to integrate your tests with the SDK. See Learn about the benefits of using the BrowserStack SDK on Integrate Your Test Suite with BrowserStack.

With the SDK, you can integrate using:

• CLI
• Eclipse IDE
• IntelliJ IDEA

For the purpose of this article, we’ll take the CLI route. If you’d like to explore the other options, see Integrate Your Test Suite with BrowserStack.

Prerequisites for integration

Before we get started with the integration steps, ensure that you have:

• An existing automated test suite
• Java v8 or higher (if you use Gradle, then you need Java v9 or higher), Selenium v2.5 or higher (JSON Wire / W3C)
• Maven or Gradle installed, its environment variables set, and its bin is added to your system path, $PATH

Integration steps

Follow these steps to integrate your test suite using CLI:

Set BrowserStack credentials as environment variables.

Copy

```bash # Set these values in your ~/.zprofile (zsh) or ~/.profile (bash) export BROWSERSTACK_USERNAME="YOUR_USERNAME" export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY" ```

Copy snippet

```bash setx BROWSERSTACK_USERNAME "YOUR_USERNAME" setx BROWSERSTACK_ACCESS_KEY "YOUR_ACCESS_KEY" set BROWSERSTACK_USERNAME=YOUR_USERNAME set BROWSERSTACK_ACCESS_KEY=YOUR_ACCESS_KEY ```

Copy snippet

After these variables are set, you can run your tests from the local or CI environment.

Install the BrowserStack SDK by running the following command:

Copy

```bash mvn archetype:generate -B -DarchetypeGroupId=com.browserstack \ -DarchetypeArtifactId=browserstack-sdk-archetype-integrate -DarchetypeVersion=1.0 \ -DgroupId=com.browserstack -DartifactId=browserstack-sdk-archetype-integrate -Dversion=1.0 \ -DBROWSERSTACK_FRAMEWORK=java ```

Copy snippet

```bash mvn archetype:generate -B -DarchetypeGroupId="com.browserstack" -DarchetypeArtifactId="browserstack-sdk-archetype-integrate" -DarchetypeVersion="1.0" -DgroupId="com.browserstack" -DartifactId="browserstack-sdk-archetype-integrate" -Dversion="1.0" -DBROWSERSTACK_FRAMEWORK="java" ```

Copy snippet

If you use the Surefire plugin to run tests, the steps to integrate might change. Check out the TestNG-specific steps.

Configure the browserstack.yml file:

Set the platforms you want to test on. Specify device-browser combinations using deviceName and browserName. To specify the OS version and device orientation, use osVersion and deviceOrientation.

Specify if you are testing on local or public sites.

True

False

Test apps locally with local/staging API servers

BrowserStack’s Local Testing feature connects with locally hosted API servers to run your apps

Learn more

Leverage BrowserStack’s extensive reporting features using the following capabilities:

Build Name

Set a name to your build (usually the same as the build ID that’s on your CI/CD platform). Accepted characters: A-Z, a-z, 0-9, ., :, -, [], /, @, &, ‘, _. All other characters are ignored.
Character limit: 255

Build Identifier

Select a dynamic build identifier that appends to the build name and generates a unique name on the BrowserStack dashboard

${BUILD_NUMBER}

${BUILD_NUMBER}

${DATE_TIME}

Project Name

Set a project name for your project

By default, BrowserStack provides well-formatted session logs, screenshots on every failed command, and a video of the entire test. Additionally, you can enable the following features:

Visual logs

Enables screenshots for every command ran

True

False

Network logs

Enables network capture for the session in HAR format. Reduces session performance slightly

True

False

Console logs

Set the remote Browser’s console log levels. Currently supported only on Chrome browsers (Desktop and Android)

Info

Disable

Verbose

Info

Warnings

Errors

The configuration should look like this:

```yml userName: YOUR_USERNAME accessKey: YOUR_ACCESS_KEY platforms: - deviceName: Samsung Galaxy S23 Ultra osVersion: 13.0 browserName: chrome deviceOrientation: portrait - deviceName: Samsung Galaxy S23 Ultra osVersion: 13.0 browserName: samsung deviceOrientation: portrait - deviceName: iPhone 14 Pro Max osVersion: 16 browserName: safari deviceOrientation: portrait YOUR_LOCAL_CAPS_TYPE: YOUR_LOCAL_CAPS YOUR_BUILD_NAME_TYPE: YOUR_BUILD_NAME YOUR_BUILD_IDENTIFIER_KEY: YOUR_BUILD_IDENTIFIER_TYPE YOUR_PROJECT_NAME_TYPE: YOUR_PROJECT_NAME YOUR_DEBUG_CAPS_TYPE: YOUR_DEBUG_CAPS YOUR_NETWORK_CAPS_TYPE: YOUR_NETWORK_CAPS YOUR_CONSOLE_CAPS_TYPE: YOUR_CONSOLE_CAPS ```

browserstack.yml

Copy snippet

As you can see in the sample configuration, we’re set to test on Chrome and Samsung on Samsung Galaxy S23 Ultra, and on Safari on iPhone 14 Pro Max. The rest of the settings are already familiar to you.

Feel free to change these settings. For a full list of devices you can test on, see Browsers and Mobile Devices for Selenium Testing.

Update your browserstack.yml file with these settings.

Run your test suite using the following command:

Copy

```java mvn exec:exec -Dexec.executable="java" -Dexec.classpathScope=test \ -Dexec.args="-cp %classpath -javaagent:</full/.m2-repo/path/to/browserstack-java-sdk.jar> \ <package.classname.java>" ```

Copy snippet

```java mvn exec:exec -Dexec.executable="java" -Dexec.classpathScope=test ^ -Dexec.args="-cp %classpath -javaagent:<\full\.m2-repo\path\to\browserstack-java-sdk.jar> <package.classname.java>" ```

Copy snippet

Which mobile browsers should you test on?

The sheer number of browsers, devices, and operating systems out there make it impossible to build for and test on every possible browser, device, and OS combination. A more realistic goal is to focus on maximizing your web app’s reach within your target market. To do this, finalize the most critical browsers and versions:

• Based on popularity: Select the 10-20 most commonly used browsers. Pick the top two platforms—like Android and iOS. These are typically what B2C (consumer-facing) web apps are optimized for.
• Based on analysis: Break your web app’s traffic down by browser, device, and OS. The aim is to identify the:
  • Browser-OS combinations most commonly used by your target audience
  • Devices your web app is generally viewed on

A simple rule of thumb is to prioritize testing on any browser-OS that gets over 5% share of traffic. To make an informed decision specific to your target audience, refer to your traffic stats and combine those insights with our Test on the Right Devices report. The report compiles browser-OS and device usage data in different markets.

Typically, the Business, Marketing, and Client teams decide which browsers and platforms to test on. Work with them to limit your testing efforts to areas that reward the most with least effort.

To learn about all the test frameworks supported with BrowserStack Automate, see the BrowserStack Automate documentation.