1.
@wswebcreation
Automating Hybrid Apps
with Appium
Wim Selles | Sr. Solutions Architect at Sauce Labs

2.
@wswebcreation
● Mobile Apps and their Differences
● WebViews
● Why Automate Them
● Detecting WebViews
● Appium and Contexts
● Advanced Topics
● Exciting News
Agenda
2

3.
Mobile Apps

4.
@wswebcreation
Types of Apps
4
Native App

5.
@wswebcreation
Types of Apps
5
Web App

6.
@wswebcreation
Types of Apps
6
Hybrid App
Hybrid App
can be seen as a
Native App
that uses a
mobile WebView
object.

7.
@wswebcreation
Types of Apps
6
Hybrid App
Hybrid App
can be seen as a
Native App
that uses a
mobile WebView
object.
WebView
Native

8.
@wswebcreation
A Web View loads and displays
Rich Web Content
directly within your app.
WebViews
7

9.
@wswebcreation
You can serve Rich Web Content from:
• embedded HTML (internal hosted content)
• websites (external hosted content)
WebViews
8
Rich Web Content

10.
@wswebcreation
WebViews
9
Technology
Android:
• Uses Android System WebView
• Powered by Chrome
• Separate System App
• Independent App Updates
iOS:
• Uses WKWebView*
• Powered by Safari
• “Embedded” in the OS
• Tied to Platform Updates
* previously UIWebView, UIWebView has been deprecated since iOS 12 which also had an impact on Appium

11.
@wswebcreation
10

12.
Automating WebViews

13.
@wswebcreation
12

14.
@wswebcreation
13

15.
@wswebcreation
13
“How to Become an Appium Desktop Ninja”: https://youtube.com/playlist?list=PL67l1VPxOnT4J8Kgpvi1TK0iuMwO7SJNn (6 chapters)

16.
@wswebcreation
Automating WebViews
14
Native Element Selection for Android and iOS

17.
@wswebcreation
15

18.
@wswebcreation
15

19.
@wswebcreation
16
WebView Element Selection for Android and iOS
Automating WebViews

20.
@wswebcreation
17

21.
@wswebcreation
• Translated Native Views are slower and more flaky
• Have access to the URL
• Have access to Application Storage like:
• localStorage
• sessionStorage
• cookies
• Manipulate the DOM
• Same selectors for Android and iOS
• And many more …
Automating WebViews
18
Advantages

22.
@wswebcreation
19

23.
@wswebcreation
Automating WebViews
20
Downsides
Will get back to that later =)

24.
Detecting
iOS WebViews

25.
@wswebcreation
22

26.
@wswebcreation
22

27.
@wswebcreation
22

28.
@wswebcreation
22

29.
@wswebcreation
22

30.
Detecting
Android WebViews

31.
@wswebcreation
24
@wswebcreation

32.
@wswebcreation
24
@wswebcreation

33.
@wswebcreation
24
@wswebcreation

34.
@wswebcreation
Android- Remote Debugging WebViews
25
More info: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews

35.
@wswebcreation
26
@wswebcreation

36.
@wswebcreation
26
@wswebcreation

37.
@wswebcreation
26
@wswebcreation

38.
Detecting WebViews
With Appium Desktop

39.
@wswebcreation
28

40.
@wswebcreation
28

41.
@wswebcreation
28

42.
@wswebcreation
29

43.
@wswebcreation
29

44.
@wswebcreation
30

45.
@wswebcreation
30

46.
@wswebcreation
30

47.
Appium and Contexts

48.
@wswebcreation
Appium and Contexts
32
The circumstances
that form the setting
for an event,
statement,
or idea,
and in terms of which
it can be fully understood.
What is a Context

49.
@wswebcreation
Appium and Contexts
33
Appium knows …..
Android:
• NATIVE_APP
• WEBVIEW_com.saucelabshybridapp
• WEBVIEW_com.chrome
• Naming convention:
• WEBVIEW_{packageName}
iOS:
• NATIVE_APP
• WEBVIEW_8891.12
• WEBVIEW_8891.2
• Naming convention:
• WEBVIEW_{id}
1-N Contexts

50.
@wswebcreation
34
Get All Context
Appium and Contexts
More info: http://appium.io/docs/en/commands/context/get-contexts/

51.
@wswebcreation
34
Get All Context
Appium and Contexts
More info: http://appium.io/docs/en/commands/context/get-contexts/

52.
@wswebcreation
35
Get Current Context
Appium and Contexts
More info: http://appium.io/docs/en/commands/context/get-context/

53.
@wswebcreation
35
Get Current Context
Appium and Contexts
More info: http://appium.io/docs/en/commands/context/get-context/

54.
@wswebcreation
36
Set Current Context
Appium and Contexts
More info: http://appium.io/docs/en/commands/context/set-context/

55.
@wswebcreation
When your
Hybrid App
starts
with a
WebView!
37
Tip!
Appium and Contexts
More info: http://appium.io/docs/en/writing-running-appium/caps/index.html

