How to: Use Jest + selenium-webdriver + WinAppDriver to do Windows UI testing

WinAppDriver is the recommended driver by Microsoft to do Windows UI testing for UWP, WinForms, WPF and Win32 apps. It implements JSON Wire Protocol, so the client can be any language which Selenium provided: C#, Java, Python, JavaScript, Ruby.

There are two popular WebDrivers in Javascript which are the best choices to integrate with WinAppDriver: selenium-webdriver and WebDriverIO.

In this article, I only focus on selenium-webdriver and provide an step by step guide to help you use selenium-webdriver and WinAppDriver for your automation testing. Although I use Jest in below example, you can easily switch it to jasmine and other test runner.

selenium-webdriver don’t support mobile json wire protocol yet, so I created selenium-appium project to extend selenium-webdriver functionality and provides PageObject pattern to author the test case.

Preparation

nodejs, npmjs and yarn

Installation

1. Install the latest stable WinAppDriver from https://github.com/Microsoft/WinAppDriver/releases
2. Make and init a project

mkdir calculatorTest && cd calculatorTest && npm init -y

3. Install webdriver related libraries

yarn add -D selenium-webdriver appium selenium-appium

4. Install Jest related packages

yarn add -D jest @types/jest babel-jest @babel/core @babel/preset-env @babel/preset-typescript

5. Create babel.config.js (see https://jestjs.io/docs/en/getting-started#using-typescript) in the root of the project.

// babel.config.js
module.exports = {
presets: [
[‘@babel/preset-env’, {targets: {node: ‘current’}}],
‘@babel/preset-typescript’,
],
};

6. Update package.json, add appium and jest command.

“scripts”: {

“appium”: “appium”,

“jest”: “jest”

}

7. Get the app id which would be used by WinAppDriver.

For most of the UWP apps, the appid is $(PackageFamilyName)!App. Let’s make Alarm example as a example, the app id is Microsoft.WindowsAlarms_8wekyb3d8bbwe!App

https://jcutrer.com/windows/find-aumid provides guide to find app id for all kinds of Windows apps.

PS C:\Users\licanhua> Get-AppxPackage *Alarm*

…

PackageFamilyName : Microsoft.WindowsAlarms_8wekyb3d8bbwe

8. Make TestEnviroment.ts which would be shared by all test spec

import { driver, windowsAppDriverCapabilities } from ‘selenium-appium’

const appId = ‘Microsoft.WindowsCalculator_8wekyb3d8bbwe!App’

class TestEnviroment {

setup() {

jest.setTimeout(60000);

const capabilities = windowsAppDriverCapabilities(appId);

return driver.startWithCapabilities(capabilities);

}

teardown() {

return driver.quit();

}

}

export default new TestEnviroment();

9. create test spec calculator.spec.ts under __test__

import { By2 } from ‘selenium-appium’
import TestEnviroment from ‘../TestEnviroment’

const oneButton = By2.nativeName(‘One’);
const plusButton = By2.nativeName(‘Plus’);
const sevenButton = By2.nativeName(‘Seven’);
const equalButton = By2.nativeName(‘Equals’);
const calculatorResult = By2.nativeAccessibilityId(‘CalculatorResults’);

beforeAll(() => {
return TestEnviroment.setup();;
})

afterAll(() => {
return TestEnviroment.teardown();
})

describe(‘Calculator Test’, () => {
test(‘Plus’, async () => {
await oneButton.click();
await plusButton.click();
await sevenButton.click();
await equalButton.click();
expect(await calculatorResult.getText()).toBe(‘Display is 8’);
})
});

10. Launch appium

yarn run appium

11. Open another console and run Jest Test

yarn run jest

Source code:

https://github.com/react-native-windows/selenium-webdriver-winappdriver-example