A few weeks ago a customer from the Netherlands asked me if there is a possibility to automate the quick navigation menu with Appium. He explained that if you would use a 3D/Force Touch on the app icon, it would show a quick navigation menu that a customer could use to go to a certain screen in the app (see image 1).
Image 1: Quick navigation menu
My answer was that I’d never done it, but that I thought it would be possible. In this blog post I’m going to explain how you can use Appium to automate the quick navigation menu on iOS and Android. But before we dive into the details, let’s first look at what 3D/Force Touch can do.
What is 3D/Force Touch?
Apple introduced 3D Touch on their iPhone 6S (Plus) which meant that as of then they provided their iPhones with a pressure-sensitive screen. The idea was that the harder you press, the more would “happen” on the screen. But if you have been following the latest news of Apple, you might also be wondering why we are going to write about 3D/Force Touch while Apple stopped using pressure-sensitive screens and introduced “Haptic Touch” screens (they already introduced it with the iPhone XR). Well, the end result of 3D/Force/Haptic Touch is just the same, it will provide you a menu with quick navigation menu options.
But while we talk about iOS, we should also consider how this impacts Android devices. Android announced support for 3D Touch in Android Q, but we need to be aware that Android is not building their own devices and screens (except for the Pixel phones)—meaning that you never know if manufacturers like Samsung, LG and many more will implement a pressure-sensitive screen on their phones. But to get back to the basics, Android has already supported a quick navigation menu option, without using 3D/Force Touch, for a long time. And in the end, that is what we want to automate with Appium.
Building quick navigation menu support
To understand how to automate 3D/Force Touch with Appium, we first added the quick navigation menu option to our own Sauce Labs Swag Labs demo app so everybody can use it as a demo.
Because we are using React Native to build our sample app, we could easily integrate this. We added two quick navigation menu items, including:
The “Open Swag Items” to skip the login page and directly open the Swag Items page
The “Open Webview” to skip the login page and go directly to the Webview selection page.
Please check the GitHub repository where you can freely download the latest version and read how to use it.
It’s only a touch action
When I thought about how to automate the 3D/Force Touch I was immediately thinking about the touch actions we can use with Appium. With a touch action you are able to mimic the behaviour of how a user is touching the screen in small steps. So in steps the touch action should contain something like this:
Press the screen (with pressure for iOS, not for Android)
Hold down for x amount of seconds
Release the hold when the menu appears
When I started coding this I found out that this was the way to go with Android, so the first part was already solved. I also found out that the long press for iOS was not enough. I needed to do some more investigation about how to provide the pressure as an option.
After searching the Appium docs for “3D/Force Touch” and “pressure” I found nothing. What I normally do when I can’t find it in the docs is search the Appium repository on certain words. I finally came up with this result and after reading all the results I found out that the option pressure was the one I needed to have, I also found out that the value needed to be 0 for no and 1 for a normal pressure.
Automating 3D/Force Touch
People who know me a bit longer know that I’m a JavaScript and WebdriverIO fan, so I hope I won’t surprise you with a WebdriverIO code example below.
The example below will show you how to use it with:
iOS 12 and below, for the iPhones that support 3D/Force Touch (this even works with iPhones and iOS 13+ that don’t have 3D/Force Touch, but Haptic Touch
Android devices
The locators that are used here are the accessibilityIDs, they are cross-platform and easy to read (more info about this can be found in my blog about how to speed up your iOS Appium tests).
import InventoryListScreen from '../../screenObjects/inventoryList';
import { DEFAULT_TIMEOUT } from '../../helpers/e2eConstants';
describe('Test 3D Touch', () => {
it('should be able to open the Safari 3D touch menu', () => {
// Go to home
driver.background(-1);
if (driver.isIOS) {
// Check Dock is shown
$('~Dock').waitForDisplayed(DEFAULT_TIMEOUT);
// Open the 3D touch menu with a force touch
driver.touchPerform([
{
action: 'press',
options: {
element: $('~SwagLabsMobileApp').elementId,
pressure: 1,
},
},
{
action: 'wait',
options: { ms: 2000 },
},
{
action: 'release',
},
]);
// Verify the 3D menu is opened
expect($('~Open Swag Items, Open the Swag Items').waitForDisplayed(15000)).toEqual(true, '3D Touch menu did not open');
$('~Open Swag Items, Open the Swag Items').click();
} else {
// Open the menu
$('~Apps list').click();
// Check if the app is there
$('~Swag Labs Mobile App').waitForDisplayed(DEFAULT_TIMEOUT);
// Open the 3D touch menu with a force touch
driver.touchPerform([
{
action: 'press',
options: {
element: $('~Swag Labs Mobile App').elementId,
},
},
{
action: 'wait',
options: { ms: 2000 },
},
{
action: 'release',
},
]);
// Wait for the menu to open and click on it
$('~Open Swag Items').waitForDisplayed(DEFAULT_TIMEOUT);
$('~Open Swag Items').click();
}
expect(InventoryListScreen.waitForIsShown()).toEqual(true, 'Inventory List screen was not shown');
});
});
Conclusion
I hope you found this tech tip useful. If you’re looking for a quick and easy way to test 3D/Force Touch with your own app, you can try for free with Sauce Labs. Until next time...happy testing!
Wim Selles helps solve automation challenges by day—and practices his passion for front-end test automation at night. Wim enjoys creating his own node.js modules and contributing to open source projects. You can find Wim on LinkedIn and Twittter @wswebcreation
