# Testing Hybrid Apps

# Introduction

Some mobile apps have both Native and Webview components that need to be tested. While Appium can access these components with the UIAutomator and XCUITest wrappers, it can be pretty slow. Luckily, we can switch to the Webview context and access the elements inside with normal web locators.

# Configuring Your App

# Android

In order to access components inside of a Webview you'll need to set the setWebContentsDebuggingEnabled flag to true on the Webview element in your app.

# Chromedriver

You may have to tell Appium to use the appropriate version of Chromedriver. Click here for more information.

# Running a test

Here's a sample test that navigates to an activity with a Webview and then clicks on a link inside of the Webview.

  • getAllContexts returns a string array of the available contexts. Generally the array will look similar to ['NATIVE_APP', 'WEBVIEW1'], though the full name of the Webview can change. If you only see ['NATIVE_APP'] make sure you've properly configured your app for automating Webview tests and checked that the Webview element has loaded.

  • switchToContext Is how you'll switch from the Native App context to the Webview context and back.

  • getContext returns the current context.

import { TestCase, TestModule, gondola } from "@logigear/gondola";
TestModule("Hybrid Test");
TestCase("Test Webview", async () => {
    await gondola.tap({android: "//android.widget.TextView[@text='Webview']", ios: "~Webview"});
    await gondola.wait(5);
    let $contextWebview = await gondola.getAllContexts();
    await gondola.switchToContext($contextWebview[1]);
    await gondola.click({xpath: "//a[.='https://facebook.github.io/react-native/']"});
    await gondola.switchToContext($contextWebview[0]);
});

  • In the test above we went to an activity with a Webview.
  • Then we waited for it to load.
  • After it loaded , we checked to see the available contexts.
  • We switched to the Webview context.
  • We clicked a link inside of Webview.
  • Finally, we switched back to the Native App context.

TIP

Appium Desktop shows locators like //XCUIElementTypeStaticText[@name="https://facebook.github.io/react-native/"] for the link above, but it won't work if you've switched to a Webview context. You'll need to use normal web locators when working inside a Webview.

Did you notice?

We included locators for both Android and iOS when using the tap keyword. Gondola detects which platform you're testing on and chooses the right locator.

Last Updated: 12/28/2020, 4:12:58 AM