Browser testing with Travis & Sauce Labs -- Polycasts #38

Key Takeaways

hey there podcasters Rob here today on the show we're going to be continuing our series on web component tester by looking at Travis CI and continuous integration with s laabs a lot of fancy buzzwords there but basically what I'm describing is testing your site on multiple browsers in the cloud so to do that first thing we're going to do is set up Travis CI now if you've never heard of Travis CI before you may have actually seen it and not known it often times you go to GitHub repos and they have these little green badges that say build passing that's travisci it's a little service that lets you run unit test up in the cloud now one of the cool things about Travis is that it can sort of work with other services and one of those services that we're going to couple it with is called SAU laabs and SAU laabs whole thing is letting you run your test against multiple browsers on different VMS so imagine being able to test Windows Internet Explorer 10 and also iOS and ALS also old Android browser all using the same service that's what s laabs gives you so today we're going to be kind of combining both of those to verify that our components work really well on different platforms now the first thing we're going to do is set up our Travis account so here I've already gone and and registered and everything like that and what I want to do is go over to up in the top right where it says accounts click on that it'll take you to this page here and there's some steps that it outlines for setting up your account to work with Travis the first is going and finding your your repo in there and just like flipping that little switch to enable your repo then you're going to need to set up a little Travis yaml configuration file and that's basically just to give Travis instructions like hey what do I do when you push new code right the last thing you're going to want to do is just trigger a build by doing a regular old git push so for these tests we're going to be using a set of elements that I've already created called chart elements so let's go find those in the list there they are we're going to flip this switch right here and that is basically it now we've linked Travis to this GitHub repo so when I'm pushing new code it's going to if there's a configuration file tell Travis to do a bunch of cool stuff and the next thing I want to do is go over to Sauce labs and create my sauce account SAU sauce has a section on their website called op sauce and basically what they do is they give free accounts to folks who are doing open source software which is maybe you in this case I'll include a link to this down in the description so you don't have to hunt around for it you go to that page and if you scroll down to the bottom there you're going to see a little button for creating your account click on that it'll take you through a pretty typical flow for for setting up your your own sauce account and once you're done it's going to take you to a dashboard that looks kind of like this now the really important thing in this dashboard is down there in the bottom left you've got this little access key right so I'm going to blur that out in this video so you can't see mine but yours will not be blurred get that access key save it to your clipboard because we're going to use that in just a sec the next thing we want to do is figure out what browsers do we want to test so if we go to the SAU laabs Wiki and I'll include a link to that in the description as well you can see that there's a whole host of different browsers different version numbers different platforms right all of these are available for us to test upon so we could test Android we could test uh Chrome or Firefox we could test on Windows or Vista or Mac or what have you right all these are available so I'm just going to go through and kind of pick a few of these that we can use in our application next we'll go to the web component tester website and we'll look at the readme file which has a little section on plugins now web component tester ships with a s laabs plugin so we can just copy this little block of JavaScript right here go over to our text editor paste that in in a web components cjson file so wct doc. Json right so we're going to do plugins sauce browsers and inside of browsers I'm just going to go ahead head and Chuck in a whole bunch of these browsers that I grabbed from the sauce Labs Wiki so I've got Microsoft Edge on Windows 10 there's no version number because that's an evergreen browser but just below that we've got internet explorer running version 11 on Windows 8.1 and it's really awesome that you have just all these different platforms available to you if you're a Windows user maybe you don't have access to a Mac then we can test on Safari on different versions of OSX right very cool stuff there once I've got that squared away I'm going to go back to the uh polymer SL tools repo inside of here there's a sample Travis file and a bunch of steps that'll outline how we get things working with Travis and Saabs so going down here there's a there's a list of the different Travis commands that you can do we've actually done all these already but you have them here again for reference and then we're going to go down to the section that says web component tester with sauce right so there's a few items here that we need to tackle the first is we need to grab this sample Travis file then we're going to need to install the Travis Ruby Gem and lastly we're going to run these two commands here to encrypt our s laabs info so we're going to go grab this Travis yaml file Travis with sauce and I'm just going to go to Raw mode hit enhance enhance enhance okay and now it is nice and ginormous I will paste that into my text editor Boop now this is a lot of codes what's going on here let's walk through these piece by piece up at the top the first thing that I'm doing is I'm just telling Travis What in environment to run in Travis can run all sorts of different environments here I'm just saying I want it to be nodejs I want it to run the most stable version of node and I don't want it to call sudu or do anything like that next I'm telling Travis what browsers I want it to install locally now you don't have to do this part this part is optional but I just thought it'd be kind of a cool thing to include Travis itself has access to a couple browsers if you want to try and test like Firefox or Chrome just there locally so I'm actually putting in these commands this will this will install those on on Travis so we have them then below that there's this little block called before scripts so this is all the codes that's going to run before I kick off my test and this is basically it's all the preamble to to set up and prep the VM so I'm installing web component tester I'm installing Bower I'm exporting the path to the node modules binaries for web component tester and I'm also going and calling B install to install all of my components so that is going to set everything up now the environment is is primed the last thing we're going to do is call these two scripts down here and you might be looking at these being like whoa I have no idea what any of that does let me decipher it a little bit that first line that says xvfb run web component tester that basically says Hey on Travis just here locally I want to run web component tester and that's actually going to test those two browsers that I installed local Firefox and local Chrome the line after that is going to check to see if this was a pull request if it was not if we just like push some code to GitHub or something like that then it's going to run our test in sauce laabs using that whole huge list of browsers that I wrote out before now to make this work exactly as we spec it out I'm going to need to add a couple Flags to these commands this first line here I'm going to add the skip plugin sauce command the second line below I'll add the skip plug-in local command basically what that means is when we're testing in Travis we only want to use the local browsers when we're testing in sauce Labs we only want to use that list of browsers that we defined there everything is square let's now go and set up our sauce keys and this is going to let us do sort of secure communication back and forth between Travis and SAU laabs I've already gone ahead and installed the Travis gym if you have not done that you can run uh gem install Travis and then called Travis encrypt pass in your sauce username and the ad flag and then Travis encrypt pass in your sauce access key and do the ad flag there as well and that's going to write all those Valu Val to your yaml file you can actually go back and you can verify that you've got these like big secure blocks of hashes this means you're Square you're set up and now you can actually start working with Travis and sauce go back to our terminal and we're going to run get add get commit and lastly get push we're just going to send all that code up there and then we can switch over to Travis and we can actually watch all of our tests running against all these different browsers live so you can just sit there and watch the output as it runs Chrome 47 Firefox Etc right those are those local browsers that Travis already has and then if we let it keep running now we'll start to see Windows 10 OSX this is now it talking to SAU laabs kicking off all these other browsers in the cloud we can see that all of our tests are passing there as well SAU that is the basics of setting up Travis and sauce it is a great approach to take if you want to go ahead and figure out if your components are working well in a cross browser fashion there's a lot more that I want to cover on these topics so if there's things that may you're interested in seeing please leave us a comment down below let us know what you want us to talk about also consider clicking that like button or the Subscribe button if you want to see more of me if you want to Ping us on a social network of your choosing you can send us some questions at Ash askpolymer as always thank you so much for watching and I'll see you next [Music] time I'm doing like a cheerleader hand dance