E2E Test

Note:

This wiki page would not be maintained, and is replaced with E2E Test in source code.

Overview

WinAppDriver is recommended to do E2E test for Windows apps. There are two popular JavaScript WebDrivers which could be used for RNW E2E testing: selenium-webdriver and webdriverio.

I prototyped and successfully made the two webdrivers to be happy with WinAppDriver. And you can use any of them on your project.

selenium-webdriver

selenium-webdriver is the offical WebDriver JavaScript binding from selenium project. Unfortunately selenium-webdriver doesn't support Mobile JSON Wire Protocol Specification. selenium-appium is selenium-webdriver extension to make selenium-webdriver to drive Appium to run automation.

Here are selenium-webdriver examples which is integrated with Jest

• https://github.com/react-native-windows/selenium-webdriver-winappdriver-example
• https://github.com/react-native-windows/selenium-appium/tree/master/example

webdriverio

WinAppDriver doesn't implement w3c WebDriver completely, so currently I workaround the problem by WebDriver. In your project, you have to use private webdriver in package.json lke this:

    "webdriverio": "^5.10.1",
    "webdriver": "git+https://github.com/react-native-windows/webdriver.git",

I already created a PR on WinAppDriver to fix this problem, but no ETA for the final release date.

WebDriver IO API link

E2E test on react-native-windows project.

E2E test is in packages\E2ETest, currently I put the WebDriverIO test case in wdio. and this is the structure of the project

• app: the JavaScript app just like RNTester
• reports: test results
• wdio: test cases and page objects
• windows: UWP app

Procedures to run E2E test case:

1. Download and install WinAppDriver WinAppDriver v1.1
2. Install node packages, build, deploy and launch e2e testing

• C:\repo>cd react-native-windows
• C:\repo\react-native-windows>yarn install
• C:\repo\react-native-windows>yarn build
• C:\repo\react-native-windows>cd packages\E2ETest
• C:\repo\react-native-windows\packages\E2ETest>yarn run e2e

3. Author test case and verify tests

a. run all tests

C:\repo\react-native-windows\packages\E2ETest>yarn run test

b. Run one spec

C:\repo\react-native-windows\packages\E2ETest>yarn run dev wdio\test\login.spec.ts

Authoring test case

PageObject pattern is suggested in this project. All testID are defined in Consts.ts, which would be shared by app, test page object and test cases.

1. Create a new TestPage in app. For example: LoginTestPage.tsx
2. Add the new pages to TestPages.tsx.
3. Defined a PageObject in wdio\Pages, for example, LoginPage.ts
4. Write spec in wdio\test\, for example, login.spec.ts

Notes

1. Don't forget get when define the locator in page object.

class LoginPage extends BasePage {
get userName() {
    return By(USERNAME_ON_LOGIN);
  }

2. testId should be defined in Consts.ts