Why the h# should I use Appium with ReactNative? - Wim Selles | AppiumConf 2018

[Music] okay cool Oh to see you here yeah it's been a dream for Dan Jonathan Isaac to give this conference it's also a dream for me to be here it's my first talk so if you got some remarks Twitter handle you saw it and liked to hear it well welcome to my talk why the heck should I use react as you should use a pin we react native or I should have called my talk I use a pin but we're gonna look at it later on first of all I'm gonna talk about something really important about me secondly gonna tell talk about the project I'm currently working on gonna to talk something about the tools the investigation I did for the customer I'm working for I'm gonna show you some setup and if time lets me I've got some tips and tricks for you so hopefully it will go well about me they call me the blue guy and sure I don't know why but could it be about my picture I'm using it everywhere it's even in the book I use it on my blog everywhere and my wife is always complaining get a new picture but yeah it's kind of like a trademark now father of two kids happily married for more than two and a half years and I need to say hi to my kids so if they're gonna show the movie back been in manual testing since 2007 and doing test animation since 2012 with qtp you've T worked a lot with a projector also contributed to the project working with a p.m. and also webdriver IO kind of like an automation geek when there are processes that yeah are too dumb to do manual I like to do it in the script also ordered tapster hopefully get it next week and gonna do some automation at home I'm also the owner of some widely used NPM modules for testing don't know if there are some people using protector here to automate their tests I've got an image comparing module it's got about eleven thousand downloads a month so it's quite well useful I think within the community and created a module also to do some nice reporting and it also got around 11,000 downloads so it's kind of awesome for me at least to see that that's really taking using to the community community and yeah I'm working for a small company the testers company in the Netherlands I'm being hired by different customers we're working for banking like ing I've been working a long time for Rabobank also the Dutch railways and currently I'm working for teller - got one little slide about teletoon I don't know if anybody knows tell it - it's a how they call themselves a penny or key European telecom provider and they have the purpose to fearlessly liberate people to a more connected life that's their strategy and I think the way they're presenting themselves here and they use it in all their communication they're pinpointing more to the people that the younger generation and what they now want to do is they wants to upgrade their digital strategy by creating a complete new app in which the users can get a new subscription and ask questions and I want to do it in a fun and rebel way and I think this also connects to that and in what was it I think March no September October they asked me I was at the Dutch railways but they asked me if I could help then set up the test animation for their react native app I don't know everybody if anybody knows react native it's just using javascript to create a fully native app for iOS and for Android and well that's what I'm also going to talk about and the journey I've had with Intelli - using app you or picking the right tool I think that's the best explanation first of all the app yeah I can't tell anything about the abdullah - is currently create because it's not open it's not on the market currently we still have a few weeks so yeah what should I then demo what should I use so I created a little app myself for Android and for iOS with react native and I can tell you the journey I've had with Intelli - in selecting the tools by using my own app because it has almost the same features only not that smart only not that awesome but you will get an idea and this is used during my tool selection but yeah we're not here to talk only about my awesome tool and my awesome app we're gonna here ever here to talk about epi first of all before I started I thought well what do we need so I put down some requirements some test automation requirements and divided them into Hart requirements and soft requirements and Hart requirements those with requirements for selecting the tool that well which they shoot me that do those requirements should be there the tool should be able to do all those things and we had some soft requirements and though yet what would be nice if we could have those requirements but they were not mandatory so what we need to have first of all is that our tool itself should be cross-platform we should be user able to use it with iOS and with Android we also would like and I said like we're gonna get back to it also in the software climates we want to write our test code also in one language we don't want to use Java Ruby or whatsoever all together we just want to do it with one language we also wanted to automate a real end-to-end user flow with a real entered user flow we're meaning that for example a customer opens the app and he gets a notification you can get a new subscription but to do that he should go to a browser so that means that the add the tool itself should be able to switch the tools should be able to use a webview the tool should be able to interact with so native parts if you want to share your invoice and you will pull up the native part of your phone we should also be able to automate it well testing on emulator simulators real devices and we should have CI CI support laugh but not least and I think that's really an underestimated part it should be able to create screenshots because when we have a failure we're all running our tests unattended we don't know what's happening especially when we're sleeping it should run also we should have an end state or app if something feels we should be able to see where it failed then the soft requirements it should be a team effort and that comes also back to writing something in one language because when I'm not there when I'm on vacation or I'm ill my colleagues should be able to yeah fix bugs whatsoever but they should also be able to fix tests or add new tests so what we say we want one language we're developing react native JavaScript so it would be awesome if we can use also JavaScript to do the automation and last but not least test BD style the given when then not very fun of it not because of the gherkin style the given when then but more about code reuse in our businesses also describing in your using user stories in given when then so would be very easy for us to create test cases out of that alright the tools in November I did the research but then a little colleague of micro mentioned there was a very good webinar of Jonathan it was called the shifting landscape of mobile automation he almost handles the same list here and I would have it would have been nice that I've seen it before I've created it but yeah you had it in what is it February or something this webinar so it's almost the same list the tools you're seeing here and with which we could pick were all grey XUI tests espresso detox from Wix also a nice tool to investigate case gave you from pixie labs specifically also with detox for automatic react native apps calabash in a p.m. that was the status in November and if you then look at these tools you can group them we got espresso excited stand ill grade those more the platform specific and they you've got the four here they're cross-platform and if we then look at our first requirement we said it needs to be a cross-platform that means that we're not going to investigate in these tools and basically the first investigation we did was only based on documentation looking at webinars that kind of stuff if you then look at this list you see calabash its end of life we've got summary and UI test for it so these were the four tools that I used to do an investigation and a set based on the documentation webinars links that kind of stuff we came with the first outcome it's this list and those are the requirements the first requirements we've set up the heart requirements you will see a cave he's a nice tool but yeah there are a lot of exes a lot of red so we're not using that if you then look at detox detox is currently within the react native community the tool to look at all the developers are very fond of it and yeah you're seeing here cross-platform ish they don't have currently they don't have 100% support for Android they're almost there but they don't have it completely still working on it same for the end to end user flow they support a few items but it's more like an app tool and not something outside it they are not able to automate the browser with it currently also no real devices support and reporting you have did some playing with the tool I will come back to it later if you then look at the list you've got summer in UI test and app you well all green based on this list I would say check hammer my test appium leave out kV detox yeah think again we want to write in JavaScript and it's not because I think some people who know me that because it's Microsoft I don't want to investigate into it but it's more like yeah it's c-sharp and we don't want to implement an extra we don't want to implement an extra dependency within our team that that's only able to automate in c-sharp because then you get a yeah we call it a one trick pony in our ceiling man now we don't like it we want to have a team who can do everything so these were the two tools I used to do the investigation to give you also an idea I with the teller to app we were creating I created tests and I said I want to be able to do this at least and based on that we should pick a automation tool well Khan showed the app so what I did I did the same for my own app and first of all I said well I need to be able to navigation kind of like tapping on something swiping on something also to be able to use the webview because in our app in the teller to app we should be able to go to the webshop of tella to within the app so I should be able to use the webview I should be able to do native hybrid swipes hybrid swipes just a JavaScript injection and be able to swipe but I should also be able to act in a webview context you know app you can switch between context well that should have also be able so that's also what I've done last but least as you saw I already have a chat option in my app and there I'm gonna test something like the interaction and get a result I'm doing something and it should be able to retrieve data from it so that's what I use to compare the test so now we're diving more into detail we're really automating with the two tools if you look at this and we first look at detox we have some pros I don't know if you know detox but detox it's great by weeks and what it basically does they call it a gray box testing tool it's a tool that wraps itself around the app making it very fast and it also interacts with the app it synchronizes with all the things that are happening if you're used to for example a use projector together with angular it also waits for certain actions before elements appear well detox does the same the advantage they also have is that they're not closing an app opening an app going to a page yeah that's what I had with appium so that may also make them faster because I want to have a clean state and one where if you want to have it with app um you need to close your app you need to start your app again because you can't rely on your situation before but I also found very awesome is it was easy to debug when a failure was happening you would get as printing console.log of the script and at the exact line number where the failure was happening the law this point possibility to use the native keyboard it's more like it gives me a good feeling it's not very a real fact or something that that's really needed but there was a real interaction on the keyboard and I was maybe I'm doing something wrong with that p.m. but I couldn't get that working with appium I saw it in a few in the past but it gives me a good feeling also putting up the view you see your keyboard you see all the interaction on your keyboard and what's also awesome about the tools that you're seeing the real gestures in your app for example if you're clicking you're swiping or whatsoever you see something happening in your app and yet they're only working on it for what is one enough years two years now and they really got a big community currently behind them so that's that's also nice but yeah when you're F pros you also have some cons currently they only have native support so what I said there they're only able to automate the app itself but nothing outside the context also there's no interaction with the webview that word Devils for me at least and also for tell it to something we needed to have so it was yeah account for us yeah they currently don't have support to automate based on coordinates if you want to do with swipe you need to select an element that you're doing your swipe on the element what I what I like is to say well I'm on XY and I want to swipe it to another coordinate whatever wherever I am if I want to test if I'm swiping my menu bar and it should not swipe then do it like that based on coordinates they're currently also don't support there is a PR for it but they don't support screenshots said for me it was really like no screenshots no not the way to go but yeah they also don't support currently the get text it's a function I'm using a lot to be able to get text from screen image because you can have situation where you're filling a form you get data back you want to use that data or you need to use that data in a second screen so that was not possible maybe they're gonna get that in the in the future but yeah currently it's not supported what I also found hard with the tool was it was hard to get proper locking logging sorry or reporting it could have been that I've chosen to automate it with jest instead of Maca that that's their preferred a framework but yeah for me it it's always nice to see a nice reporting and also for the management it's kind of like their candy store as I say it if everything is green there with nice interactions and they're all so glad so also something to take in a memory and it was hard to verify certain actions sometimes I want to be able to do a swipe but be certain that I that the swipe succeeded because if you do a swipe you can get a false positive that the swipe didn't happen the command was executed but it's still green I was not able to say give me for example the location of an element then do a swipe and then verify the new location of the element there was for me harder with detox then appium well I should have building a scroll a few here but I've limited it to these these parts I think also if you if you go back to the webinar that that Jonathan had in the shifting landscape he said five years ago we were here and we had these competitors or these tools and now we're here in 2018 and FM is still standing there and the other tools are not or have been refactored for the third time got a new name that kind of stuff it's kind of like the standard currently and that's making it very easy for me at least to do the animation it's a stable solution and it has a large community if you type in IBM on Google you get a lot of Stack Overflow questions answers that kind of stuff it supports the native tend the hybrid app and the browser very good it's well supported also if you have a local set up if you have a grid set up or you have a device cloud and it can integrate also with multiple multiple frameworks so you don't need to use it vanilla appium but you can also use it with webdriver I owe you can use it with project you can use it with whatever tool there is you can implement it and that's if you have a if you prefer a certain framework it's very easy just to implement it and in my case I think maybe 99% is very high but I think in most cases there is a way to automate what you're doing and yeah that's what I couldn't see with other tools but yeah there are also some cons sorry to say it but yeah what I when I did the investigation and watched a lot of talks and also for the new tools the first thing they say if I compare to a Pew it's hard to set up and almost really like why because you need to do almost the same you need to do your Android setup you need to do your iOS setup so what's hard on that so if you've got some remarks about it Twitter me and hopefully I get an idea what's really hard for it slow I've made it cursive I will come back to it I do agree it is slow but if you look at for example the detox and if you compare it to a Pew FME is a black box its interacts with the app from the outside and detox interact from the inside so yeah there's some speed with detox unstable inconsistent results yes there are some unstable inconsistent results but the last few months when I did the animation with the react native app I saw that most of the times the problem was sitting between the screen keyboard chair and basically it was me so before saying in pointing to a tool watch what you're doing because you're pointing with three fingers to yourself so always check your script but yeah sometimes it can be unstable inconsistent and hard to debug and I think Isaac is gonna tell something also about using a deluxe I do agree sometimes it's a pain in year dot to debug so yeah okay so which tool tip would use okay appium but i think i think if you if you're done you should we asked ourselves the question is this really the best tool for automating react native apps and i think you first need to realize it's not the holy grill it's not in spite of the fact that it's the defect or standard don't directly pick appium maybe it's the tool that you like because you have the experience with it but do your investigation secondly check what are your requirements like like what I did in the beginning we we set up our test requirements our hearts requirements and soft requirements do that because you need to know what you're what you want to automate and it's also the the next point what shoot your app dude not only now we're also in the future so look at the roadmap Luke what your business wants to do and if they don't for example once automate a webview then maybe appium is not the tool to choose they can do it but if it's if it will not be on your roadmap there are other tools you can use then do the investigation for the tools just read documentation look at webinars look at pull requests because they can also also give you some insight about the app the tool sorry and check if they yeah support your actions your expectations and when you've done this all do a proof of concept before picking the right tool documentation is nice webinars are nice but what you see with all those documentation there are only positive stories because no one is gonna say my tool is crap but just use it no one is going to say it so do a proof of concept and then you will see what if it really supports your needs and your expectations so these were the points and depending on the project I will get in the future I will use appium but first I will investigate this ok but how did we set it up at Ella - well what I said I like to use a framework because I don't like to do all the things myself so what we've chosen is to use webdriver IO web driver ILO is a cool tool you can do almost everything with it and out of the box you will get your setup it's easy to configure you get parallel execution you can support whatever you want a local cloud grid based and it has default reporting default screenshots we're using cucumber in the link I will share also with you you can go back to my project and you will also see I used cucumber the reason why I've used it and also some awesome reporting and last we are also using appium desktop appium desktop well I think a lot of people also know it can be very easy when you're trying to develop within a team your your tests you can watch the the DUI three you can pinpoint to certain actions there are certain attributes it's very easy so this is the setup we are using currently alright next slide and next line is going to be about speed because we all want to speed up things there was something I mentioned before people tell FM is slow and maybe we all want to do this and it's keeping us back in doing something so what I did for tell it to I just watched what what can help us when we use a boom to speed up our test because I don't want to wait on certain things and one of the most important things was animations I hate animations because you can't automate the animations so why should we keep animations within our app I'm I've got I'm lucky that I'm in a team that I'm able to adjust some stuff to the app so this is maybe a unique situation for some people I'm also able to create a specific build for our app but I was able with only a few lines of code to remove the animations and you can see it here if you do a click you need to wait for the dialogue and we remove the animations just to stop watching your animated module within react native it's very fast and we are using a lot of animations we're using a convention conversational UI in which we talk to the customer and all the questions and answers will come in a bubble and each bubble will take 800 milliseconds so if I have 10 bubbles that means that I have at least eight seconds when I'm doing testing and I'm not doing one scenario I'm doing multiple scenarios so you can calculate your profit you get you get here what I also did to speed it up and again Jason Jonathan was ahead of me it's used deep linking when your using deep linking within your app and especially when you want to automate it you want to go to a sure Paige real fast so you need to mock that you're you're gonna mock your user normally you first need to do kind of an onboarding flow say what your credentials are that kind of stuff it saved me for tell it to between 20 and 40 seconds birth test case to get to the right screen and what you see here is just saying I want to go to the chat screen former certain person and that's here but if you want to do it normally and you don't have deep linking you will also see what happens you open the app you go to chats you select a person this will cost you a few seconds so those are some tips and tricks you can use to remove yeah some time to do gain at least some time and those are some stuff you can use also to speed up your tests alright but how did I do it how did I was I able to - yeah present this and also do the same for for atella - first of all you can see some useful links which i used for my presentation first of all a nice google minified link but it's going to my project you can check out all the code see also how the detox tests are set up what they can do and what they can't do fmpro it's really useful but they're always sharing information I wanted to show here but yeah and also I would really advise you to look at this webinar because it will give you an insight also of the tools that were there and are now here really nice to look Cavey just check it out it's it's a really easy project and that the reason why I've checked why I've picked out Cavey it's purely JavaScript framework there are no dependencies it's really only JavaScript if you watch the webinar or with what if you watch the talk they're giving you will also see the cons of using kfe but the idea behind it is very nice and some links to detox give you also some information that was it thank you all you can find me on my Twitter handle my site and also and get up and I don't know if there's some time for questions currently or I think we got to keep rolling all right thank you so much [Applause] [Music] [Music]

Channel: AppiumConf

Views: 2,843

Keywords:

Id: 10Zzlf5DmSI

Length: 29min 21sec (1761 seconds)

Published: Thu Apr 19 2018