BrowserStack Examples Appium WebdriverIO

Introduction

WebdriverIO is a progressive automation framework built to automate modern web and mobile applications. It simplifies the interaction with your app and provides a set of plugins that help you create a scalable, robust and flakiness test suite.

This BrowserStack Example repository demonstrates a WebdriverIO tests framework written in Mocha and nodeJS with parallel testing capabilities. The WebdriverIO test scripts are written for the open source todo.This BrowserStack Demo Mobile App is an e-commerce mobile application which showcases multiple real-world user scenarios. The app is bundled with offers data, orders data and products data that contains everything you need to start using the app and run tests out-of-the-box.

The WebDriverIO tests are run on different platforms like on-prem and BrowserStack using various run configurations and test capabilities.

---

Repository setup

• Clone the repository

• Ensure you have the following dependencies installed on the machine

  • NodeJS >= 16.11.1 (includes npm 8.0.0)

• Run below command to configure dependencies

  npm install

About the tests in this repository

This repository contains the following WebdriverIO tests:

Module	Test name	Description
E2E	e2e.spec.js	This test scenario verifies successful product purchase lifecycle end-to-end. It demonstrates the Page Object Model design pattern and is also the default test executed in all the single test run profiles.

BrowserStack

BrowserStack provides instant access to 2,000+ real mobile devices and browsers on a highly reliable cloud infrastructure that effortlessly scales as testing needs grow.

Prerequisites

• Create a new BrowserStack account or use an existing one.

• Identify your BrowserStack username and access key from the BrowserStack App Automate Dashboard and export them as environment variables using the below commands.

  • For *nix based and Mac machines:

    export BROWSERSTACK_USERNAME=<browserstack-username> &&
    export BROWSERSTACK_ACCESS_KEY=<browserstack-access-key>

  • For Windows:

    set BROWSERSTACK_USERNAME=<browserstack-username>
    set BROWSERSTACK_ACCESS_KEY=<browserstack-access-key>

Alternatively, you can also hardcode username and access_key objects in the wdio*.conf.js files.

Note:

• We have configured the capabilities in wdio*.conf.js files. You can certainly update them based on your device test requirements.
• The exact test capability values can be easily identified using the Browserstack Capability Generator

Running Your Tests on BrowserStack

Prerequisites

You need to upload the APK or IPA to BrowserStack, before you can run the test on BrowserStack. BrowserStack will provide you with an app_url which you need to use.

You can upload the APK or IPA using a file on your filesystem or using a public url.

cURL command:

curl -u "browserstack_username:browserstack_access_key" \
-X POST "https://api-cloud.browserstack.com/app-automate/upload" \
-F "file=@/path/to/ipa/or/apk" \
-F "custom_id=BrowserStackDemoApp"

More information on Upload apps from filesystem, Upload apps using public URL or Define custom ID for app.

Run the entire test suite in parallel on a single BrowserStack device

In this section, we will run the E2E tests in parallel on a multiple device on Browserstack. Refer to capabilities object in resources/conf/wdio-bstack.conf.js file to change test capabilities for this configuration.

• How to run the test??

  • To run the entire test suite in parallel on a single BrowserStack device type, use the following command:

    npm run test

Note: By default, this execution would run maximum 2 test threads in parallel on BrowserStack. The parallels can eb modified by updated the maxInstances inside capabilities object in resources/conf/wdio-bstack.conf.js.

Run the the App-Percy Test Suite

In this section, we will run the E2E App-Percy Visual Regression Tests. Refer to capabilities object in resources/conf/wdio-bstack.conf.js file to change test capabilities for this configuration.

• How to run the test?

  • To run your App-Percy Visual Regression Test Suite across BrowserStack Devices, use the following command:

    percy app:exec -- wdio run resources/conf/wdio-bstack.conf.js

  • To run the entire test suite in parallel on a single BrowserStack device type, use the following command:

    npm run percy:test

Note: By default, this execution would run maximum 2 test threads in parallel on BrowserStack. The parallels can eb modified by updated the maxInstances inside capabilities object in resources/conf/wdio-bstack.conf.js.

Additional Resources

• View your test results on the BrowserStack App Automate Dashboard
• Documentation for writing App Automate test scripts in JS
• Customizing your tests capabilities on BrowserStack using our test capability generator
• List of Browsers & mobile devices for automation testing on BrowserStack
• Using Automate REST API to access information about your tests via the command-line interface
• Understand how many parallel sessions you need by using our Parallel Test Calculator
• For testing public web applications behind IP restriction, Inbound IP Whitelisting can be enabled with the BrowserStack Enterprise offering