Mobile app testing installation for Nightwatch
Overview
In order to run mobile app testing with Nightwatch, there are a few things that need to be installed:
- Appium
- Command line tools
- SDKs for respective platforms
- Virtual devices
However, Nightwatch simplifies the setup of all these via the Mobile Helper tool.
Setting up a new project
When you run
npm init nightwatch<directory-name>
the 1st question presented would be
Make sure that the Mobile app testing is selected. The rest will be a series of questions/steps that you will have to go through and Nightwatch will do the heavy-lifting of installing everything required or giving instructions wherever needed.
If you are planning to just do mobile app testing,you can alternatively initiate Nightwatch installation with the app mode using the command
npm init nightwatch@latest <foldername> -- --app In case you select Android,there is 1 important point to note. Select the default option only if you don’t have the SDK installed to avoid duplication of SDK download. In case you have the SDK installed,please provide the path when this question comes up
That’s it. Nightwatch setup for mobile app testing is complete!
Add mobile app testing to existing project
Android
Step 1 Go the to the Nightwatch project directory and run the following command
npx @nightwatch/mobile-helper android --appium
Step 2 Answer the questions based on your requirements.
In case you select Android,there is 1 important point to note. Select the default option only if you don’t have the SDK installed to avoid duplication of SDK download. In case you have the SDK installed,please provide the path when this question comes up
sStep 3 After verification if all requirements are not met or if there is an error, follow the instructions to resolve them.
Step 4 Next, setup Appium 2 in your project with the following command.
npm i appium@next --save-devStep 5 Install Appium UiAutomator2 driver for Android
npx appium driver install uiautomator2Step 6 Download the sample wikipedia app and save it in your project's root directory (alongside nightwatch.conf.js file).
Step 7 Add Nightwatch environments for Android emulators and real devices.
{
...
'test_settings':{
app: {
selenium: {
start_process: true,
use_appium: true,
host: 'localhost',
port: 4723,
server_path: '',
// args to pass when starting the Appium server
cli_args: [
// automatically download the required chromedriver
// '--allow-insecure=chromedriver_autodownload'
],
// Remove below line if using Appium v1
default_path_prefix: ''
},
webdriver: {
timeout_options: {
timeout: 150000,
retry_attempts: 3
},
keep_alive: false,
start_process: false
}
},
'app.android.emulator': {
extends: 'app',
'desiredCapabilities': {
// More capabilities can be found at https://github.com/appium/appium-uiautomator2-driver#capabilities
browserName: null,
platformName: 'android',
// `appium:options` is not natively supported in Appium v1,but works with Nightwatch.
// If copying these capabilities elsewhere while using Appium v1,make sure to remove `appium:options`
// and add `appium:` prefix to each one of its capabilities,e.g. change 'app' to 'appium:app'.
'appium:options': {
automationName: 'UiAutomator2',
// Android Virtual Device to run tests on
avd: 'nightwatch-android-11',
// While Appium v1 supports relative paths,it's more safe to use absolute paths instead.
// Appium v2 does not support relative paths.
app: `${__dirname}/wikipedia.apk`,
appPackage: 'org.wikipedia',
appActivity: 'org.wikipedia.main.MainActivity',
appWaitActivity: 'org.wikipedia.onboarding.InitialOnboardingActivity',
// chromedriver executable to use for testing web-views in hybrid apps.
// add '.exe' at the end below (making it 'chromedriver.exe') if testing on windows.
chromedriverExecutable: `${__dirname}/chromedriver-mobile/chromedriver`,
newCommandTimeout: 0
}
}
},
'app.android.real': {
extends: 'app',
'desiredCapabilities': {
// More capabilities can be found at https://github.com/appium/appium-uiautomator2-driver#capabilities
browserName: null,
platformName: 'android',
// `appium:options` is not natively supported in Appium v1,but works with Nightwatch.
// If copying these capabilities elsewhere while using Appium v1,make sure to remove `appium:options`
// and add `appium:` prefix to each one of its capabilities,e.g. change 'app' to 'appium:app'.
'appium:options': {
automationName: 'UiAutomator2',
// While Appium v1 supports relative paths,it's more safe to use absolute paths instead.
// Appium v2 does not support relative paths.
app: `${__dirname}/nightwatch/sample-apps/wikipedia.apk`,
appPackage: 'org.wikipedia',
appActivity: 'org.wikipedia.main.MainActivity',
appWaitActivity: 'org.wikipedia.onboarding.InitialOnboardingActivity',
// 'chromedriver' binary is required while testing hybrid mobile apps.
//
// Set `chromedriverExecutable` to '' to use binary from `chromedriver` NPM package (if installed).
// Or,put '--allow-insecure=chromedriver_autodownload' in `cli_args` property of `selenium`
// config (see 'app' env above) to automatically download the required version of chromedriver
// (delete `chromedriverExecutable` capability below in that case).
chromedriverExecutable: '',
newCommandTimeout: 0,
// add device id of the device to run tests on,if multiple devices are online
// Run command: `$ANDROID_HOME/platform-tools/adb devices` to get all connected devices
// udid: '',
}
}
},
}
}
Step 8
Add the following sample test file under the nightwatch/examples/mobile-app-tests/wikipedia-android.js file:
describe('Wikipedia Android app test',function(){
before(function(app) {
app.click('id','org.wikipedia:id/fragment_onboarding_skip_button');
});
it('Search for BrowserStack',async function(app) {
app
.click('id','org.wikipedia:id/search_container')
.sendKeys('id','org.wikipedia:id/search_src_text','browserstack')
.click({selector: 'org.wikipedia:id/page_list_item_title',locateStrategy: 'id',index: 0})
.waitUntil(async function() {
// wait for webview context to be available
const contexts = await this.appium.getContexts();
return contexts.includes('WEBVIEW_org.wikipedia');
})
.appium.setContext('WEBVIEW_org.wikipedia')
.assert.textEquals('.pcs-edit-section-title','BrowserStack'); // command run in webview context
});
});
And done! 🎉 Your Android setup is now complete.
iOS
Step 1 Go the to the Nightwatch project directory and run the following command
npx @nightwatch/mobile-helper ios --setups
Step 2 Answer the questions based on your requirements.
Step 3 After verification if all requirementss are not met or if there is an error,follow the instructions to resolve them.
Step 4 After this,setup Appium 2 in your project using
npm i appium@next --save-devStep 5 Install Appium XCUITest driver for iOS using
npx appium driver install xcuitestStep 6 Download the sample wikipedia app and save it in your project's root directory (alongside nightwatch.conf.js file).
Step 7 Add Nightwatch environments for iOS simulators and real devices
{
...
'test_settings':{
// other envs above this line
app: {
selenium: {
start_process: true,
use_appium: true,
host: 'localhost',
port: 4723,
server_path: '',
// args to pass when starting the Appium server
cli_args: [
// automatically download the required chromedriver
// '--allow-insecure=chromedriver_autodownload'
],
// Remove below line if using Appium v1
default_path_prefix: ''
},
webdriver: {
timeout_options: {
timeout: 150000,
retry_attempts: 3
},
keep_alive: false,
start_process: false
}
},
'app.ios.simulator': {
extends: 'app',
'desiredCapabilities': {
// More capabilities can be found at https://github.com/appium/appium-xcuitest-driver#capabilities
browserName: null,
platformName: 'ios',
// `appium:options` is not natively supported in Appium v1,but works with Nightwatch.
// If copying these capabilities elsewhere while using Appium v1,make sure to remove `appium:options`
// and add `appium:` prefix to each one of its capabilities,e.g. change 'app' to 'appium:app'.
'appium:options': {
automationName: 'XCUITest',
// platformVersion: '15.5',
deviceName: 'iPhone 13',
// While Appium v1 supports relative paths,it's more safe to use absolute paths instead.
// Appium v2 does not support relative paths.
app: `${__dirname}/wikipedia.zip`,
bundleId: 'org.wikimedia.wikipedia',
newCommandTimeout: 0
}
}
},
'app.ios.real': {
extends: 'app',
'desiredCapabilities': {
// More capabilities can be found at https://github.com/appium/appium-xcuitest-driver#capabilities
browserName: null,
platformName: 'ios',
// `appium:options` is not natively supported in Appium v1,but works with Nightwatch.
// If copying these capabilities elsewhere while using Appium v1,make sure to remove `appium:options`
// and add `appium:` prefix to each one of its capabilities,e.g. change 'app' to 'appium:app'.
'appium:options': {
automationName: 'XCUITest',
// While Appium v1 supports relative paths,it's more safe to use absolute paths instead.
// Appium v2 does not support relative paths.
app: `${__dirname}/wikipedia.zip`,
bundleId: 'org.wikimedia.wikipedia',
newCommandTimeout: 0,
// add udid of the device to run tests on. Or,pass the id to `--deviceId` flag when running tests.
// device id could be retrieved from Xcode > Window > 'Devices and Simulators' window.
// udid: '00008030-00024C2C3453402E'
}
}
},
}
}
Step 8
Add the following sample test file under the nightwatch/examples/mobile-app-tests/wikipedia-ios.js file
describe('Wikipedia iOS app test',function() {
before(function(app) {
app.click('xpath','//XCUIElementTypeButton[@name="Skip"]');
});
it('Search for BrowserStack',async function(app) {
app
.useXpath()
.click('//XCUIElementTypeSearchField[@name="Search Wikipedia"]')
.sendKeys('//XCUIElementTypeSearchField[@name="Search Wikipedia"]','browserstack')
.click('//XCUIElementTypeStaticText[@name="BrowserStack"]')
.waitUntil(async function() {
// wait for webview context to be available
const contexts = await this.appium.getContexts();
return contexts.length > 1;
},5000)
.perform(async function() {
// switch to webview context
const contexts = await this.appium.getContexts();
await this.appium.setContext(contexts[1]);
})
.useCss()
.assert.textEquals('.pcs-edit-section-title','BrowserStack'); // command run in webview context
});
});
Congratulations,your iOS setup is complete
Validating the setup
Once your installation is complete,validate the setup with the following command to run sample tests on Android emulators using
npx nightwatch nightwatch/examples/mobile-app-tests/wikipedia-android.js --env app.android.emulator
or on iOS simulators using
npx nightwatch./nightwatch/examples/mobile-app-tests/wikipedia-ios.js --env app.ios.simulator
Install Appium Inspector
Appium inspector would be very helpful in identifying selectors and debugging tests. Inorder to install Appium inspector,go to Appium Inspector releases and download the latest version. After installing,simply open Appium Inspector and you are ready to go. Below is how the application will look like on Mac.
Recommended next steps
Now that you understand how mobile app testing works with Nightwatch,let's dive into the setup. We recommend you cover all the below listed topics to get a complete understanding on mobile app automated testing using Nightwatch.
Write tests to automate native applications Run tests on virtual devices,real devices & cloud providers Debug tests