I love automated testing, and I really love Protractor testing. Although Protractor is an e2e testing tool created by Google and popularized on AngularJS projects, I've heard that it was possible to use it with non-Angular sites. When I tried I had a bit of trouble, but in this post I'll show you how I managed to get it working.

While working on a project for work I was presented with a plan to incorporate an animated jquery slider in our AngularJS application. I was able to wrap it in a directive and have every working honky-dory on gulp serve, but when I ran gulp build the jquery carousel widget wasn't working properly. It turned out that there were relative path references to other html, css, and JavaScript files declaring right there in the code with relative script tags. These import references were broken when the gulp build task did it's thing with minifying, uglifying, and concatenating files. Instead of going in and modifying the third party code, I was able to add these third party files into the project while keeping just these files safe from the build task. 

If you use the page object pattern when setting up e2e tests (as they are written in the gulp-angular yeoman generated project) then you might want to check that the properties of this page object are actually elements that exist on your page. Indeed, checking that my page object elements exist is almost always the first protractor test that I write. I naively tried a method that didn't work so great at first before finally finding the glorious "isPresent()" method available on my page object elements. 

One of the things I really hate is when my application running in gulp serve looks totally different from the application running with gulp serve:dist. The second one does a production build and then runs that, and sometimes with the minification and concatenation things gets messed up (usually it's that dang css). Anyway, this post is about how I fixed the z-index issue that is related to this.

So... today I had another meetup event at the SpotDesk office in NYC, It was somewhat rough, although overall I was happy with how it turned out. I think in general everyone was at a much more beginner level than I was expecting. We live and we learn, and hopefully down the line we still remember what we learn. I'm writing this blog post to help me remember what I've learned.