SlideShare a Scribd company logo

QA Fest 2018. Adam Stasiak. React Native is Coming – the story of hybrid mobile application testing

Q
QAFest

The document covers the testing of hybrid mobile applications using React Native and detox framework. It discusses various testing approaches, including native white box tests, cross-platform black box tests, and gray box tests, while providing a guide on setting up detox in existing projects. Additionally, it includes examples and code snippets for writing test scripts and integrating tests with CI tools like GitLab CI.

Education
1 of 80
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
REACT Native is coming The story of hybrid mobile application testing
Agenda
Agenda 1. Introduction 2. Cross-platform frameworks for mobile development 3. UI testing approaches for hybrid apps 4. Detox guide for applying UI tests in React Native projects
Agenda 1. Introduction 2. Cross-platform frameworks for mobile development 3. UI testing approaches for hybrid apps 4. Detox guide for applying UI tests in React Native projects
Agenda 1. Introduction 2. Cross-platform frameworks for mobile development 3. UI testing approaches for hybrid apps 4. Detox guide for applying UI tests in React Native projects
Agenda 1. Introduction 2. Cross-platform frameworks for mobile development 3. UI testing approaches for hybrid apps 4. Detox guide for applying UI tests in React Native projects
Long Story Short
SOme Time Ago... Customers And Their money
meantime in Software Houses
But Now Customers And Their money
Oh no ! O Nie ! Para Pollo ! Zonk !
Meanwhile in Software Houses
Cross Platform frameworks
How to Automate this as before ???
The Native white Box Test
The Native white Box Test + Fast + Easy setup + Wide range of open source helpers + Compatible with Cloud Device Farms
The Native white Box Test + Fast + Easy setup + Wide range of open source helpers + Compatible with Cloud Device Farms − Different languages in project repository − Duplicated test code
The Cross Platform Black Box Test
The Cross Platform Black Box Test + Many supported languages + Wide community + Similar to Selenium + Single test code base + Compatible with Cloud Device Farms
The Cross Platform Black Box Test + Many supported languages + Wide community + Similar to Selenium + Single test code base + Compatible with Cloud Device Farms − Slow − Difficult debugging − Lack of stability
The Cross Platform Gray Box Test
The Cross Platform Gray Box Test + Fast + Easy setup + Single test code base + The same language as default project one + Close integration with source code + API designed for a specific platform
The Cross Platform Gray Box Test + Fast + Easy setup + Single test code base + The same language as default project one + Close integration with source code + API designed for a specific platform − No way / difficult to integrate with Cloud Device Farm − No outspread community − Often still not developed enough
Based on experience with React Native
Automation Guide with Detox - cross platform React Native Framework
How to add Detox to an existing project - Package.json file
How to add Detox to an existing project - Package.json file "detox": {
How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": {
How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/PolideaSample.app", "build": "xcodebuild -project ios/PolideaSample.xcodeproj -scheme PolideaSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone X" }, "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_5X_API_24" } } } }
How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/PolideaSample.app", "build": "xcodebuild -project ios/PolideaSample.xcodeproj -scheme PolideaSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone X" }, "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_5X_API_24" } } } }
How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/PolideaSample.app", "build": "xcodebuild -project ios/PolideaSample.xcodeproj -scheme PolideaSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone X" }, "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_5X_API_24" } } } }
How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/PolideaSample.app", "build": "xcodebuild -project ios/PolideaSample.xcodeproj -scheme PolideaSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone X" }, "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_5X_API_24" } } } }
How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/PolideaSample.app", "build": "xcodebuild -project ios/PolideaSample.xcodeproj -scheme PolideaSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone X" }, "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_5X_API_24" } } } }
How to make apps testable? <Text style={styles.textStyle}> {!this.state.clicked? defaultButtonText: "Polidea"} </Text> <Text accessible= {true} testID= {"ButtonText"} accessibilityLabel= {"ButtonTextDesc"} style={styles.textStyle}> {!this.state.clicked? defaultButtonText: "Polidea"} </Text>
How to make apps testable? <Text accessible= {true} testID= {"ButtonText"} accessibilityLabel= {"ButtonTextDesc"} style={styles.textStyle}> {!this.state.clicked? defaultButtonText: "Polidea"} </Text>
How to write Test scripts - API Overview Detox Object Test plan configuration Device Object Key events, Gestures, Device settings Matchers, Actions, Expectations Finding Views, User’s actions, Validation API
How to write Test scripts - Init script by example require('babel-polyfill');
How to write Test scripts - Init script by example require('babel-polyfill'); const detox = require('detox'); const config = require('../package.json').detox;
How to write Test scripts - Init script by example require('babel-polyfill'); const detox = require('detox'); const config = require('../package.json').detox; beforeAll(async () => { await detox.init(config); });
How to write Test scripts - Init script by example require('babel-polyfill'); const detox = require('detox'); const config = require('../package.json').detox; beforeAll(async () => { await detox.init(config); }); beforeEach(async () => { await adapter.beforeEach(); });
How to write Test scripts - Init script by example require('babel-polyfill'); const detox = require('detox'); const config = require('../package.json').detox; beforeAll(async () => { await detox.init(config); }); beforeEach(async () => { await adapter.beforeEach(); }); afterAll(async () => { await adapter.afterAll(); await detox.cleanup(); });
How to write Test scripts - Test class by example
How to write Test scripts - Test class by example describe('Example', () => {
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => {
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative();
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText')))
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible()
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); });
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText'))
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText')).tap();
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText')).tap(); await waitFor(element(by.text("Press Me")))
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText')).tap(); await waitFor(element(by.text("Press Me"))).toNotExist()
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText')).tap(); await waitFor(element(by.text("Press Me"))).toNotExist().withTimeout(2000);
How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText')).tap(); await waitFor(element(by.text("Press Me"))).toNotExist().withTimeout(2000); await waitFor(element(by.text("Polidea"))).toBeVisible().withTimeout(100); }); })
How to integrate With CI - Gitlab CI
How to integrate With CI - Gitlab CI detox_test:iOS: detox_test:android:
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: detox_test:android: stage: test before_script:
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script:
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 &
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137)
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) tags: detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137) tags:
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - xcode-9.2 detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - android-emu
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - xcode-9.2 detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - android-emu services: - name: android-emulator:latest
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - xcode-9.2 detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - android-emu services: - name: android-emulator:latest alias: pixel
How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - xcode-9.2 detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - android-emu services: - name: android-emulator:latest alias: pixel entrypoint: ["/start-emulator.sh", "android-23", "x86", "pixel"]
Show time!
QA Fest 2018. Adam Stasiak. React Native is Coming – the story of hybrid mobile application testing
Key TAkeaways ● Cross platform apps can be tested with the same frameworks as native ones ● For typical apps you can avoid code duplication and use cross- platform frameworks ● Detox is a great tool for React Native UI testing
Questions ? :)
Thank You! You can read about Testing and more at polidea.com/blog @astasIcons by: Freepik and Roundicons

