Integrate accessibility testing with App Automate

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 WebDriverIO dependencies

Open the package.json file of your project and update the WDIO dependency to either version 8 or 9, matching your current setup. This applies to both Android and iOS projects.

See the following sample package.json file with WDIO dependencies set to version 9.

...
"dependencies": {
    "@wdio/cli": "^9",
    "chai": "^4.3.6",
    "webdriverio": "^9"
  },
  "devDependencies": {
    "@wdio/browserstack-service": "^9",
    "@wdio/local-runner": "^9",
    "@wdio/mocha-framework": "^9"
  }
...

Install dependencies

Run the following command to install all WebDriverIO dependencies.

npm install

Modify your WebdriverIO config file

Update the following parameters in the configuration file to run automated accessibility tests on BrowserStack.

If you are using the BrowserStack sample repository, open the parallel.conf.js file from the /examples/run-parallel-test/parallel.conf.js directory to set the required capabilities to run your tests.

Update the following parameters in the configuration file.

1. Add browserstack to the services section of your configuration file if it’s not already present.
2. Set the accessibility flag to true to enable accessibility testing. By default, the flag is set to false.
3. Add the relative or absolute path of the app you want to test to the app property. For example, app: ./examples/BStackSampleApp.apk.
   You can upload an Android app (.apk or .aab file) or an iOS app (.ipa file) from your local filesystem.
4. Set the accessibilityOptions property to configure various accessibility testing options. For details, see Configuration options.
5. Increase the test timeout value, for example timeout: 100000. You must increase the test timeout value to give enough time for the accessibility checks to run.
6. If you are upgrading WDIO version to v9, you must pass the relative path of test file to the specs property, for example, ./specs/single_test.js.
7. Set the projectName and buildName.

Click the following file for a sample WDIO configuration

exports.config = {
  user: process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
  key: process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY',
  
  hostname: 'hub.browserstack.com',
  services: [
    [
      'browserstack',
      {
        accessibility: true,
        buildIdentifier: '${BUILD_NUMBER}',
        browserstackLocal: true,
        opts: { forcelocal: false, localIdentifier: "webdriverio-appium-app-browserstack-repo" },
        app: process.env.BROWSERSTACK_APP_PATH || './examples/WikipediaSample.apk',
        accessibilityOptions: {
          wcagVersion: 'wcag21aaa',
          scannerProcessingTimeout: 10,
          includeIssueType: {
            bestPractice: true
          }
        },
      }
    ]
  ],
  capabilities: [{
    'bstack:options': {
      deviceName: 'Google Pixel 8',
      osVersion: "14.0"
    }
  }, {
    'bstack:options': {
      deviceName: 'Samsung Galaxy S21',
      osVersion: "11.0"
    }
  }],
  commonCapabilities: {
    'bstack:options': {
      projectName: "Your static project name goes here",
      buildName: "Your static build/job name of CI goes here",
      sessionName: 'BStack parallel webdriverio-appium',
      debug: true,
      networkLogs: true,
      source: 'webdriverio:appium-sample-sdk:v1.0'
    }
  },
  maxInstances: 10,
  updateJob: false,
  specs: [
    './specs/single_test.js'
  ],
  exclude: [],
  logLevel: 'info',
  coloredLogs: true,
  screenshotPath: './errorShots/',
  baseUrl: '',
  waitforTimeout: 10000,
  connectionRetryTimeout: 90000,
  connectionRetryCount: 3,
  framework: 'mocha',
  mochaOpts: {
    ui: 'bdd',
    timeout: 1000000
  }
};
// Code to support common capabilities
exports.config.capabilities.forEach(function(caps){
  for(let key in exports.config.commonCapabilities)
    caps[key] = { ...caps[key], ...exports.config.commonCapabilities[key]};
});

Run the automated test

In the sample test repository, run the following command:

npm run test

After the test completes, access the report in your project folder on the App Accessibility dashboard.

Visit App Accessibility dashboard