Integrate Nightwatch test suite with App Accessibility testing

Set your BrowserStack credentials

Save your BrowserStack credentials as environment variables to make it easier to run your test suite from your local or CI environment.

# 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

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
   

Navigate to the configuration folder

Navigate to the configuration folder of your Nightwatch test suite.

cd resources/config

Modify the configuration file

The nightwatch.conf.js file contains the necessary capabilities to run your tests on BrowserStack. Modify the file to include the App Accessibility testing options:

1. Open the nightwatch.conf.js file in an editor.
2. Add the projectName and buildName.
3. Add an accessibility flag under bstack:options and set it to true.
4. Configure the accessibilityOptions property to set various accessibility testing options. For details, see Configuration options.
5. Specify all the device, OS, and OS version combinations that you want to test in the test_settings section.
6. 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,
    }
  },
}

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-project2",
      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