56.
@wswebcreation
When your
Hybrid App
starts
with a
WebView!
37
Tip!
Appium and Contexts
More info: http://appium.io/docs/en/writing-running-appium/caps/index.html

57.
Advanced

58.
@wswebcreation
Biggest ones:
• ChromeDriver Versions
Advanced
39
Downsides

59.
@wswebcreation
Biggest ones:
• ChromeDriver Versions
• Lack of WebView Information
• Multiple WebView Differences
Advanced
39
Downsides

60.
@wswebcreation
Each version of
Appium
comes bundled with the
latest known version
of ChromeDriver
at moment of installing.
Advanced
40
ChromeDriver Version
More info: https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/web/chromedriver.md

61.
@wswebcreation
Appium can
automatically detect
the correct
ChromeDriver
for the version of
Chrome under test
Advanced
41
ChromeDriver Version

62.
@wswebcreation
Advanced
42
ChromeDriver Version

63.
@wswebcreation
Advanced
43
ChromeDriver Version
More info: https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/web/chromedriver.md

64.
@wswebcreation
44

65.
@wswebcreation
Advanced
45
ChromeDriver Version - Fixes
More info: https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/web/chromedriver.md
• Appium can automatically detect the correct ChromeDriver for the
version of Chrome under test
• Automatically Download corresponding ChromeDriver Version
• Provide it
• Use a cloud service like Sauce Labs

66.
@wswebcreation
Advanced
46
ChromeDriver Auto Detect
More info: https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/web/chromedriver.md

67.
@wswebcreation
Advanced
47
ChromeDriver Auto Detect
More info: https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/web/chromedriver.md

68.
@wswebcreation
Advanced
48
Lack of WebView Information

69.
@wswebcreation
Advanced
49
Lack of WebView Information

70.
@wswebcreation
Advanced
49
Lack of WebView Information

71.
@wswebcreation
Advanced
49
Lack of WebView Information

72.
@wswebcreation
Advanced
49
Lack of WebView Information

73.
@wswebcreation
Advanced
49
Lack of WebView Information

74.
@wswebcreation
Advanced
49
Lack of WebView Information

75.
@wswebcreation
Advanced
49
Lack of WebView Information

76.
@wswebcreation
Advanced
49
Lack of WebView Information

77.
@wswebcreation
Advanced
50
Multiple WebView Differences

78.
@wswebcreation
Advanced
50
Multiple WebView Differences

79.
@wswebcreation
Advanced
50
Multiple WebView Differences

80.
@wswebcreation
Advanced
50
Multiple WebView Differences

81.
@wswebcreation
Advanced
50
Multiple WebView Differences

82.
@wswebcreation
Advanced
50
Multiple WebView Differences

83.
@wswebcreation
51
Advanced
Multiple WebView Differences
More info: http://appium.io/docs/en/commands/context/get-contexts/

84.
@wswebcreation
51
Advanced
Multiple WebView Differences
More info: http://appium.io/docs/en/commands/context/get-contexts/

85.
@wswebcreation
Advanced
52

86.
@wswebcreation
Advanced
52

87.
@wswebcreation
Advanced
52

88.
@wswebcreation
Advanced
52

89.
@wswebcreation
Advanced
52

90.
@wswebcreation
Advanced
52

91.
@wswebcreation
Advanced
53
Multiple WebView Differences - Switch Context Steps

92.
@wswebcreation
Advanced
53
Multiple WebView Differences - Switch Context Steps

93.
@wswebcreation
Advanced
53
Multiple WebView Differences - Switch Context Steps

94.
Exciting News

95.
@wswebcreation
Exiting News
55
Compare Scripts and Execution Time

96.
@wswebcreation
Exiting News
55
Compare Scripts and Execution Time

97.
@wswebcreation
Exiting News
55
Compare Scripts and Execution Time

98.
@wswebcreation
Exiting News
55
Compare Scripts and Execution Time

99.
@wswebcreation
Exiting News
55
Compare Scripts and Execution Time

100.
Register at
https://www.ministryoftesting.com/events/automating-hybrid-applications-with-appium-28-may-2021

101.
@wswebcreation
● “How to Become an Appium Desktop Ninja” (6-Chapters):
https://youtube.com/playlist?list=PL67l1VPxOnT4J8Kgpvi1TK0iuMwO7SJNn
● Android Remote Debugging WebViews:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews
● Appium getContexts:
http://appium.io/docs/en/commands/context/get-contexts/
● Appium getContext:
http://appium.io/docs/en/commands/context/get-context/
● Appium setContext:
http://appium.io/docs/en/commands/context/set-context/
● Appium Capabilities:
http://appium.io/docs/en/writing-running-appium/caps/index.html
● Appium Android ChromeDriver:
https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/web/chromedriver.md
Useful Links
57

102.
Q&A

103.
Let’s do this.