Skip to content

E2E Test

Jump to bottom
Canhua Li edited this page Sep 4, 2019 · 8 revisions

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

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.

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 ReactUWPTestApp 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>react-native run-windows Make sure this UWP app is launched successfully. Note: if you fail to deploy it, please deploy it from VS

  3. Open another console and goto react-native-windows\packages\E2ETest 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);
  }
  1. testId should be defined in Consts.ts
Clone this wiki locally