This documentation explains how ImageComparison can work with Appium. It will not explain how to install Appium or how to automate with Appium, please refer to the Appium documentation on the Appium site.
Some cloudservices that provide emulators / real devices in the cloud (like Perfecto or SauceLabs) create screenshots of the complete screen (like a native screenshot).
They need a different way of determining the position of an element. Image Comparison can already do this for iOS Safari, but to get this working for Android add nativeWebScreenshot: true to the Image Comparison parameters.
ImageComparison is tested with:
- iOS simulators with Safari (see iOS config below)
- Android Emulator Nexus 5 (default from AVD, see Android config below) with Chrome (for install see Android)
Creating screenshots / region screenshots with the above configurations work. It is not tested with a Hybrid App, but it will probably work.
Appium creates a screenshot of the complete screen of the device. When a screenshot of Safari is made, the screenshot can hold the following elements:
- Statusbar (the "small" top bar that will hold time, wifi, battery, ...)
- Addressbar (the bar that will hold the url)
- View (the actual view of the page you are visiting)
- Toolbar (will hold additional buttons for the browser)
See "Scrolling" for the behaviour of Safari and the screenshots below for the influence
The saveScreen and checkScreen methods use the complete screen, see below.
The saveElement and checkElement also use the complete screenshot, but the position of the element on the screenshot may differ.
If for example the position after a scroll is not determined correctly it can fail, see 
.
The iOS method is smart enough to detect the way of scrolling and the position of the element on the page.
When a user scrolls the screen manually the the addressbar and the Toolbar are influenced by this behaviour. For Safari the addressbar is made smaller and the toolbar is minimized.
When the scroll is automated with a "native Appium" command the real use scroll is simulated and the behaviour of the addressbar and toolbar is the same as the manual scroll
When the scroll is automated with a Javascript scroll
browser.executeScript('arguments[0].scrollIntoView();', element(by.css('div h1')).getWebElement());the view is scrolled, but the addressbar AND the toolbar ARE NOT INFLUENCED BY THIS BEHAVIOUR.
{
browserName: 'safari', // {mandatory} not case sensitive
deviceName: 'iPhone 6', // {mandatory} Needs to be form the list of available devices
platformName: 'ios', // {mandatory} not case sensitive
platformVersion: '9.3' // {optional} needed for specific ios version, else takes the default
}
When an Emulator is used Chrome is only default provided from Android > 7.0. If an older version of Android needs to be used, Chrome needs to be installed manually.
Execute the following steps to install Chrome on Android < 7.0
- Download a Chrome APK from APKMirror, check which processor is used in the Emulator (ARM or X86, X86 is faster).
- Open the Emulator
- Install the
chrome.apkfrom the folder where it is saved with the following commandadb install chrome.apk.
[100%] /data/local/tmp/chrome.apk
pkg: /data/local/tmp/chrome.apk
Success
- When the message
Successis shownChromeis installed on the device.
Appium can create 2 types of screenshots for Android based on:
- Chromedriver (default)
- ADB (Appium >= 1.5.3)
Chromedriver creates a screenshot of the (visible)viewport
![Chrome ChromeDriver saveScreen / checkScreen] (./images/avdForNexus5ByGoogle_examplePage_ChromeDriver.png "Chrome ChromeDriver saveScreen / checkScreen")
ADB creates a screenshot of the complete screen (as iOS does with Safari). This can be compared with the Native screenshot that can be made with a device. The ADB screenshot can hold:
- Statusbar (the "small" top bar that will hold time, wifi, battery, ...)
- Addressbar (the bar that will hold the url)
- View (the actual view of the page you are visiting)
- Toolbar (optional, will hold additional Android buttons, like home, back and menu)
To use ADB screenshots add this in this capability in the capabilities nativeWebScreenshot: true, see "Capabilities Android" example below.
![ADB saveScreen / checkScreen] (./images/avdForNexus5ByGoogle_examplePage_ADB.png "ADB saveScreen / checkScreen")
It looks like taking a screenshot with ADB reacts different on a scroll (elm.scrollIntoView() seems to take more time). This is why a sleep, in the tests, is added after scrolling to be sure the screenshot is taken of the correct screen state.
See "Scrolling" for the behaviour of Chrome and the screenshots below for the influence
When a user scrolls the screen manually then the addressbar is influenced by this behaviour. For Chrome the addressbar is minimized.
When the scroll is automated with a "native Appium" command the real user scroll is simulated and the behaviour of the addressbar is the same as the manual scroll
When the scroll is automated with a Javascript scroll browser.executeScript('arguments[0].scrollIntoView();', element(by.css('div h1')).getWebElement()); the view is scrolled, but the addressbar IS NOT INFLUENCED by this behaviour.
{
browserName: 'chrome', // {mandatory} not case sensitive
deviceName: 'AVD_for_Nexus_5_by_Google', // {mandatory} Needs to be form the list of available devices
platformName: 'android' // {mandatory} not case sensitive
platformVersion: '7.0', // {optional} needed for specific Android version,
nativeWebScreenshot: true // to use adb screenshots (complete screenshot), default is ChromeDriver
}
Hover over the screenshots to see which screenshot belongs to Safari, Android ChromeDriver of Android ADB.
