 Hey there, Polycasters, Rob here. Today on the show, we're gonna be continuing our series on Web Component Tester by looking at Travis CI and continuous integration with Sauce Labs. 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 gonna 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. Oftentimes you go to GitHub Repos and they have these little green badges that say build passing, that's Travis CI. It's a little service that lets you run unit tests 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 gonna couple it with is called Sauce Labs. And Sauce Labs' 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 also old Android browser all using the same service. That's what Sauce Labs gives you. So today we're gonna be kind of combining both of those to verify that our components work really well on different platforms. Now, the first thing we're gonna do is set up our Travis account. So here I've already gone and registered and everything like that. And what I wanna 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 repo in there and just like flipping that little switch to enable your repo. Then you're gonna 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 gonna wanna do is just trigger a build by doing a regular old git push. So for these tests, we're gonna 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 gonna 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 gonna, if there's a configuration file, tell Travis to do a bunch of cool stuff. And the next thing I wanna do is go over to Sauce Labs and create my sauce account. Saucy. Sauce has a section on their website called OpenSauce. 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 gonna see a little button for creating your account. Click on that. It'll take you through a pretty typical flow for setting up your own sauce account. And once you're done, it's gonna 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 gonna 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 gonna use that in just a sec. The next thing we wanna do is figure out what browsers do we wanna test? So if we go to the Sauce Labs 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, all of these are available for us to test upon. So we could test Android, we could test 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 gonna 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 Sauce Labs 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 Conf JSON file. So wct.conf.json, right? So we're gonna do plugins, sauce, browsers and inside of browsers, I'm just gonna go ahead 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 it'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 of 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 OS X, right? Very cool stuff there. Once I've got that squared away, I'm gonna go back to the Polymer slash 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 Sauce Labs. So going down here, 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 gonna 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 Sauce Labs info. So we're gonna go grab this Travis YAML file, Travis with Sauce. And I'm just gonna go to raw mode, hit enhance, enhance, enhance. Okay. And now it is nice and ginormous. I'll paste that into my text editor. 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 environment to run in. Travis can run all sorts of different environments. Here I'm just saying I want it to be Node.js. I want it to run the most stable version of Node. And I don't want it to call sudo 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 install those 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 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 Bower install to install all of my components. So that is going to set everything up. Now the environment 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 Labs using that whole huge list of browsers that I wrote out before. Now to make this work exactly as we spec'd 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 plug-in sauce command. And 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 Sauce Labs. I've already gone ahead and installed the Travis gem. If you have not done that, you can run gem install Travis and then called Travis Encrypt. You're passing your Sauce username and the add flag. And then Travis Encrypt passing your Sauce access key and do the add flag there as well. And that's going to write all those values 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, et cetera. 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, OS X. This is now it talking to Sauce Labs, kicking off all these other browsers in the cloud. We can see that all of our tests are passing there as well. So I'll say it. That's 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 maybe 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 hashtag askpolymer. As always, thank you so much for watching and I'll see you next time. I'm doing like a cheerleader hand dance.