More Related Content

PDF
[QE 2018] Adam Stasiak – Nadchodzi React Native – czyli o testowaniu mobilnyc...
Future Processing
 
PPTX
[AnDevCon 2016] Mutation Testing for Android
Hazem Saleh
 
PDF
Efficient JavaScript Unit Testing, JavaOne China 2013
Hazem Saleh
 
PDF
vJUG - The JavaFX Ecosystem
Andres Almiray
 
PDF
Dependency Injection
ColdFusionConference
 
PDF
Node.js vs Play Framework
Yevgeniy Brikman
 
PDF
Unit testing - A&BP CC
JWORKS powered by Ordina
 
PDF
Efficient JavaScript Unit Testing, May 2012
Hazem Saleh
 
[QE 2018] Adam Stasiak – Nadchodzi React Native – czyli o testowaniu mobilnyc...
Future Processing
 
[AnDevCon 2016] Mutation Testing for Android
Hazem Saleh
 
Efficient JavaScript Unit Testing, JavaOne China 2013
Hazem Saleh
 
vJUG - The JavaFX Ecosystem
Andres Almiray
 
Dependency Injection
ColdFusionConference
 
Node.js vs Play Framework
Yevgeniy Brikman
 
Unit testing - A&BP CC
JWORKS powered by Ordina
 
