Connect & Get help from fellow developers on our Discord community.
Ask the Community
Run accessibility checks on a Nightwatch sample repo
Try out App Accessibility Automation with BrowserStack’s sample repository.
Prerequisites
- Ensure you have a BrowserStack Username and Access Key. You can obtain your
userNameandaccessKeyfrom the Account & Profile section on the dashboard.
If you have not yet created an account, sign up for a free trial. - Node.js 14+ installed on your system. You can download the updated Node version from nodejs.org.
Run a sample build
Clone the sample repository
Clone the BrowserStack Nightwatch sample repository and navigate to the folder:
git clone https://github.com/browserstack/nightwatch-appium-app-browserstack.git
cd nightwatch-appium-app-browserstack
Update and install dependencies
- Update package versions in the
package.jsonfile. For App Accessibility testing, the minimum supported Nightwatch plugin version is3.8.0and the Nightwatch core version is3.13.0.... "dependencies": { "browserstack-local": "^1.4.8", "nightwatch": "3.13.0" }, "license": "MIT", "devDependencies": { "@nightwatch/browserstack": "3.8.0" } ... - Install the packages:
npm install
Set your BrowserStack credentials
Save your BrowserStack credentials as environment variables:
# Set these values in your ~/.zprofile (zsh) or ~/.profile (bash)
export BROWSERSTACK_USERNAME=YOUR_USERNAME
export BROWSERSTACK_ACCESS_KEY=YOUR_ACCESS_KEY
setx BROWSERSTACK_USERNAME "YOUR_USERNAME"
setx BROWSERSTACK_ACCESS_KEY "YOUR_ACCESS_KEY"
set BROWSERSTACK_USERNAME=YOUR_USERNAME
set BROWSERSTACK_ACCESS_KEY=YOUR_ACCESS_KEY
Add the accessibility flag
Open the nightwatch.conf.js file in an editor and add the accessibility configuration:
- Add an
accessibilityflag underbstack:optionsand set it totrue. - Configure the
accessibilityOptionsproperty to set various accessibility testing options. For details, see Configuration options. - Save the file.
const additonalEnvironments = require("./environments");
if(!additonalEnvironments.test_settings)
additonalEnvironments.test_settings = {};
const browserStack = {
webdriver: {
start_process: false
},
selenium: {
host: 'hub.browserstack.com',
port: 443
},
desiredCapabilities: {
'bstack:options': {
userName: process.env.BROWSERSTACK_USERNAME,
accessKey: process.env.BROWSERSTACK_ACCESS_KEY,
appiumVersion: '1.22.0',
accessibility: true,
accessibilityOptions: {
wcagVersion: 'wcag21aaa',
scannerProcessingTimeout: 20
}
}
},
}
const nightwatchConfigs = {
src_folders: [],
live_output: true,
plugins: ['@nightwatch/browserstack'],
// browserstack plugin settings...
'@nightwatch/browserstack': {
browserstackLocal: false, // set true to manage browserstack local tunnel. Defaults to false.
test_observability: {
enabled: true,
user: process.env.BROWSERSTACK_USERNAME,
key: process.env.BROWSERSTACK_ACCESS_KEY,
projectName: "browserstack-appium-nightwatch-example-project",
buildName: "browserstack-appium-nightwatch-example-build",
}
},
test_settings: {
default: {
launch_url: 'https://nightwatchjs.org'
},
browserstack: {
...browserStack
},
"browserstack.android_01": {
extends: 'browserstack',
'desiredCapabilities': {
browserName: null,
'appium:options': {
automationName: 'UiAutomator2',
// custom id for the uploaded app: https://www.browserstack.com/docs/app-automate/appium/upload-app-define-custom-id
app: 'bs_sample_android_app',
platformVersion: '11.0',
deviceName: 'Google Pixel 5'
},
appUploadPath: 'apps/android_app.apk'
}
},
"browserstack.ios_01": {
extends: 'browserstack',
'desiredCapabilities': {
browserName: null,
'appium:options': {
automationName: 'XCUITest',
// custom id for the uploaded app: https://www.browserstack.com/docs/app-automate/appium/upload-app-define-custom-id
app: 'bs_sample_ios_app',
platformVersion: '16',
deviceName: 'iPhone 14'
},
appUploadPath: 'apps/ios_app.ipa'
}
},
}
}
for(let key in additonalEnvironments.test_settings) {
nightwatchConfigs.test_settings[key] = {
...browserStack,
...additonalEnvironments.test_settings[key]
};
}
module.exports = nightwatchConfigs;
Run the automated test
Run the test using one of the following commands based on your testing platform:
npm run single-android
npm run single-ios
View the Accessibility test report
After the test completes, access the report in your project folder on the App Accessibility dashboard.
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!