Using Appium in WebView with webdriverio

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:
- create a
helpersfolder, holding aWebView.jsfile

2. within WebView.js place the following code:

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

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

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

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.

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