Efficient JavaScript Unit Testing, May 2012
Hazem Saleh
 

What's hot (20)

PDF
Testing Web Applications
Seth McLaughlin
 
KEY
Working Effectively With Legacy Code
scidept
 
PDF
Unit-testing and E2E testing in JS
Michael Haberman
 
PDF
PHP Unit Testing in Yii
IlPeach
 
PDF
Codeception introduction and use in Yii
IlPeach
 
PDF
Modern Release Engineering in a Nutshell - Why Researchers should Care!
Bram Adams
 
PPTX
Intro to JavaScript Tooling in Visual Studio Code
ColdFusionConference
 
PDF
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Cogapp
 
ODP
Integration Testing in Python
Panoptic Development, Inc.
 
PDF
Acceptance & Functional Testing with Codeception - Devspace 2015
Joe Ferguson
 
PDF
Front-End Testing: Demystified
Seth McLaughlin
 
PDF
The Play Framework at LinkedIn
Yevgeniy Brikman
 
PDF
Codeception
Jonathan Lau
 
PPTX
Codeception
少東 張
 
PPTX
JavaLand - Integration Testing How-to
Nicolas Fränkel
 
PPTX
Apache ant
Yuriy Galavay
 
PDF
React Ecosystem
Craig Jolicoeur
 
PDF
Codeception presentation
Andrei Burian
 
PDF
Testing PHP with Codeception
John Paul Ada
 
PDF
JavaFX8 TestFX - CDI
Sven Ruppert
 
Testing Web Applications
Seth McLaughlin
 
Working Effectively With Legacy Code
scidept
 
Unit-testing and E2E testing in JS
Michael Haberman
 
PHP Unit Testing in Yii
IlPeach
 
Codeception introduction and use in Yii
IlPeach
 
Modern Release Engineering in a Nutshell - Why Researchers should Care!
Bram Adams
 
Intro to JavaScript Tooling in Visual Studio Code
ColdFusionConference
 
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Cogapp
 
Integration Testing in Python
Panoptic Development, Inc.
 
Acceptance & Functional Testing with Codeception - Devspace 2015
Joe Ferguson
 
Front-End Testing: Demystified
Seth McLaughlin
 
The Play Framework at LinkedIn
Yevgeniy Brikman
 
Codeception
Jonathan Lau
 
Codeception
少東 張
 
JavaLand - Integration Testing How-to
Nicolas Fränkel
 
Apache ant
Yuriy Galavay
 
React Ecosystem
Craig Jolicoeur
 
Codeception presentation
Andrei Burian
 
Testing PHP with Codeception
John Paul Ada
 
JavaFX8 TestFX - CDI
Sven Ruppert
 
Ad

Similar to QA Fest 2018. Adam Stasiak. React Native is Coming – the story of hybrid mobile application testing (20)

PPTX
Detox: tackling the flakiness of mobile automation
Viktorija Sujetaitė
 
PDF
Guide to End-to-End Detox Testing Headspin
flufftailshop
 
PDF
A Detailed Guide to End-to-End Detox Testing.pdf
kalichargn70th171
 
PDF
Reactmtl meetup3-talk
Harris Robin Kalash
 
PDF
6 Popular Test Automation Tools For React Native App.pdf
flufftailshop
 
PDF
6 Popular Test Automation Tools for React Native Apps.pdf
kalichargn70th171
 
PDF
5 Popular Test Automation Tools For React Native Apps.pdf
flufftailshop
 
PPTX
Detox Mobile Automation
Sharaniya Premkumar
 
PDF
Shifting landscape of mobile automation, and the future of Appium - Jonathan ...
Applitools
 
PDF
Effective Detox Testing - React Advanced 2023
Josh Justice
 
PPTX
From React to React Native - Things I wish I knew when I started
sparkfabrik
 
PDF
[4developers2016] The ultimate mobile DX using JS as a primary language (Fato...
PROIDEA
 
PDF
React Native in 2025 - Detox or Appium.pdf
kalichargn70th171
 
PDF
Why is React Native the Best Choice for Cross-Platform Mobile App Development...
Techugo
 
PDF
React Native in Production
Seokjun Kim
 
PDF
Top 5 Android testing frameworks you need to consider in 2024.pdf
kalichargn70th171
 
PDF
Philip Shurpik "Architecting React Native app"
Fwdays
 
PDF
What to choose for Mobile app development- React Native vs Native.
Techugo
 
PPTX
NodeJs Can do that !! (NodeJs peut faire ça !!)
moassiongbon
 
PDF
Best Mobile Test Automation Solutions: Beyond Appium
Asher Hartwell
 
Detox: tackling the flakiness of mobile automation
Viktorija Sujetaitė
 
Guide to End-to-End Detox Testing Headspin
flufftailshop
 
A Detailed Guide to End-to-End Detox Testing.pdf
kalichargn70th171
 
Reactmtl meetup3-talk
Harris Robin Kalash
 
6 Popular Test Automation Tools For React Native App.pdf
flufftailshop
 
6 Popular Test Automation Tools for React Native Apps.pdf
kalichargn70th171
 
5 Popular Test Automation Tools For React Native Apps.pdf
flufftailshop
 
Detox Mobile Automation
Sharaniya Premkumar
 
Shifting landscape of mobile automation, and the future of Appium - Jonathan ...
Applitools
 
Effective Detox Testing - React Advanced 2023
Josh Justice
 
From React to React Native - Things I wish I knew when I started
sparkfabrik
 
[4developers2016] The ultimate mobile DX using JS as a primary language (Fato...
PROIDEA
 
React Native in 2025 - Detox or Appium.pdf
kalichargn70th171
 
Why is React Native the Best Choice for Cross-Platform Mobile App Development...
Techugo
 
React Native in Production
Seokjun Kim
 
Top 5 Android testing frameworks you need to consider in 2024.pdf
kalichargn70th171
 
Philip Shurpik "Architecting React Native app"
Fwdays
 
What to choose for Mobile app development- React Native vs Native.
Techugo
 
NodeJs Can do that !! (NodeJs peut faire ça !!)
moassiongbon
 
Best Mobile Test Automation Solutions: Beyond Appium
Asher Hartwell
 
Ad

More from QAFest (20)

PDF
QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QAFest
 
PPTX
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QAFest
 
PPTX
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QAFest
 
PDF
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QAFest
 
PDF
QA Fest 2019. Никита Галкин. Как зарабатывать больше
QAFest
 
PDF
QA Fest 2019. Сергей Пирогов. Why everything is spoiled
QAFest
 
PDF
QA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QAFest
 
PPTX
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QAFest
 
PPTX
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QAFest
 
PDF
QA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QAFest
 
PPTX
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QAFest
 
PDF
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QAFest
 
PPTX
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QAFest
 
PDF
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QAFest
 
PDF
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QAFest
 
PDF
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QAFest
 
PPTX
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QAFest
 
PPTX
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QAFest
 
PDF
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QAFest
 
PPTX
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QAFest
 
QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QAFest
 
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QAFest
 
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QAFest
 
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QAFest
 
QA Fest 2019. Никита Галкин. Как зарабатывать больше
QAFest
 
QA Fest 2019. Сергей Пирогов. Why everything is spoiled
QAFest
 
QA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QAFest
 
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QAFest
 
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QAFest
 
QA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QAFest
 
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QAFest
 
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QAFest
 
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QAFest
 
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QAFest
 
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QAFest
 
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QAFest
 
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QAFest
 
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QAFest
 
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QAFest
 
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QAFest
 

Recently uploaded (20)

PPTX
Renaissance Architecture: A Journey from Faith to Humanism
DrMonicaSharma
 
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
mohitsuren827
 
PDF
Pre independence Education in Inndia.pdf
goofy5603
 
PDF
Sports Quiz easy sports quiz sports quiz
nikunj2757
 
PDF
Anesthesia in Laparoscopic Surgery in India
mohitsuren827
 
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
banteamlakmebratu738
 
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
Rajshri Ghogare
 
PPTX
Lesson notes of climatology university.
sgladness67
 
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
shilpa939953
 
PPTX
GDM (1) (1).pptx small presentation for students
shrawanbpkihs
 
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
pascualasturiaskaye4
 
PDF
VCE English Exam - Section C Student Revision Booklet
jpinnuck
 
PPTX
BOWEL ELIMINATION FACTORS AFFECTING AND TYPES
PreetiSawant10
 
PDF
TR - Agricultural Crops Production NC III.pdf
avgilmegino3
 
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
Kweku Zurek
 
PDF
Classroom Observation Tools for Teachers
Nicaramirez
 
PPTX
Institutional Correction lecture only . . .
limvtheghins
 
PDF
01-Introduction-to-Information-Management.pdf
PrinceIbarra
 
PPTX
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
chetansingh379583
 
PPTX
master seminar digital applications in india
ananyaray35
 
Renaissance Architecture: A Journey from Faith to Humanism
DrMonicaSharma
 
Abdominal Access Techniques with Prof. Dr. R K Mishra
mohitsuren827
 
Pre independence Education in Inndia.pdf
goofy5603
 
Sports Quiz easy sports quiz sports quiz
nikunj2757
 
Anesthesia in Laparoscopic Surgery in India
mohitsuren827
 
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
banteamlakmebratu738
 
Pharmacology of Heart Failure /Pharmacotherapy of CHF
Rajshri Ghogare
 
Lesson notes of climatology university.
sgladness67
 
human mycosis Human fungal infections are called human mycosis..pptx
shilpa939953
 
GDM (1) (1).pptx small presentation for students
shrawanbpkihs
 
STATICS OF THE RIGID BODIES Hibbelers.pdf
pascualasturiaskaye4
 
VCE English Exam - Section C Student Revision Booklet
jpinnuck
 
BOWEL ELIMINATION FACTORS AFFECTING AND TYPES
PreetiSawant10
 
TR - Agricultural Crops Production NC III.pdf
avgilmegino3
 
102 student loan defaulters named and shamed – Is someone you know on the list?
Kweku Zurek
 
Classroom Observation Tools for Teachers
Nicaramirez
 
Institutional Correction lecture only . . .
limvtheghins
 
01-Introduction-to-Information-Management.pdf
PrinceIbarra
 
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
chetansingh379583
 
master seminar digital applications in india
ananyaray35
 

QA Fest 2018. Adam Stasiak. React Native is Coming – the story of hybrid mobile application testing

  • 1. REACT Native is coming The story of hybrid mobile application testing
  • 3. Agenda 1. Introduction 2. Cross-platform frameworks for mobile development 3. UI testing approaches for hybrid apps 4. Detox guide for applying UI tests in React Native projects
  • 4. Agenda 1. Introduction 2. Cross-platform frameworks for mobile development 3. UI testing approaches for hybrid apps 4. Detox guide for applying UI tests in React Native projects
  • 5. Agenda 1. Introduction 2. Cross-platform frameworks for mobile development 3. UI testing approaches for hybrid apps 4. Detox guide for applying UI tests in React Native projects
  • 6. Agenda 1. Introduction 2. Cross-platform frameworks for mobile development 3. UI testing approaches for hybrid apps 4. Detox guide for applying UI tests in React Native projects
  • 11. Oh no ! O Nie ! Para Pollo ! Zonk !
  • 14. How to Automate this as before ???
  • 15. The Native white Box Test
  • 16. The Native white Box Test + Fast + Easy setup + Wide range of open source helpers + Compatible with Cloud Device Farms
  • 17. The Native white Box Test + Fast + Easy setup + Wide range of open source helpers + Compatible with Cloud Device Farms − Different languages in project repository − Duplicated test code
  • 18. The Cross Platform Black Box Test
  • 19. The Cross Platform Black Box Test + Many supported languages + Wide community + Similar to Selenium + Single test code base + Compatible with Cloud Device Farms
  • 20. The Cross Platform Black Box Test + Many supported languages + Wide community + Similar to Selenium + Single test code base + Compatible with Cloud Device Farms − Slow − Difficult debugging − Lack of stability
  • 21. The Cross Platform Gray Box Test
  • 22. The Cross Platform Gray Box Test + Fast + Easy setup + Single test code base + The same language as default project one + Close integration with source code + API designed for a specific platform
  • 23. The Cross Platform Gray Box Test + Fast + Easy setup + Single test code base + The same language as default project one + Close integration with source code + API designed for a specific platform − No way / difficult to integrate with Cloud Device Farm − No outspread community − Often still not developed enough
  • 24. Based on experience with React Native
  • 25. Automation Guide with Detox - cross platform React Native Framework
  • 26. How to add Detox to an existing project - Package.json file
  • 27. How to add Detox to an existing project - Package.json file "detox": {
  • 28. How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": {
  • 29. How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/PolideaSample.app", "build": "xcodebuild -project ios/PolideaSample.xcodeproj -scheme PolideaSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone X" }, "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_5X_API_24" } } } }
  • 30. How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/PolideaSample.app", "build": "xcodebuild -project ios/PolideaSample.xcodeproj -scheme PolideaSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone X" }, "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_5X_API_24" } } } }
  • 31. How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/PolideaSample.app", "build": "xcodebuild -project ios/PolideaSample.xcodeproj -scheme PolideaSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone X" }, "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_5X_API_24" } } } }
  • 32. How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/PolideaSample.app", "build": "xcodebuild -project ios/PolideaSample.xcodeproj -scheme PolideaSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone X" }, "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_5X_API_24" } } } }
  • 33. How to add Detox to an existing project - Package.json file "detox": { "test-runner": "mocha", "specs": "e2e", "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/PolideaSample.app", "build": "xcodebuild -project ios/PolideaSample.xcodeproj -scheme PolideaSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone X" }, "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_5X_API_24" } } } }
  • 34. How to make apps testable? <Text style={styles.textStyle}> {!this.state.clicked? defaultButtonText: "Polidea"} </Text> <Text accessible= {true} testID= {"ButtonText"} accessibilityLabel= {"ButtonTextDesc"} style={styles.textStyle}> {!this.state.clicked? defaultButtonText: "Polidea"} </Text>
  • 35. How to make apps testable? <Text accessible= {true} testID= {"ButtonText"} accessibilityLabel= {"ButtonTextDesc"} style={styles.textStyle}> {!this.state.clicked? defaultButtonText: "Polidea"} </Text>
  • 36. How to write Test scripts - API Overview Detox Object Test plan configuration Device Object Key events, Gestures, Device settings Matchers, Actions, Expectations Finding Views, User’s actions, Validation API
  • 37. How to write Test scripts - Init script by example require('babel-polyfill');
  • 38. How to write Test scripts - Init script by example require('babel-polyfill'); const detox = require('detox'); const config = require('../package.json').detox;
  • 39. How to write Test scripts - Init script by example require('babel-polyfill'); const detox = require('detox'); const config = require('../package.json').detox; beforeAll(async () => { await detox.init(config); });
  • 40. How to write Test scripts - Init script by example require('babel-polyfill'); const detox = require('detox'); const config = require('../package.json').detox; beforeAll(async () => { await detox.init(config); }); beforeEach(async () => { await adapter.beforeEach(); });
  • 41. How to write Test scripts - Init script by example require('babel-polyfill'); const detox = require('detox'); const config = require('../package.json').detox; beforeAll(async () => { await detox.init(config); }); beforeEach(async () => { await adapter.beforeEach(); }); afterAll(async () => { await adapter.afterAll(); await detox.cleanup(); });
  • 42. How to write Test scripts - Test class by example
  • 43. How to write Test scripts - Test class by example describe('Example', () => {
  • 44. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => {
  • 45. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await
  • 46. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device
  • 47. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative();
  • 48. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor
  • 49. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element
  • 50. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText')))
  • 51. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible()
  • 52. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); });
  • 53. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it
  • 54. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{
  • 55. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText'))
  • 56. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText')).tap();
  • 57. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText')).tap(); await waitFor(element(by.text("Press Me")))
  • 58. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText')).tap(); await waitFor(element(by.text("Press Me"))).toNotExist()
  • 59. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText')).tap(); await waitFor(element(by.text("Press Me"))).toNotExist().withTimeout(2000);
  • 60. How to write Test scripts - Test class by example describe('Example', () => { beforeEach(async () => { await device.reloadReactNative(); await waitFor(element(by.id('ButtonText'))).toBeVisible().withTimeout(10000); }); it ('should Press me text be morphed in Polidea title after click on button',async () =>{ await element(by.id('ButtonText')).tap(); await waitFor(element(by.text("Press Me"))).toNotExist().withTimeout(2000); await waitFor(element(by.text("Polidea"))).toBeVisible().withTimeout(100); }); })
  • 61. How to integrate With CI - Gitlab CI
  • 62. How to integrate With CI - Gitlab CI detox_test:iOS: detox_test:android:
  • 63. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: detox_test:android: stage: test before_script:
  • 64. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel
  • 65. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install
  • 66. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script:
  • 67. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 &
  • 68. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug
  • 69. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug
  • 70. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137)
  • 71. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) tags: detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137) tags:
  • 72. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - xcode-9.2 detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - android-emu
  • 73. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - xcode-9.2 detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - android-emu services: - name: android-emulator:latest
  • 74. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - xcode-9.2 detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - android-emu services: - name: android-emulator:latest alias: pixel
  • 75. How to integrate With CI - Gitlab CI detox_test:iOS: stage: test before_script: - brew tap wix/brew - brew install --HEAD applesimutils - npm install -g detox-cli - npm install -g react-native-cli - npm install script: - react-native start --port 2137 & - detox build -c ios.sim.debug - detox test -c ios.sim.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - xcode-9.2 detox_test:android: stage: test before_script: - adb connect pixel:5555; sh ./scripts/waitForDevice.sh pixel - mkdir -p ./detox_node/ - npm install --prefix ./detox_node/ -g detox-cli - npm install --prefix ./detox_node/ -g react-native-cli - npm install script: - ./detox_node/bin/react-native start --port 2137 & - ./detox_node/bin/detox build -c android.emu.debug - ./detox_node/bin/detox test -c android.emu.debug - kill -9 $(lsof -n -i4TCP:2137) tags: - android-emu services: - name: android-emulator:latest alias: pixel entrypoint: ["/start-emulator.sh", "android-23", "x86", "pixel"]
  • 78. Key TAkeaways ● Cross platform apps can be tested with the same frameworks as native ones ● For typical apps you can avoid code duplication and use cross- platform frameworks ● Detox is a great tool for React Native UI testing
  • 80. Thank You! You can read about Testing and more at polidea.com/blog @astasIcons by: Freepik and Roundicons