WebdriverIO + Appium + Sauce Labs = Success? - Live Stream

she turn on my microphone folks Kevin here got the string going and set up and everything so it's got my music going and everything welcome to the live stream today we are gonna be talking about webdriver IO appium and sauce labs thanks to a viewer question yesterday if my audio is terrible or anything please let me know kind of rely on you all to help me with that but yeah last week we talked there was a question about how to get web darío set up with appium and sauce labs let's see exactly what it was yeah and I have a few videos on the channel about it but it doesn't go into big they doesn't go into too much depth I can close out of that about how things are so let's get started got the thumbs up on the audio let's get to it okay so to start things off I have to save a little bit of time I created a new directory and called WI o appium created went into that directory and then did an NPM at NIT - why that basically sets up a package.json that has the following information it helps when we run this next command which is NPM I for NPM install at WI o /c allied that will install the CLI the command line interface for webdriver IO which is what we're gonna need and we let that run had it installed now we are going to run our configuration utility that's gonna be the next step and I'm pretty confident on the first few steps and then I'm gonna be much less confident when I get to more of the appium stuff but we'll get there so to go that's weird for some reason it yeah okay so where's your automation back-end located let's see so this wants to be saw cept I kind of wanted to show this running locally but I think I'm gonna stick with socks laps because it's gonna make things simpler for us we do need to enter our username and password Oh environmental variable okay so it's not the environment it's not our actual username it's the environmental variable for it and we'll get to that in just a minute and we're gonna keep it as the defaults do I want to run my test on no I don't want it run it headless because I want to be able to see it we'll do it in the US will use mocha synchronous our specs are located there and this is a new option they can webdriver IO will auto generate test files for you which is pretty health pretty handy because of well I think it'll be handy it'll help people get started first so I'm gonna hit yes I kind of want to see what it will do do we want to use page objects yeah I haven't actually seen that where my page objects located one thing I would change about this is I would do capital o so camel case is here instead of just all lowercase not using it compiler will use spec we do want we don't want chrome driver we don't need that we do want sauce labs do I miss it there it is sauce apps so we do want the sauce subservice nothing else there's a new slack service that's cool nice okay so we're going to do we don't need chromedriver because this is gonna be running through sauce ups and sauce labs kind of extra base URL we need a base URL to test since this is gonna be a progressive web app I'm gonna use my demo URL so this is from my book I've mentioned my book before it's not necessarily a web app but it should work smaller it's just a website web apps are just websites be honest so we're gonna let that install while we do that I'm gonna see if I can do something no I guess I can okay to do give that a minute to run will open up sauce labs and let me get that I need to login kind of on my other screen because I'm not crazy about giving away all my credentials and that's still running pop open a Salter an unbranded seltzer you can't get branding I don't know what it what is it with branding like you can't you can't show branded stuff on like commercial television or there's some weird rule that you know we've always dealt with like all the brand's being blurred out unless you get specific permission or something I don't know okay count let me make sure my sauce labs account is the right one yes it is perfect perfect and then that is still installing man I should have I was debating whether to run through this configuration helper on my own so we wouldn't have to wait for this to install I didn't realize it was gonna take so much time but probably did okay the next thing I'm gonna do is I'm gonna open this directory so I just do st is an alias I have for sublime text passing in a period there allows me to open it up with the folder on the left side so this is my folder we can open up the package.json we created let's make this text a wee bit bigger you see we have our services installed and that configuration and I'm gonna skip that song here is that sauce username environment variable and second yes and then the US region that's also for sauce labs there's our tests and you know what let's look at tests there's two folders that it created for us and there's a single example let's let's look at that example login page open login okay so that's neat let's see if we have our environment variable set up there we go so this environment variables I don't want to get into too much detail about it because it depends on whether what system you're on how you set it up but essentially it's a key pair key value pair that you store on your local computer and it's good for things that you need to keep semi secure so here's this sauce username but more importantly is the sauce access key and applications are notes specifically can access that information from process environment process env I can get my sauce username in my sauce aspect access key that means if I say this and upload it to like github it doesn't have my actual access key in here that's stored in my local environment and yeah we saw it just a little bit more secure but I do have my username and then I'm not going to show you my access key because then I would have to reset it and that wouldn't be great but it is there and I'm actually probably gonna have to reset it because it's probably going to get exposed at some point just because I'm not too super careful about it so here we have our capabilities the thing we need to do is we want to have this run on a phone or a device so if I head over to sauce labs so I could I could just run this right now so if I do npx wdi oh it's gonna run in sauce labs gonna take a second to start yeah there we go with that default file that it created now we go to while that's running I want to get my capability set up for my custom device so let's say we want to test in iOS and do that they have a capabilities generator somewhere where do they have it platform configurator there it is and I'll post that in chat let's see how our test is doing okay our test ran which is good and then I'm going to post that there kind of do a few things at once and this is the full test you see it fills in your name the name of the test for you which is really nice and that comes from the webdriver i/o sauce labs service does this for you here it also fills in the test itself you can see we can jump to specific spots yeah that's the basics of the test it was a very simple test but it ran through ran through sauce labs and worked great so now we want to instead of have it run on the desktop browser we want to get it to run on a device phone device so instead of webdriver which is the default we're gonna go with appium now there's this legacy selenium but then there's a newer selenium that's also webdriver and oh my gosh it has blip driver IO in there that's so cool good work legacy so selenium was the original protocol webdriver was kind of built I think kind of as a side project and then at some point they merged together to become the webdriver w3c spec webdriver io piggybacked off of the webdriver name because it was focused just on webdriver now it's focused on webdriver and chrome dev tools plus other protocols in the future possibly and appium is another one which I don't think appium uses webdriver but it's kind of works in the similar map fashion so those are your different ABI eyes and there's some there can be some confusion between selenium and webdriver but basically selenium and webdriver kind of came together and now selenium is more of a tool than a protocol so they're a set of tools so you could have a selenium adapter for nodejs called selenium webdriver you could have a selenium you have the the Java selenium adapter for Java but then it plugs into a webdriver API we want the AMA API to do because for that we want we're gonna use a simulator or an emulator we're not gonna do a device because we have to have this test object platform enabled which I don't at this time so let's do an Android because let's do Android they have a little squirrely thing here for some reason this reminds me of like late 1990s JavaScript what's weird is that it doesn't scroll over all the way and then it jumps back and doesn't keep scrolling I like the idea and then what's up with all this white space that it's not using I'm just gonna be very judgmental let's start with a Google pixel yeah Google pixel 3 a and then the operating system of course it's gonna be Android app iam version will be the latest sorry I didn't mean to scroll up there we want oh interesting hybrid testing we're gonna start with the web testing will jump into hybrid testing if we have this yes sir a peon basically uses selenium libraries yeah basically so it has all the same endpoints as selenium it's just the way that it communicates with the device I don't think is selenium I think it uses the native device tools you know I should know this yes you're right okay then we want to copy our code we're gonna click nodejs and we're gonna have to well I don't really have to customize it too much but let's go up there's two ways we could do this we could say let caps equals actually that could be a constant even though we're modifying the constant it is an object so it's kind of weird that the object stays defined as an object it's just you're modifying the object and you can name it a constant even though it's weird where where what is it weird how arrays and objects you can define as constants but still modify them they can be confusing but maybe we'll just go with let just so we could do that and come back down here and under capabilities paste that in notice how I keep this as an array I think that's necessary it might not be but yes working in QA you do tend to see bugs a lot more than normal a man I broke the I opened a new bank account and I broke their system real bad and I was talking with the guy who is kind of in charge of tech support and he was he was impressed with how much I broke it I said well that's my job I'm I'm here to find problems but it's not great because it's still broken and I can't can't use it for now so I got to call them back okay so that's the one way you can do it if you don't want to have this up here I don't like having these capabilities all the way at the top of the file because I'm just not as happy with it I like having it in the capability section now I'm thinking about that and I'm like well it might not be a bad thing to have it like the important stuff that you really are gonna mess with at the top of the file and then load it in here compared to the other stuff like you're not really gonna mess with the region that much you're not gonna mess with whether you bail or not all that much it's gonna kind of be a same a constant thing that you said but I'll show this for the fun of it so I need to come in here and convert this from the format that it was in to the new format so I'm going to use my command D to do multiple selections delete that come over change that to there leave all that dere and put in commas and apparently it broke right there and that doesn't even need a comma so now I've converted it to just a straight object format everything stays the same or like everything else stays the same and that's it let's go back and run our test you can see it's picked up our new capabilities I almost spilled my soda all over my keyboard and would not have liked that but these things do happen can you tell me what movie these things do happen comes from it's a very theatrical movie quite theatrical I don't know it's based off of a opera and disappear some pasted up in an opera it's based off of a musical maybe oh value must be a list what's that coming from okay here's our first pick up oh no I closed my livestream information you can see what I'm listening to up here isn't that fun so it did load the page [Music] value must be a list I have some ideas main idea is that if this is appium maybe it doesn't like maybe it needs something very specific so there is the appium service but yet I'm pretty sure this is just for running the appium server [Music] there isn't a appium protocol let me see something there is an appium boilerplate that's what I was looking for this first result pretty cool so let's see how their tests are they have specs they have a login spec set value okay what do they have for air no big that's not what I wanted they have a saw slab config Android I think I have to put automation name in there yeah I'm pretty sure I need to put automation name in there and the reason for that is I just don't think webdriver i io knows that you're using a different type of automation protocol so somebody should be taking notes something should be we're like recording a video of this so that we know how to do it next time but make it a lot better maybe I'll get somebody to edit this down and make it a shorter screencast cuz I like I like doing this life because you run into issues like this and you kind of work through how to figure out what the issue is so that if somebody else runs into an issue similar not the exact same one they kind of have the same idea it's nice but it does take a very long time okay now we have our automation name in there I'm not entirely convinced that this is what the automation name needs to be and let's actually go back what else they have test object that is something to do with the test object platform that sauce labs has okay that looks pretty good there's the region thing else is good still the same issue I'm gonna copy this over there what else did they do here we have the service we have the region don't think we need to worry about that we have delete the port but that basically uses the default port which we already have set so that shouldn't do anything too special ok let's try running it with all of these capabilities oh man sometimes shoot I wonder if I need to comment that out that might not be necessary we'll see ya try it again let that comment it out what no it's not even failed to create session no browser name or app I see okay maybe that automation name isn't correct how's that close that advanced configuration resolution no I don't remember running into this issue let's how you run it locally I don't really care about that so what else let's go here what else could be different automation name which automation appium UI Automator espresso let's say a p.m. instead of UI Automator and try that Automation named alternatively maybe the device just is not a good device to be testing on I've had this issue with devices especially with Android devices and when Chrome trying to get the chrome driver version matched up with the version of Chrome on the device that comes in by default is a mess and very much a pain okay so it is running but we've gotten here before and there's that same error value must be a list well now we do the very smart search this is so funny I've tried searching through Gitter and oh it's not fun so it's just funny to have a result in there that you can't even use their own search engine to find these do you see anything in here that was what we were looking for oh I keep getting error requests failed invalid oh that's actually not I don't think that's anything but let's see if we can find where they're missing element okay that's not what we were looking at um no yeah you should go a stack overflow but it doesn't like this that's there that might be a little bit better code step also uses webdriver IO if I remember correctly this song I'm listening to is super chill so if I start singing it you're gonna have to deal with it taste that see if I can find you there very word ear err ear let's see if they were responded to I'd have to check the spec a testament I'm not going to be for poor Adam I don't think it was solved is it that the way it goes doesn't look like they were ever got a good answer okay transform to char string the string conversions that happen when you run command for webdriver through appium when we're in browser tests using Whitbread program we be able to add that chess I haven't tested yet and this was a long time ago so looks like it should have been fixed let's check out the see there okay check check will there be an interpretive dance like for what I need to I need information more details I have an idea clone appium boilerplate and modified configures today yeah I think I might do that next so the good thing is that it does run you know I'm gonna do something real quick I'm going to switch over to iOS and just do there's web testing I wonder if this hybrid testing oh it just allows you to specify a URL does it change anything down here it does not so I'll just do that that's funny they don't have the let caps here and this that's kind of weird what is in one and not the other okay now what I'm gonna go oh interpretive dance of my chill music yes there it was that was my interpretive dance because I might be switching these capabilities in and out I am gonna go with having it at the top of the file and then just reference it here it's just gonna be easier for copy-paste let's run this test again and see if that works [Music] so now it's running on Safari and iPhone X come well the songs over what do we have next no it's just gonna freeze up actually it's probably just taking a while to load we can go can I go to sauce labs am I logged in I'm not even though I was I'm not tick-tock-tick merits going hey not worked so it's not necessarily anything with our configuration it's just that that browser or that phone had some support I wonder if it is Android what if I do a different Android device now let's change that over back to appium back to Android and let's do Galaxy Tab that is an old version of Android 191 all that stays the same I'm here here they have caps but they don't have lit caps we don't think they had it in the first version anyway I kind of wish they would just give it to you as an object then you decide everything else okay now I can come back here hold this baby back over there we go that was our job that just ran and yeah there actually did send the keys and then okay so we've got this running I'm going to try this in the other platform on this galaxy tab next we're gonna look at getting an app installed so while our session are our test runs I want to get an app to install so we need an apk if we go back to this platform configurator and we do hybrid testing you see how it needs the app URL URL okay question for those of us joining late Michael can you repeat what we're working on we are looking at how to get web app testing done on a mobile device a tablet or something like that so we're looking at a progressive web app and and how to get that running through sauce labs it's like that so that one failed for the same reason I have one more idea knock down the version of appium to 181 and see if that does it and I'm not gonna spend too much time on this it looks like there's something funky with that system but we're gonna skip past that okay in here the whatever I knew there was it needed yeah okay so I'm gonna download this app downloads yeah I could go to over Starbucks but for the for their app but I'm just gonna use this one because it works so let's download the apk to get a second and that still failed okay so it's not the appium server it's just something weird nice okay I need to know no I thought I thought that would open a Finder for me I'm gonna move that apk I just downloaded it I'm gonna move it up screen over to this folder and PWA is different than native how so because under from my understanding there's two kind of ideas of a PWA or progressive web app you have just a pure website that people can go to similar to what we've done in our test where we go to this login page [Music] login dot open ah super okay show you the page open just runs browser that URL and it goes to that page so you open up a web browser on a device and it works kind of like a website but it's kind of a web app in that it's a little bit more functionality so that's the one where just you the the user goes to the web site on their device you can make a shortcut to it on your device but for the most part you just manually go to it like we're doing here where you do browser direct URL there's another one where you use a tool like non electron what's the other one ionic ionic framework and it lets you write your website in angular or react or probably view as well and then it builds an app around it so the app wraps around your website so basically when you open the app it's just looking at a webview inside the app but it does have native support you say that there's a non native support so that would just be like a website that I'm thinking let me move this over I need to go to my sites appium okay and okay so you see here this is my folder I've got my app in place now so if I come back to my example I'm actually gonna get rid of all of this let's delete that page object because we're not gonna be worrying about that yes my application should comment that out and then we're just gonna do we're gonna do a basic element selector here I don't know what that's gonna be but we'll fill that in later and it's just gonna be two exists and we'll come back here and let's see close eye on I come back to my don't close my platform configurator who closed this extra stuff and reselect all this again our device is gonna be Android since we're using an apk which is the Android version I don't want that you're kind of old me something new what if I do just Android emulator that's old too why is there anything new on here Willie Galaxy Tab A 10 that's gonna be no that's still 8 and I hate whenever I scroll up to try and get to the top it Scrolls me up so weird okay I guess we'll just go with this phone I don't know it's weird latest one we're gonna do app testing I don't know what the difference between hybrid and app testing is there we go that's gonna be our apk for saw storage to access files uploaded to sauce temporary storage used off Sarge URI okay go back here how do you there um I don't know if this is gonna work I might have to manually load that up let me look at actually this nope go back that's a boilerplate config sauce labs Android they don't have the app to find in here they do have a perhaps they load it on test object which is different from them what we do if you look here I do have that information that's their path name I'm gonna run this and let's see how it goes it should get to here and then fail because that selector doesn't match any elements and back here we can see our test running if we go to test results live I've just no we won't automate it I guess we want to test results even though they're not really results yet failed to download it right which makes sense to me because we didn't upload it so now we need to go back to the appium service no the sauce lab service and let's see man I did this a long time ago and I don't remember how to do it there it's an API that is from sauce labs oh it's not in there so some extra stuff you can do but it doesn't look like it has what we want no that's okay Google oh wait web driver IO sauce labs sauce storage very very old video of mine do not watch it it's got to be so out of date let's just search for whatever i/o so storage that's downloading files we don't worry about that that's uploading fast this is not okay there's saw storage from all the scripts so basically they use this is a super funky song and listening to by the way they manually push the storage up scripts Mac download I go here let's see what Mac download this just pulls down two images and then yeah so curl will make a web request this is passing in the username and access key as headers setting a content type this is the end point that's weird oh that's uploading a file to it if you will give me one minute I am going to find an old project that I used to work on that is for a company I was contracting with and I did this so I want to find it so you're gonna need to be patient with me for one second while I look at this off screen because I don't really want to get into any legal trouble with showing the company codebase not that I have it on my computer I don't deleted it is that okay that's interesting it doesn't really look like it does anything questions we have search on Google after this demo regarding you want to run the test download the personal web app not personal progressive what PWA webdriver IO needs to modify to run tests on the downloaded Pete PWA not sure I understand how that is supposed to be set up you're welcome for the tutorial hopefully it is helpful for people which company am i currently working for I just do contract work so I have one contract right now I have availability for another contract but I haven't found anybody really interested I haven't been searching too hard either because I'm working on the book I'm finishing of the book and then I want to get to the course next and so it's kind of a conflict between the short term contract work with compared to the long term working on the book in the course itself which is what I really want to be doing and these live streams and stuff I really enjoy doing these as well so I'd rather be doing that so I'm not super pushed to go down that path I'm going to look at IBM see that's different these capabilities are a bit different than the other one and I think that's what I was seeing in this other configuration file yeah maybe okay making a udemy course on whatever I would be fascinating I don't want to use you to me actually I prefer going just self-publishing because you to me takes like 70% of the of the income they have this high high royalty cost and the reason for that is they're giving you an audience but I've kind of worked to have a great audience here and so I don't want to have to pay for an audience when I have a very happy audience who's super awesome and I already know about them and everything so why would I do that let me see about this that's that under here that uses test object to upload it let's go back here sauce apps no no no no no no well if I go here see that was talking about I need to use the test object platform and automated testing with real devices meaning of testing what you'll need uploading or accessing your application I think what I'm gonna do so yeah we can't upload it through the UI whoops whoops whoops whoops login select live mobile app app upload so I can I'm glad y'all are enjoying it that's really nice to hear I appreciate it like I said I really enjoy doing this because it's it's fun and it's I get to explore a whole bunch of different things and kind of wrack my brain on how to figure it so okay I can upload the app manually that's a short-term fix I don't really want to do that I can do though I could use I could use a remote location that's interesting because if we go back to here yes the relationships can be found there hackage let's see if they have anything in here no I was wondering if they had a like a script in here that ran the upload but if I come back here and then I copy that link address then come here and instead of that I'm gonna duplicate that comment out the line I need a shortcut that duplicates the line while commenting it out so that I can do exactly that sometimes I want to like keep the old line but comment it out and but have a new line so anyway let's try that looks like according to this it's kind of a groovy sword - groovy sword I saw sword and I said that groovy song groovy I might do some interpretive dancing to it as well okay oh I'm making a mess and let's see so back here into test results did it fail already thanks for the great tutorial practice to set up and run your pet project on appium yes please let me know how it goes ok this is actually the error that we wanted locator strategy CSS selector is not supported that's fine because we didn't use a actual one go to the start of line commented out command e duplicates in line and then I go ahead yeah you could do that too so just so comment it then command D yeah do it and then uncomment that works maybe better so comment shoot it's not command it's a ctrl command shift e uncommon let's try it again comment duplicate uncommon yeah that would actually work pretty well but there's our little test so we loads it goes Larry Page and the CSS selector failing I don't care we can go to these tests and what do they have they have specs and they have a web view equals API dot click ok I'm gonna assert that that is existing so we'll come back in here we're gonna replace the selector I'm gonna save it and leave that this may fail still because we might need to do these steps where we wait for the tab bar to be shown Oh it highlights it but I can't jump to it weird we need 200 I can click it and then jump to it ok close that so that waits for that maybe I can now start webdriver IO Saturdays yeah I mean it's this kind of I don't want to commit to it too much because it's just a lot too my life is so crazy these days link text is not supported that's funny I bet cuz it's not in the right web view could be it okay so regarding like making this a regular thing I kind of want to and I kind of don't want to because yeah it's Saturdays and I've family and they come first and so I don't want to commit to anything but I I do plan on keep keeping this going for the near future I'll probably have to if I pick back up a another contract job I'll have to cut this out maybe hey not maybe I'll be able to talk my wife into it open web you know web view what's that do yeah what angers not bad web view ok so it clicks the web view page oh I see so in this app you see that there's tabs at the bottom so one of those tabs is a web view that's what's going on and we don't actually want that webview page I don't want to bother with it what yeah it's just a little bit too far down the path for what I'm worrying about apt login should we try it yes we should that was a rhetorical question okay I'm going to and this will be the last bit because we're over an hour now and yeah I need to get back to work on my book this would be the last bit for this and then we'll be done import tab bar you know what I'm gonna do I'm gonna be super lazy and watch this I'm gonna ignore that export default stuff I'm gonna delete that and I'm gonna say class tab bar right and then we're do the same thing with the login screen and I have to pull an app screen and selectors okay at least the selectors are here let's try that again and see how this exports a new login screen what we have to do is say kant's login screen is equal to new login screen and we have to change the casing on this because otherwise it's gonna kind of interfere with the other one but that's pretty simple just do a login screen okay now the problem is this extends app screen please tell me oh it has native alert as well I think we can get rid of that well I'm just gonna come up that up for now and then this would have been so much easier just to copy paste oh no I don't want native art I want it up screen not copy paste so I've been so much easier just to clone import default timeout whatever whatever I'm so done with that it's just gonna use the the default timeout I don't know why that that was there okay that should work kind of funky let's try it someone texted and I need to check who texted special your trying to get set up working with github actions using emulators yeah man it's so easy to overcomplicate and like make things go from like okay I want to get this basic thing going oh you know what I'm gonna add this and I want to add that no one today that and just trying to get you can get them working separately wonderfully trying to get it all orchestrated together oh that is tough okay cannot read property wait for it is shown is undefined wait for it is shown we're gonna do wait for it is shown login screen wait for is shown sitting ah like oh it's waiting for the alert to be shown dang it okay let's go see what's in this one whatever I'm just gonna copy and paste it all over and throw it in one big file and expect you called Nate alert that's fine we'll just keep there then come back here there we go and run that yeah so there is a login screen wait for is shown which is defined in this app screen which login screen screen extends app screen so it pulls in that but also there is login screen alert wait for is shown alert I had commented out because it had returned native alert and I didn't want to pull in the native alert stuff but looks like it might be needed so this wait for is shown function is different from this wake for is shown this wait first shown function is here I don't looks like it does a couple of different things selectors has already that's funny selectors a try that again oh I bet there's there's more than just that 100k hates that this is a good song it's a good cover by the way they're basically by merging all the files together we had some variable name over rights which wasn't great but what you can do when you're trying to be lazy you haven't do a lot more work you think I would have learned that by now and not be lazy but it's not worth it anyway it looks like it's gonna rain outside it's gonna rain where you are I want to know is he gonna snow where you are it's not gonna snow where I am right now radar looks clear we're supposed to have makes some more severe storms later today let's see how Texas is doing Texas is like pure nothing there Michigan is getting some rain Colorado Springs is getting some rain out in Georgia they're getting rain which is not where I am get some rain down in Orlando Florida this is RadarScope by the way and if you want like a super awesome radar tool it's super awesome highly recommend it really really clear radar and yeah you can get really close up and detailed and pretty good yep raining heavily in India yeah it's a isn't this time of year kind of a rainy season if I remember correctly what probably oh it's there what do you mean what are you talking about selectors a Android alert title selectors a Android what was it alert title selectors a Android alert title what do you mean did I not save it I didn't save it helps to save your files people could you just save your files so funny sometimes I help people with debugging stuff and at some point I realized that they didn't save their file and I'm like did you save your file and their kits so embarrassed by it and I'm like please do not be embarrassed I forget to save my file all the time like even though it's super habit to hit that save that is one of the reasons I think in sublime text like that little icon isn't there by default somewhere in here highlight modified tabs okay I thought that might be it maybe maybe it used to be highlight mattify tabs and they've updated it or something but at some point like it didn't show that it was just like a more subtle thing and yeah I was not cool with that not cool okay that seems to be running so yeah it is rainy season in India yeah and y'all get some pretty bad monsoons over there not yeah you get monsoons over there but you also do get some tropical cyclones as well I know several years back in north-east india there was a pretty bad one like a really bad one not just for the area but like for the world comparatively like not good so yeah it's that time year having grown up in Texas him send me familiar with hurricanes where I was at we didn't really get them we would get tropical storms who'd get a lot of flooding from them but the wind wasn't too bad but you know living on the Gulf Coast you're always aware of it okay it passed logged in successfully kind of cheated there a little bit but yeah if you do want to go down this and try out stuff I recommend this epi and boiler plate they've got a lot of stuff in it whim who wrote most of this it seems he has he's a core contributor or technically I think he's part of the technical steering committee for webdriver IO and does some great stuff so yeah he's really smart guy and you know it's a lot of thought into all of this stuff and you can see like the documentation on this is fantastic and even the way that they pull out their selectors to do that is pretty good you know I kind of messed it up here but this is a pretty neat way of organizing all your selectors into a single object and then being able to reference them later it's pretty handy especially when you need to switch from iOS to Android that's pretty neat okay so that's that I'm gonna finish that up and I've got a little bit more energy left so what I'm gonna do is switch gears and bring up the web app testing guidebook which you can get at Moline pub you can even read a sample of it if you want to read a sample of it I've been updating it too I had mentioned that I had the switching from the chai assertions over to expect Jay s assertions and the webdriver IO expect assertions uh yeah that is something I finished up now I'm working on updating it to webdriver iovers and six talked about custom selectors sometime oh yeah you know I had a request to do like all the different selectors you can go and I actually have a chapter in my book about selectors and all these different shapes and sizes maybe I should just do a full video basically going through this and yeah talking about all the different selectors so you can do so it's in the book I I thought I'd rather do like an edited video for it because it's a lot of information and I can come on to a little bit better explanation for it but yeah I'm gonna that is one of the videos I'd like to do but what I really wanted to do was this last example I was working on the exercise for it and I was creating a test for the user profile page so if I jump back over here the each user has a profile page that has their articles and stuff like that and I started writing a test for it actually I wrote page objects for it and scroll down I wrote a page object logged into the creator profile created an article create a new profile page and one to write the test for it so I'll just gonna take a few minutes to write some tests for this to kind of finish this out so let's close that see if I can find their bring that over in here I had my profile page close you don't need you don't you close you close you pose you don't save okay close all that out so here's that let's bring up the profile page object and we wanted to write a few tests so we have it showing the user name at the top of the page which I have here switch that over to the new format pretty cool and I'm going to now do it should you to follow and unfollow a user okay and just a reminder I don't use fat arrow functions here because of there is an ability to do this dot test and get information that has information about your test and sometimes you want to do this time out and set your time out for this specific test to something high and if you do the fat arrow function that messes up their this reference and you can't you can no longer do this that time out so I always do function even though 99% of the time I don't need it I don't want to get to the point where I do need it and then I have to like have one one of these be a function while all the rest of fat arrows it just doesn't seem like it's worth it for whatever formatting benefit you have but you do see I do use fat arrow functions here and that is necessary because sometimes you need to do this dot and you need to reference browser I don't have to do it here but so we want to do follow and unfollow the user so I come back here there's this button and it's gonna be a pretty basic test I'm going to assert that it says follow demo user click it assert that it says unfollow ooh it's broken is it really broken it is broken what what the heck Wendy's arrow functions and when not to use them if you're writing tests like this don't use them same thing here when you're using something like browser call I would use them because sometimes you do want to reference like this dot and it needs to be related to that browser I talked about this in the book somewhere I can't remember specifically [Music] here 2.4 so basically while callback we use arrow functions well these are all callbacks this is essentially you're passing a function into the before hook so I could write this as a function or shoot and then I could actually pass it like that for the sake of time and formatting I don't but it is essentially a callback that we're saying hey before function when you get called called this function so that's how a callback works the difference between a fat arrow and a regular function are you have the the visual difference the way you type it is different but also with the fat arrow it changes the this reference this is a keyboard keyword in JavaScript that refers to a object with it's a bit complicated so I don't want to explain it poorly but yeah I would recommend reading better people better people's explanation of what's going on there but I think a lot of people see fat arrow functions and they think it's only about the format when it does actually have a functional difference between this format and this format and mainly in that it changes what this means and it's hard to say it's hard to talk about because you the the word this references it references that object this is a keyword in Java scripts that references an object but this is also a word in the English language that you could say look at this or look at this so you kind of have to say look at this this some things people would do would do way back in the day they would say variable that is equal to this that way when you're talking about it now you're talking about that I prefer the variable self is equal to this because it's a little bit better because you could say that that there and that's that is even more confusing oh yes it is impossible to not explain this poorly it's just it's so unneeded because of the fact that the word this in English is used so often and is so built into our brain if I search see how I use this all the time and so to convert that over to JavaScript in what the this keyword means in JavaScript adds its own baggage along with the fact that the way that that keyword works is confusing because it's a lot of things that that are implied in it anyway we wanted to look at gosh I think it was wait until oh that's where it was okay so if I go to my off page object I have a browser dot wait until and in it see how I have these object references or these element references up here so in it I want to wait for the sign-in button which references up here to either the sign-in button not to exist or the error message to exist so this is a custom function I won't talk really about wait until but it allows you to wait until certain things are met because I'm inside of a class I need to reference the class itself and I do that by saying this so to explain what this is you see I have this dot load this references this overall class and see how I had to use the word this overall class that's part of the big confusion is having to use the same word to for two different meetings so I say this dot load that actually references the generic page which has a load function on it which references this dot path which is referenced here so you use this to talk about yourself and that's where that constant self is equal to this just you don't have to do it but it does make things a little bit it can make things clearer in a way one big reason for doing this in the past for doing that in the past is had to do with browser events so when you would click and it click a button or an element on the page you would have an event handler that would say oh this element was clicked let's do something with it and you would have something like this and because of the Kirk eNOS of JavaScript basically the keyword would not reference itself it would reference something else and that was annoying so anyway this code works fine it references that just fine this code if I had done function it would say cannot find sign in on I think it would be on the browser it would give me that error let's okay I'm gonna run that and I'm gonna show you what that error is basically it's trying to run this but the scope isn't correct because we're calling another function in here and that function provides its own this value to our wait until function instance and there it is cannot read property is existing on undefined if I jump to it you see here's the failure is existing it's talking about here it can't read a property is existing on an on knit this sign in because this sign in doesn't refer to here it refers to something that browser dot wait until passes in and so that's why for browser wait until you need to do that alternatively the way it used to be is you would do and really it used to be bar back in the days this so we basically create a reference to this because remember I said that this works for here but because this function is a callback function that gets run after the fact it no longer has the same thing so we would say self and I could run that and now it's gonna work so even though I have the the standard format the standard function because I'm now referencing self instead of this self points to here which is a reference to the parent this and if you're not confused by now kudos kudos to you because I'm confused just explaining it but yeah that is a whole bit and I do talk about it in my book where do I talk about it so here I have in the old version yes right there yeah remember how I said this can be tricky there we go yeah you can do binding as well function binding is another option but the fat arrow basically does something like that so yeah function binding was another way of getting around the this debacle kind of stuff so anyway um man that was a long long detour what's it what's the term and my follow demo user doesn't work oh why does it not work because few real-world example app particle actions I don't want article actions it's got to be under profile so basically what I'm gonna do now excuse me is open up the actual HTML view app for this page oh it opened in vs code what you're doping o cuz I command clicked this is why I like sublime text / vs code cuz look it's still not opened oh is it open is it finally open oh now look sublime text opened it super quick the only reason it took a while to load it was because vs code was still chilling out okay so this is the profile page close you come back here I have followed demo user I did add a QA ID in here which you can see here click prevent unfollow click prevent follow so it calls follow and unfollow what do those functions do there's a follow function this is view J s code if you're not familiar with it I like VJ s it's pretty neat if you're not authenticated returned nothing I bet that's what's going on I'm not authenticated that's okay I'm disappointed that it shows you the follow button if you're not authenticated and it only returns not like it returns nothing so it doesn't give you an error message or say hey you need to you need to be logged in to follow a user it just like it nope nothing I'm gonna give me nothing so that's the problem that's going on here and that's why it was so helpful for me to look at the code is because I wanted to see why it wasn't working now we know that you have to be authenticated that's not gonna be a problem for our test your whoops yeah I just need to specify that in our demo so I'll check back here scroll to the bottom do that and then I think I'm just gonna write this single test and what is forget my credentials paste and copy paste come on now I can go to the playground user and I hit follow playground okay now it says that and then unfollow playground so this should be a pretty quick test to write we're going to come back into here expect to have texts follow and then I need to have the username there doc click I'm going to want to click the element expect the text to change to unfollow click it again and expect the text to be follow go to my profile page I have I already have a element reference for it so let's use that save that sometimes I forget that's the thing I forget the most is to save the page object because I make the change then immediately move over and then I run the test and it's like hey that doesn't exist and the other thing I need is I need to reference the page object itself okay now do that more one thing you noticed I don't know if you notice but it does completely change that element but we can use the same reference because the HTML is essentially the same and you see how I have a comma here that actually checks two different selectors and I can get rid of that because I don't need it so it'll check for two different types of selectors that's very useful if you have a page update coming so you've added on your site you've added these QA IDs but you haven't updated all your sites out there yeah why not keep autosave turned on because I like I like the feeling of pressing command s it just it's good to me it feels like there's progress and I don't know I just don't like the idea of auto saving because sometimes I don't want it saved all the time yeah that's why email I need my username so profile that username I can reference that come back here that come back here reference that and it only so it only runs that test now I jump back to my book examples a profile and let's run it it's running in the other browser and I happen not reaching over to move it time it doesn't like okay so the problem here is that there's an extra two spaces and yeah you see there's a non-breaking space they did that for padding kind of a lazy very lazy way of getting padding in there I would never to that thankfully the expected library does some really nice things for us that I want to view oh don't get back expect under to have text where are you oh wait here you can set trimmed so we can tell it to trim the text results yeah now we'll run it so apply trim to the actual value there's a little extra thing there which I'm gonna delete now man it's a shame it's not um October October is the thing that digitalocean runs where if you I don't want to I don't wanna do that right now Oktoberfest that's what's called Oktoberfest it's a thing that digitalocean and a couple of things run so that that's weird what did I do a couple other companies run where you commit like five commits to a public repo you get a shirt and when you make like these little itsy bitsy commits they still count and that's awesome because you can get your shirt for free without having to worry about too much okay why are you causing me trouble and pain I don't think this toggle worked let's look at the HTML the view page again broader link so this is if you're the current user which were not yeah so many free - they're nice t-shirts I gotta admit and I wear them around town and I get like confusing looks like well it's Oktoberfest what's weird like oh yeah I guess I am wearing that shirt yeah but they're really comfy shirts and they've got a good design to them don't need that don't need that dog that goes all this goodness where does my beard yes I haven't gotten the shirt I don't think I got the shirt last year I was too busy so it's a button why would the button not work why would I mean why would this not work don't get it it's using the dev tools protocol maybe I don't want it to use that see it looks like it clicked it you know what that's a stupid book I'm not signed in sorry I'm over here yeah so it looks like it clicked it it's that bug that I'm not logged in so I have to log in first okay just do that let's do here that where's my plugin oh man there we go I have a login via API right I don't use off oh I do use off to clear this session okay this is information that you might not know about so I'm just gonna skip over it but basically create the profile all that now login which if you're curious whoops this is what the your what the code looks like and it might fail because I've been having trouble with chrome dev tools I was gonna switch all the way over from using the webdriver protocol to using chrome dev tools protocol not that you know what I'm talking about but it broke things so I'm not going to so I need to turn my basically I turn my chrome driver service off because I thought I could just use chrome dev tools but I can't I'm gonna close that down are you waiting oh just turn it off try it again but I need to turn it back on and it's gonna allow me to log in via the API which makes an API request loads the home page sets the token and then when I load the profile page it'll have that token in place and it's going to act like I'm logged in so there we go this and then once I get this test written I'm gonna call it a day and it's been super fun thanks for hanging out and join in on the chat it makes it so much more fun to have people chatting so I really appreciate it and thanks for the meal thanks for the challenge to work on getting some happy and stuff done I think I think it's gonna be something that a lot of people look through and I'm probably gonna watch or not watch edit down the live video to turn it into a more condensed version for people who are interested don't want to sit through all this kind of stuff question do i watch animes no I watch a lot of YouTube lately why are you not loading just what a lot watch a lot of YouTube lately and it's nice or for some reason because and why did that fail don't break it forget no just run it again maybe something froze up it could have been because I was trying to kill the browser or all the mics right away and so it didn't like that but BAE it back to it yeah I kind of come and go with watching series shows right now I like YouTube because it's I don't like YouTube the flat farm I like the creators on YouTube they have some really interesting stuff I've been getting to like some woodworking stuff and it not that I do a lot of woodworking myself but that it's really amazing how these craftspeople are able to create just really cool stuff so yeah it's why is this not loading a network what's I was messing with Network conditions man what did I do that's actually the old one that's shouldn't be in there I done something with browser network conditions but nope not there what's the last thing I want to do wait why are you like that who did this to you don't even have it in here your disses okay yeah keep all the stuff I explained about JavaScript yeah that's always pretty useful that's one things that I have in the book is in my previous course I didn't get I shied away from getting into too technical of JavaScript stuff but I think people really appreciate having specific JavaScript knowledge that's tied to web automation so not just general knowledge but yeah okay oh cool cool to hear that Thomas about yeah looking the web River IO between Cyprus and webdriver REO there's a big oak a big a kind of which is better and stuff like that and I think it really depends on your needs so come on yeah it's nice to know both tools I've I don't use Cypress as much as I think I should or I don't know about it as much as I should because it is popular has some really good benefits to it but also it also has drawbacks to it and I think Webber IO gives you a lot of functionality built in and really lets you take control of what you're doing which I really like okay so something in here it's trying to load the base page and it can't why what happened here so it tries going there Oh failed copy/paste shitload oh yeah yeah at command okay for mans debugging somewhere here it fails and did I can you make two versions of the livestream raw and edited one yes so the raw one is as soon as I hit enter stream YouTube processes it and it does like five ten minutes of processing for it and it's available on my channel yes and that's for anybody who wants to watch it and go through the full what two hours yeah it's almost two hours now you know while they wash dishes for two hours because if you're like me put off dishes for too long there ah what the heck it worked ah okay slow down see it worked why why didn't it work well it worked that time and it's been failing every other time is it just a hiccup on the server or maybe it was something to do with me trying to force my way through it shutting down and now that it actually did get to shut down entirely it is happier now yeah one other thing I can do is cut out the part about the the dis and web River REO make a full video out of that or not will though but you know I know did video out of that because I think that's another kind of key part I don't want that browser debug in there anymore yeah that kind of figuring how to repurpose the work that I do is really in Portman for me I'm gonna run it one more time just to make sure that the browser debug isn't causing it to to work I don't think it is but you never know yeah so one of the things with me as I live in a time so being able to take the time that I do spend and reuse it here and there it's really good there we go it worked okay so I got one more one more example done or one more part of it done and the last thing I need to do to finish that is the two tabs are shown the content is correct and yeah I'm gonna skip that part but I'm gonna do it so I'm getting pretty close on this book I have a few things I keep saying I have a few things left to do but you know it's it's getting there I'm really happy I got the expect webdriver i/o updates made and I also am right almost done with updating it to use webdriver IO version 6 I'm going to do another release of the book then I'm gonna do incorporating all the edits that my buddy Michael has done you've seen them on this channel before and getting those in there and yeah that's gonna get me really close oh and I do formatting I need to fix the code formatting because the way that the code is shown if you copy/paste it you can get some errors which is dumb because you should be able to copy paste code examples from a book that's like a key part of it so that's the big thing but I'm also thinking about having like a group of 5 or 10 people go through the book so what you do is we'd meet once a week and we'd get a chapter assigned for that week that you would read independently and then we would all meet and run through the exercises and skim through the content and it's helpful for me because I can make sure that I've done some up day like this version six update where I changed some of the things that I said I was really focused on selenium before now I've switched to just webdriver and chrome driver and I've added some dev tools in there so I may have made a change one place that no longer that I reference the old content in another place and I may not have caught it so that's something I want to be able to see but it also helps with when I turn this into a full course that I kind of have this starting point of okay this is what was a good way to teach and this is what not a great way to teach so if you're interested in that let me know reach out to me on Twitter I'm at 2k lamping or leave a comment here and keep an eye out I hope to do that within the next few weeks because I kind of got to get the money for it I got to get the course money back in place so that I can keep so that I don't have to pick up another contract job so that I can build out the course fully so yeah I need to need to get to work on that a few more questions big problem with Cypress you have to insert code into the back end so if you're working on some sass platform you're locked out yeah that's one thing that I really really love about webdriver IO is how it's just another thing that sits on top of node and you can do anything you can do a node you can do with webdriver IO which is really cool you can get some really cool stuff with that I don't know if you saw but here I use chance j/s to create random stuff and that's a node library so I explain that in the book but yeah regarding developers breaking down over a bug so I could use baked in tools like a debugger but come on let's just use console.log it's it's too much trouble hit the debugger in place I don't think sublime text has good it does have a debugger you have build systems I don't know if it has a really good debugger I have gotten the vs code debugger working and it's pretty neat if I had a specific issue I would really jump into it but for my needs I just stick with browser debugger console.log it's just I don't know I feel like the effort taken to put those debugger stuff in place usually isn't necessary like you saw here it was just a network hiccup so the debugger wouldn't have helped with that whatever we do leave a raw version of this live stream yes definitely leaving a lot raw version of the live stream because it literally takes me no effort I just hit end stream and it goes in there so I'm going to call it a day thank you so much for joining in this has been really fun and I'm gonna try and set up this again for next weekend same time 2:30 Central Time works out pretty well for me works out well for y'all who I've joined and I mean I'll stay dry with your rainy season over there everybody else thanks for jumping in and listening and your questions and everything and until next time have fun testing

Channel: Front-end Testing with Kevin

Views: 4,089

Keywords: webdriverio, livecoding, coding, livestream, testing, nodejs, uitesting, functional testing, ui testing, webapp, webdriver, selenium

Id: aYzlGOfxatg

Length: 118min 25sec (7105 seconds)

Published: Sat Jul 18 2020