Skip to main content
🎉 A11y Issue Detection Agent is now live! Detect accessibility issues like a WCAG expert with AI. Try now!
No Result Found
Connect & Get help from fellow developers on our Discord community. Ask the CommunityAsk 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 userName and accessKey from 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

  1. Update package versions in the package.json file. For App Accessibility testing, the minimum supported Nightwatch plugin version is 3.8.0 and the Nightwatch core version is 3.13.0.
     ...
       "dependencies": {
         "browserstack-local": "^1.4.8",
         "nightwatch": "3.13.0"
       },
       "license": "MIT",
       "devDependencies": {
         "@nightwatch/browserstack": "3.8.0"
       }
     ...
    
  2. 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:

  1. Add an accessibility flag under bstack:options and set it to true.
  2. Configure the accessibilityOptions property to set various accessibility testing options. For details, see Configuration options.
  3. 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.


Visit 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





Thank you for your valuable feedback

Is this page helping you?

Yes
No

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!

Talk to an Expert
Download Copy Check Circle