Using Appium in WebView with webdriverio

Elizabeth Pantalone
Nov 1 · 3 min read
illustration of a mobile phone. source

The scenario: You’ve got an app that is native in some areas, but then becomes a WebView at some point. How do you set up automated tests for it?

The ability to switch seamlessly between the native components and WebView components lies in Switching Contexts.

I found some VERY helpful boilerplate code for webdriverio here and implemented it selectively. This repo is full of great stuff, but just to concentrate on the context switching, I only used some of it. Here are the steps I took:

  1. create a helpers folder, holding a WebView.js file
screenshot displaying the helpers folder, holding the WebView.js file

2. within WebView.js place the following code:

3. I then created another folder, screenobjects, holding a file called webview.screen.js

screenshot displaying the screenobjects folder, holding the webview.screen.js file

4. Within webview.screen.js I placed the following code:

screenshot of 21 lines of code, showing what lives in the webview.screen.js file

5. Within your test file, be sure to import the previous two files:

screenshot highlighting the imports of WebViewScreen and CONTEXT_REF

I created a clean test file for this, though you can easily implement it within an existing test file. I wrote a very simple flow, illustrating starting in the native portion of the app, navigating to the WebView portion, and then back. You can see the context switches on lines 38 and 49.

screenshot showing 61 lines of code, illustrating 3 simple tests going from native context to webview context, back to native

You’ll see on line 40, I’ve included an assertion to click an object on the screen within the WebView, so we know that the context switch was successful. And again, on like 53, the test is waiting to complete until the selector within the native context is visible.

That’s really all there is to it. As I referenced above, I really found that boilerplate code super helpful. But I do know that it can be overwhelming at times, knowing what to use and what to cut. Hopefully this helps.

— — — — — — — — — — — — — — — — — — — — — — — — — —

Is this a bit over your head or are you looking for a basic guide to get Appium up and running? check out this other thing I wrote.

Or maybe you want to know how to make multiple devices/emulators/simulators all run at once

Elizabeth Pantalone

Written by

Senior Quality Assurance Analyst (the gluten free one) at Niche.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade