![Remove animations
const stubs = require('stubs');
/**
* Setup the app for a specific automation build
*/
function setupAutomation() {
if (!IS_AUTOMATION_BUILD) {
return;
}
// Disable the yellow box
console.disableYellowBox = true;
disableAnimations();
}
/**
* Disable all animations
*/
function disableAnimations() {
const AnimatedTiming = Animated.timing;
stubs(Animated, 'timing', (...props) => {
props[1].duration = 0;
props[1].delay = 0;
return AnimatedTiming(...props);
});
}](https://image.slidesharecdn.com/how-rn-appium-me-made-each-other-shine-180629124919/85/How-React-Native-Appium-and-me-made-each-other-shine-24-320.jpg)
How React Native Appium and me made each other shine
- 1. The customer asked him: Would you like to join our scrum team where you will be responsible for setting up an !-framework. You will be "-ing our new React Native app for all default scenarios. Sounds cool, doesn’t it? …there was a blue guy who ended up in a #tale Once upon a time $ He said: %, that sounds awesome and looks like a &. I’ve never worked with React Native but I do have JS and 'knowledge and I’m a quick (.
- 2. Made each other )) How , and
- 3. The app The framework Cross platform selectors Mocking animations Magic Next steps Time Pro’s and cons Menu
- 5. * + User interface After install , - onBoarding The app
- 7. The app The framework Cross platform selectors Mocking animations Magic Next steps Time Pro’s and cons Menu
- 8. Appium + Appium Desktop webdriver.io CucumberJS multiple-cucumber-html-report Amsterdam 2017 The framework Detox versus Appium London 2018
- 9. The app The framework Cross platform selectors Mocking animations Magic Next steps Time Pro’s and cons Menu
- 10. CP selectors AccessibilityLabels (98%) XPath (2%) HyBrid solution Testproperties Implementation Platform specific Code
- 11. Testproperties /** * If we have a test build, add a unique test id for iOS and Android * * @param {string} id * * @return {object|*} */ function testProperties(id) { if (IS_AUTOMATION_BUILD) { return { accessibilityLabel: `test-${id}`, }; } return null; }
- 12. Implementation import React, { Component } from 'react'; import { View } from ‘react-native'; import { testProperties } from './config/automation/TestProperties'; class MultipleChoice extends Component { // Some code render() { const { options } = this.props; return ( <View style={styles.container} {…testProperties('Select menu')} > // The select implementation </View> ); } }
- 14. Platform specific function testProperties(id) { if (IS_AUTOMATION_BUILD) { if (IS_IOS) { return { testID: `test-${id}`, }; } return { accessibilityLabel: `test-${id}`, }; } return null; }
- 16. CP selectors AccessibilityLabels (98%) XPath (2%) HyBrid solution Testproperties Implementation Platform specific Code
- 17. The app The framework Cross platform selectors Mocking animations Magic Next steps Time Pro’s and cons Menu
- 18. Mocking Why? Remove flakiness Fix inconsistent testdata problem Test errors / delays / edge cases Speed up manual and automated tests With ng-apimock How
- 19. Ng-apimock
- 20. Mocking Why? Remove flakiness Fix inconsistent testdata problem Test errors / delays / edge cases Speed up manual and automated tests With ng-apimock How
- 21. The app The framework Cross platform selectors Mocking animations Magic Next steps Time Pro’s and cons Menu
- 22. Animations onBoarding Each bubble takes 500 ms to show Min 15 bubbles => 7,5 sec Max 25 bubbles => 12,5 sec Bubble delay is 800 ms Between 19 (15*800+7,5) and 32 sec (25*800+12,5) animations What?!
- 23. Remove animations import { AppRegistry } from 'react-native'; import App from './app/App'; import { setupAutomation } from './app/config/automation/TestProperties'; // Run the automation setup setupAutomation(); AppRegistry.registerComponent('Tele2CustomerApp', () => App);
- 24. Remove animations const stubs = require('stubs'); /** * Setup the app for a specific automation build */ function setupAutomation() { if (!IS_AUTOMATION_BUILD) { return; } // Disable the yellow box console.disableYellowBox = true; disableAnimations(); } /** * Disable all animations */ function disableAnimations() { const AnimatedTiming = Animated.timing; stubs(Animated, 'timing', (...props) => { props[1].duration = 0; props[1].delay = 0; return AnimatedTiming(...props); }); }
- 25. Result Animations + real services No animation + mocking 15 sec!40 sec!
- 26. Animations onBoarding Each bubble takes 500 ms to show Min 15 bubbles => 7,5 sec Max 25 bubbles => 12,5 sec Bubble delay is 800 ms Between 19 (15*800+7,5) and 32 sec (25*800+12,5) animations What?!
- 27. The app The framework Cross platform selectors Mocking animations Magic Next steps Time Pro’s and cons Menu
- 29. Behind onBoarding So…. Or , - Best test feature Or Do some Magic
- 30. , - Best test feature Or Do some . magic? Magic with Magic
- 31. . magic? Magic with / For 5 features Magic
- 32. Implementation • Deeplinking with mocking to mock a user. • Deeplinking only on specific build types • Go to the feature directly • Saved another 20-30 seconds per scenario • First technical steps for deeplinking in production
- 35. The app The framework Cross platform selectors Mocking animations Magic Next steps Time Pro’s and cons Menu
- 36. Test strategy Reconsider deeplinking Reconsider mocking Phase 3 Next steps
- 37. Test strategy Real devices Platforms: iOS && Android Devices: High- && Mid- && Budget-range Platform tests: High && mid risk, proof only once All device tests: Hi risk, test on all With CucumberJS Tags How?
- 38. CucumBerJS tags Feature: View invoices Background: Open account settings Given I launch the new awesome Tele2 app @os-specific Scenario: As an user I want to see my not paid and paid bills Given I'm logged in to open my invoices Then I would like to see my unpaid bills | text | | Januari 2018 € 359,02 Deze factuur wordt op 01 februari afgeschreven. | And I would like to see my paid bills | text | | December 2017 € 66,12 | | November 2017 € 112,12 | Scenario: As an user I want to be able to download or share my invoice Given I'm logged in to open my invoices When I select the first invoice Then I would see the PDF of the invoice When I press the download button Then the download and share options are shown
- 39. CucumBerJS tags Feature: Onboarding Background: Open the app Given I launch the new awesome Tele2 app And I want to start with the onboarding @all-devices Scenario: As a customer I want to onboard with an existing MijnTele2 account When I select Jazeker! And I submit my credentials in the login form Then the pincode bubble would be visible When I submit valid pincodes And I agree with the terms and conditions Then I am redirected the home screen
- 40. Test strategy Real devices Platforms: iOS && Android Devices: High- && Mid- && Budget-range Extensive tests: High && mid risk, proof only once Default tests: Hi risk, test on all With CucumberJS Tags How?
- 41. Test strategy Reconsider deeplinking Reconsider mocking Phase 3 Next steps
- 42. Reconsider deeplinking / + ' = 0 = 1
- 43. Testlink screen
- 44. Testlink screen import { StackNavigator } from 'react-navigation'; import TestLinkScreen from './TestLinkScreen'; /** * Create the test link stack if it's a mocked build * * @return {*} */ function testLinkStack() { if (MOCKED_ENVIRONMENTS.includes(ENVIRONMENT)) { return { TestLink: { screen: StackNavigator({ TestLink: TestLinkScreen, }), }, }; } return {}; }
- 45. Reconsider deeplinking / + ' = 0 = 1
- 46. Test strategy Reconsider deeplinking Reconsider mocking Phase 3 Next steps
- 47. Reconsider mocking Not … each scenario on each ' … all '' have the same ⚡ … all '' start with same scenario at same ⏱ … same API response on all '' Prevent
- 49. Ng-apimock Mockserver Post: api/version/login "Content-Type": "application/json", "Accept": “application/json" response: { "status": 200, "firstName": "Wim", "lastName": “Selles" }
- 50. Ng-apimock Mockserver weBdriver.io PUT: headers: { 'Content-Type': ‘application/json' }, method: 'PUT', body: { identifier: 'token', scenario: 'unauthorised' }
- 54. The idea Mockserver weBdriver.io PUT: headers: { 'Content-Type': ‘application/json’, ngapimockid: '51A82F08-CCAC-410F' }, method: 'PUT', body: { identifier: 'token', scenario: 'unauthorised' } IDFV: 51A82F08-CCAC-410F
- 55. response: { "status": 401, “message": “unauthorised" } The idea Mockserver weBdriver.io PUT: headers: { 'Content-Type': ‘application/json’, ngapimockid: '51A82F08-CCAC-410F' }, method: 'PUT', body: { identifier: 'token', scenario: 'unauthorised' } IDFV: 51A82F08-CCAC-410F Post: api/version/login "Content-Type": "application/json", "Accept": “application/json”, ngapimockid: '51A82F08-CCAC-410F'
- 56. response: { "status": 401, “message": “unauthorised" } The idea Mockserver weBdriver.io PUT: headers: { 'Content-Type': ‘application/json’, ngapimockid: '51A82F08-CCAC-410F' }, method: 'PUT', body: { identifier: 'token', scenario: 'unauthorised' } IDFV: 51A82F08-CCAC-410F Post: api/version/login "Content-Type": "application/json", "Accept": “application/json”, ngapimockid: '51A82F08-CCAC-410F'
- 57. /** * This is a part from our `TestProperties`-file. */ import { getUniqueID } from 'react-native-device-info'; /** * If it is an automation build, then add a new header for the API calls * * @return {Object} * * For iOS it will return something like: FCDBD8EF-62FC-4ECB-B2F5-92C9E79AC7F9 * For Android it will return something like: dd96dec43fb81c97 */ function uniqueAutomationApiHeaderId() { if (IS_AUTOMATION_BUILD) { return { ngapimockid: getUniqueID(), }; } return {}; } app method
- 58. /** * This is the config-file we use for calling all the API’s. * Below you will see a part of the config to attach the headers * to all API calls */ import { uniqueAutomationApiHeaderId } from './automation/TestProperties'; const apiConfig = create({ baseURL: BASE_URL, headers: { ...API_HEADERS, ...uniqueAutomationApiHeaderId(), }, }); Header
- 59. Testlink screen
- 60. Testlink screen
- 61. Testlink screen
- 62. /** * Executes the api call with the provided information. * * @param {string} httpMethod PUT|DELETE|POST|GET * @param {string} urlSuffix Which path to httpMethod the data to * @param {Object} options The data that needs to be httpMethod * @param {string} errorMessage The error that needs to be shown * * @return {Promise} The promise. * * @private */ function execute(httpMethod, urlSuffix, options, errorMessage) { const data = { headers: { 'Content-Type': 'application/json', ngapimockid: device.uniqueID, }, method: httpMethod, }; if (options !== undefined) { data.body = JSON.stringify(options); } return handleRequest(urlSuffix, data, errorMessage); } Set state headers: { 'Content-Type': ‘application/json’, ngapimockid: '51A82F08-CCAC-410F' }, method: 'PUT', body: { identifier: 'token', scenario: 'unauthorised' }
- 63. response: { "status": 401, “message": “unauthorised" } Implementation Mockserver weBdriver.io PUT: headers: { 'Content-Type': ‘application/json’, ngapimockid: '51A82F08-CCAC-410F' }, method: 'PUT', body: { identifier: 'token', scenario: 'unauthorised' } IDFV: 51A82F08-CCAC-410F Post: api/version/login "Content-Type": "application/json", "Accept": “application/json”, ngapimockid: '51A82F08-CCAC-410F'
- 64. Reconsider mocking Not … each scenario on each ' … all '' have the same ⚡ … all '' start with same scenario at same ⏱ … same API response on all '' Prevent
- 65. Test strategy Reconsider deeplinking Reconsider mocking Phase 3 Next steps
- 66. Reconsider steps to ⚡4 execution / tests Phase 3
- 67. ⚡4 execution / tests Focus on user experience 5 6 With Image compare Phase 3
- 68. Test strategy Reconsider deeplinking Reconsider mocking Phase 3 Next steps
- 69. The app The framework Cross platform selectors Mocking animations Magic Next steps Time Pro’s and cons Menu
- 70. time per scenario Mocking: ~4 API calls (4 x 2 sec.) ~ 8 sec. Animations: ~ 9 sec. Deeplinking/Testlinkscreen: ~15 sec. Currently 65 scenario’s Average savings
- 71. time per scenario Mocking: ~4 API calls (4 x 2 sec.) ~ 8 sec. Animations: ~ 9 sec. Deeplinking/Testlinkscreen: ~15 sec. Currently 65 scenario’s Average savings Ooooops! Something went wrong! You just saved more than 30 min on total execution time! Please revert! Proceed!
- 72. time per scenario Mocking: ~4 API calls (4 x 2 sec.) ~ 8 sec. Animations: ~ 9 sec. Deeplinking/Testlinkscreen: ~15 sec. Currently 65 scenario’s Average savings )) Ooooops! Something went wrong again! Execution time on 4 parallel devices in the cloud is only 15% higher in comparison to local execution time on 1 device. We expected more! Please revert! Proceed!
- 73. time per scenario Mocking: ~4 API calls (4 x 2 sec.) ~ 8 sec. Animations: ~ 9 sec. Deeplinking/Testlinkscreen: ~15 sec. Currently 65 scenario’s Average savings
- 74. The app The framework Cross platform selectors Mocking animations Magic Next steps Time Pro’s and cons Menu
- 75. Pro’s and cons Pro’s Increase quality Speed up development Test what really needs to be tested Speed up execution time Cons No real services tested (automated) App is not a production app Developers often debug app for seeing no animations. (use the wrong build 7)
- 76. The app The framework Cross platform selectors Mocking animations Magic Next steps Time Pro’s and cons Menu
- 77. I hope we have some time left, so are there any questions?
- 78. Can you show everybody my contact details? I hope we have some time left, so are there any questions? Thank you very much! Sure!
- 79. Can you show everybody my contact details? I hope we have some time left, so are there any questions? Thank you very much! Sure! Contact 8: Wim Selles - deTesters - Tele2 9: @wswebcreation :: wswebcreation.nl :: gitHub.com/wswebcreation ; Goodbye! ;