Skip to content

Latest commit

 

History

History
192 lines (132 loc) · 9.19 KB

E2ETest.md

File metadata and controls

192 lines (132 loc) · 9.19 KB

Author and Run E2E Test for React Native Windows

E2E project structure

E2E test app, test library and test cases are in packages/E2ETest/, and they are organized as below.

  • app – the RN app folder

  • reports – save the test reports

  • wdio – includes the page object libraries and test cases.

  • windows – the UWP native app

  • wdio.config.js – default parameters used by wdio test runner

Run E2E test

Procedures to setup and run E2E test

  1. Install React Native command line interface using NPM:
npm install -g react-native-cli

  1. Download and install WinAppDriver WinAppDriver v1.1

  2. Install node packages, build JS

  • C:\repo>cd react-native-windows
  • C:\repo\react-native-windows>yarn install
  • C:\repo\react-native-windows>yarn build
  1. Run the bundle server
  • C:\repo\react-native-windows>cd packages\E2ETest
  • C:\repo\react-native-windows\packages\E2ETest>yarn run start
  • wait until you see 'Loading dependency graph, done.'
  1. Ensure debugger is running

Open Chrome and navigate to http://localhost:8081/debugger-ui/ in a new tab. Press F12 or Ctrl+Shift+I in Chrome to open its Developer Tools.

  1. Open a new command prompt, build native app, deploy and launch e2e testing
  • C:\repo\react-native-windows>cd packages\E2ETest
  • C:\repo\react-native-windows\packages\E2ETest>yarn run e2e

Procedures to only run E2E test

Make sure bundle server is running(see above 'Run the bundle server' step) and chrome windows is open (see above 'Ensure debugger is running' step)

  • run all specs

packages\E2ETest>yarn run test

  • Run one spec

packages\E2ETest>yarn run testspec wdio\test\login.spec.ts

Commands help with build and test

Command Description Example
test Run all specs yarn run test
testspec Run only one spec yarn run testspec wdio\test\login.spec.ts
buildapp build the native app with BUNDLE macro
--release specify if it's a release version
--arch [string] The build architecture (ARM, x86, x64) (default: "x86")		 yarn run buildapp
yarn run buildapp --release
yarn run buildapp --arch x64
yarn run buildapp --arch x64 –release
deployapp Deploy the built test app, you can pair it with --release and --arch yarn run deployapp
yarn run deployapp --release
yarn run deployapp --arch x64
yarn run deployapp --arch x64 –release
e2e Build and deploy the solution (x86, debug), launch metro bundler and run all e2e specs yarn run e2e
start Launch the metro bundler yarn run start
react-native run-windows For details, see: react-native run-windows --help react-native run-windows --no-launch --no-packager --no-deploy --bundle

Authoring E2E Test

Create a new page for the test app

New test page should be in E2E/app/ or its subfolder.

Hooks are recommended to author the test page. (see https://reactjs.org/docs/hooks-intro.html to learn more about Hooks)

// LoginTestPage.ts
export function LoginTestPage() {
  const [loginState, setLoginState] = useState('');
  …
  return (
    <View>
      <TextInput style={styles.input}
        placeholder='Email or Mobile Num'
        placeholderTextColor='rgba(225,225,225,0.7)'
        testID={USERNAME_ON_LOGIN}
        onChange={(text) => { setUserName(text.nativeEvent.text) }} />
   	…
 </View >);
}

Add the new page to TestPages.ts

// TestPages.ts
const TestPages: ITestPage[] = [
…
  {
    testId: LOGIN_TESTPAGE,
    description: 'Login Test Page',
    content: LoginTestPage,
  },

Put new testIDs in Consts.ts

//Consts.ts
export const USERNAME_ON_LOGIN = 'UserName';

Create a Page Object to match with the page in test app

Page Objects should be put in E2ETest/wdio/pages and its subfolder.

// LoginPage.ts
class LoginPage extends BasePage {
  isPageLoaded() {
    return super.isPageLoaded() && this._userName.isDisplayed();
  }

  setLoginInfo(userName: string, password: string) {
    this._userName.setValue(userName);
    this._password.setValue(password);
  }

  submitForm() {
    this._submit.click();
  }

  private get _userName() {
    return By(USERNAME_ON_LOGIN);
  }

  private get _password() {
    return By(PASSWORD_ON_LOGIN);
  }

  private get _submit() {
    return By(SUBMIT_ON_LOGIN);
  }
}
export default new LoginPage();

Locator is defined in a get function and just returns By(testID), then you can use all element function like 'click' which is defined in WebDriverIO.

Pay attention to the last line of the LoginPage, we always export a new instance of this object. It makes the test case more readable.

Write a test spec to use the Page Object

// login.spec.ts
before(() => {
  HomePage.backToHomePage();
  HomePage.clickAndGotoLoginPage();
});

describe('LoginTest', () => {
  it('Login Success', () => {
    LoginPage.setLoginInfo('username', 'password');
    LoginPage.submitForm();
    assert.equal(LoginPage.getLoginResult(), 'Success');
  });

More

To understand more about the E2E testing, please refer to More about E2E test

Restrictions

  1. If you made any change to native code, you must rebuild the native app and redeploy it.
  2. The same session can't be shared by multiple specs. The framework always kills the old app and launches a new session.

Known issue

  1. For yarn run e2e or yarn run e2ebundle, the test continues even if one of steps like build failed. see bug 3136 for more details