033 AiA Elementor with Andres Dominguez

Download MP3

Check out RailsClips on Kickstarter!!

 00:58 - Andres Dominguez Introduction

01:47 - protractor

03:50 - elementor

09:54 - Use Outside of Angular

10:37 - The Name: “Elementor”

11:11 - Conception => Production

12:42 - Implementing Elementor / Workflow

14:39 - Testing a Non-Angular Website

15:31 - Installing the Elementor Chrome Extention

18:45 - Running in Emacs

19:47 - Plugins (egghead.io)    

20:47 - Debugging


Open Space Events and Conferences (Joe)Miracles and Massacres: True and Untold Stories of the Making of America by Glenn Beck (Chuck)DevDocs (Andres)


 ** JOE: All right, let’s get this show on the road. ANDRES: Okay. CHUCK: Road, yay! JOE: Yay, road! [Does your team need to master AngularJS? Oasis Digital offers Angular Boot Camp, a three-day, in-person workshop class for individuals or teams. Bring us to your site or send developers to ours --  AngularBootCamp.com.]****[This episode is sponsored by Wijmo 5, a brand new generation of JavaScript Controls. A pretty amazing line of HTML5 and JavaScript products for enterprise application development, Wijmo 5 leverages ECMAScript 5 and each control ships with AngularJS directives. Check out the faster, lighter and more mobile Wijmo 5.]****CHUCK: Hey, everybody and welcome to Episode 31 of the Adventures in Angular Show. This week on our panel, we have Joe Eames. JOE: Hey, everybody! CHUCK: I'm Charles Max Wood from DevChat.tv. I wanna just throw out a quick reminder to go checkout devchat.tv/kickstarter if you wanna support the shows. We also have a special guest this week, and that is Andres Dominguez. ANDRES: Yeah. Hello. JOE: Do you wanna introduce yourself really quickly? ANDRES: Yes. So my name is Andres. I'm a Software Engineer here at Google New York. I've been doing for three years. I joined three years ago and we started with a big Angular project because at the time… the first big Angular project that we had inside of Google, so it was kind of a proof of concept. More recently, I've been working on Protractor. I did the website and I also built a few tools for testing. And there are a few plugins over there, so if you check my GitHub, you'll see all of those tools. JOE: Awesome. CHUCK: Cool. Now, just to give people kind of a quick overview, Protractor sits on top of Selenium WebDriver and it tests your application that way, right? ANDRES:**Yeah, that's right. So you have WebDriver, you have web driver and you have WebDriverJS which is a JavaScript implementation of web driver. And on top of that, you have Protractor. So Protractor gives you the ability to wait for Angular. I would say that that’s a killer feature of the tool. So most of the test, sometimes you have to wait for something to happen and that’s kind of annoying because either you sleep or you wait for some DOM element to show or to disappear from the DOM. So with Protractor, everything is transparent. So on top of that, Julie and the Protractor team (Julie Ralph was the original author of Protractor), she started adding this amazing syntax that allows you to write very useful, easy to read tests that are short. And they are amazing. The API is much better than the regular WebDriver.JOE: That's not necessarily a difficult thing, of right? Because doesn’t the regular WebDriver API kind of suck? ANDRES:[Chuckles] Well, when you're writing this kind of test, you're getting an element and then you're doing something with that element; either you're going to interact with it, let’s say you  have an input and you add some text or you're going to click on a button. And then you're going to do some assertions; you're going to check if a class is there or a text value is there or something. And the intention of this kind of test is to simulate the actions that a user would have on the browser. So some people are crazy and they check like CSS and positions and stuff like that. I think those tests are going to be flaky in the long term. And if you just make it simple, test the minimum and you have the philosophy of testing as a user would test, then I guess you're good.**JOE: Awesome. CHUCK: So, Elementor, I'm trying to get a feel for how it works. I have to admit, I didn’t watch the video, but I just browsed through what it says it does. ANDRES:**Okay. So Elementor, when Julie was first developing Protractor, we were in an Angular conference, it was like an internal Google conference back in October 2013. And it was like a proof of concept, so nobody was using Protractor. And I spoke to Julie and I told her, we’ve tried WebDriver; it didn’t work.” We had like a bunch of tests and they were super flaky. It was really, really hard. We were doing some hacks like exposing some state through the UI, so WebDriver would wait for those things to happen. Then we used Angular scenarios; it didn’t work for us even if we had support from the Angular team because we had like a very close relationship with the team. And then Julie came with Protractor and I said, “Okay, why don't you come to New York and let’s try to do like a big Protractor project for my team?” And at the time, we had like a huge team; we were like 19-20 people and we're all doing Angular. And one of those nights, I said, “Listen, it's kind of hard to find elements.” And I suggested coming up with something called the “Element Explorer.”  So I had my implementation which was not very good. [Chuckles] And then at the same time, Julie created her own element explorer. So the element explorer is you launch Protractor, it's like live session, you launch the browser and you start experimenting. Because when you're running integration tests, it takes a long time to reach the state where you wanna test something. Imagine when you have to login, create these dependency. Imagine you have like billing application, so you have an order and you have line items for a customer. So to create a scenario for these kinds of tests, you have to create the customer first or retrieve it somehow because you know it exists in your persistence layer. And it's a lot of work. So the element explorer allowed you to put the browser in certain state and then you start banging on the terminal. You say, “Okay, let me try this locator. Okay, by CSS. Oh, maybe not so good.” And that was really good, but some people, they are not very good at using their terminal and their IDE. So when you're developing, I like [unintelligible] IDE, I use WebStorm or IntelliJ. I'm a super big fan. And I said, okay, we have this thing in my team called “innovation week.” So for a week, you can do pretty much whatever you want as long as it's something you can ship and it's going to be useful. Or you can make it part of a product or whatever. So I built this thing. I had this idea about like why don't you build a tool that will suggest you locators or maybe you can test it from your IDE or from the browser? So Elementor just launches Protractor and it uses their current element explorer but it opens like a server and that server will listen for commands. So you can say, “Okay, I wanna test these from the IDE,” so you select a bunch of text and you can interact with the browser from your IDE. So it's like you're replicating the steps of your test within your IDE. I have a plugin for Sublime, a plugin for IntelliJ, WebStorm and so on. There's also a Chrome extension, so you can open the developer console; you select the DOM element and it will try to suggest a bunch of locators. So if you're like an experienced web developer, obviously you're not going to need like “my CSS is going to work like this.” So it's more for lazy people. I'm incredibly lazy. [Chuckles]**CHUCK: Yeah. Well, this is a good thing. JOE: Or for learning, right? This will be really good for learning. ANDRES:**Yeah, when you're discovering the API, they get super confusing; you have promises and have locators. And it's really confusing the first couple of days, then you get like a handle of how to use the API and it's fantastic. But the first few hours is like a nightmare; you don't know what's going on. And especially with promises and like the control flow, it's hard. And then we have this person who was in the QA team. We only have like one QA person, and he didn’t know any JavaScript so I gave him this tool. He started writing Protractor tests even without knowing what he was doing. [Chuckles] So he would select the element, copy the locator, put it into a test, run it and boom, you have like a few integration tests from like a super, super beginner who didn’t know a lot of JavaScript – which was amazing.JOE: That’s awesome. CHUCK: Yeah, that's really cool. JOE: That’s really impressive. ANDRES:[Chuckles] Yeah, so the intention is most of the time, whenever you're writing a test, of course you have the philosophical questions like, “Okay, what am I going to do with my environment? How do I start it with some state?” And you have those things. What is it I'm going to test? That’s like a big deal. But once you know what is it that you're doing, most of the time, you just wanna find something, do something with that web element or that DOM element in the browser and then you do your assertion. That's pretty much it. So you navigate to some URL, you click here, you click there, you set this value, you do something else, boom, assert. So I've seen people struggling and repeating this over and over and over again. So this tool allows you to write a test in a few minutes. If you do it right, it should be a good test. But then it's more like an approach you take to writing Protractor test, which is something really hard, I guess.**CHUCK: It seems though that something like this could be used outside of Angular. ANDRES: Yeah. I guess Protractor, it doesn’t have to be an Angular application, the start of your testing because the API is fantastic and it has this built in mechanism to wait for Angular to be ready to go to the next step. So you can use with an non-Angular application. I had to change it a little bit and the Protractor code base changed a little bit, so now they implemented frameworks. And I'll improve it in the next few weeks. But yeah, it doesn’t have to be Angular specific; it can be whatever tools you decide to use. JOE:**That’s really cool. So what about the name, “Elementor?” This sounds kind of like He-Man’s enemy. [Laughter]**ANDRES:**Yeah, well I wanted to pick a name so it was okay, we have Protractor, we have Element Explorer, so why don't we put them together and boom, you have Elementor. And I Googled it and I've found it's like a character. [Laughs] I'm not claiming any copyright with the name.JOE:[Chuckles] Well, it's a pretty bad-a name, that's for sure.**ANDRES: Yeah, that’s how I came up with the name. JOE: So again, how long ago did you start working on Elementor? ANDRES: It was maybe like eight or nine months ago. JOE: Oh, so you’ve really had quite a bit of time to work on this and see it in production use, right? ANDRES:**It was a pull request, like having the Protractor code base and I couldn’t convince Julie to accept it, so we [inaudible] over a couple of weeks [chuckles] but I will ask her like, “Okay, can you check this code.” And it's like after a few discussions, we decided it's not going to be a part of Protractor, so I made it its own npm.**JOE:**In that the true spirit of open source. “Oh, you don't like my pull? Well, watch this.” [Chuckles]CHUCK:[Chuckles]**ANDRES:**Yeah, we were already using it in my team, so people loved it. And when I meet when the Protractor [inaudible] I tell them, “Listen, you build fantastic stuff, but you really don't know how it's like to write a test,” because for example, you said Sublime… Sammy, who's a new team member, uses Vim and [inaudible], I think he uses also Sublime but they never write tests. They can write their own tests for Protractor and they have this fake website that doesn’t have a backend. So they really don't know what it's like to interact with a real application. Sometimes, you have to do something like a batch operation and update hundred entities and then obviously, it's going to take a couple of seconds or maybe more than a couple of seconds. So they don't know what's it's like in the real world writing Protractor tests.**CHUCK: So I'm curious, is all the difference in your workflow just that you have this extra tool that you start up when you run things. So you do your elementor https angularjs.org or whatever. ANDRES: Yeah, like as I've told you before, usually when you're writing a test, it's not as easy as you go to AngularJS.org and then you add a to-do. It's never like that. It's never like you go to a URL and you’re already in the state that you want. So the philosophy is like you put the browser in the state that you need and then you start playing around until you have like a useful piece of test. CHUCK: Oh, okay. ANDRES:**So that’s my workflow. My workflow is I don't really know what I wanna do. I would say like I love TDD. Sometimes, you can’t do TDD because you don't understand what you're doing, [chuckles] especially with some parts of Angular. So you say, “Okay, I'm just going to write a comment.” So I always have this philosophy and I’m always pushing people to give me a given [inaudible]. So given is like a preconditioned interactions and then it's the assertions that you wanted to run in your tests. It may be a little bit more difficult when you're writing an integration test because it's not a very clean given for all of the scenarios. So imagine that you're writing a to-do, given that you go to the Angular website, when you enter this text and click on the “add” button, then you're sure there's a new item. That will be like a very simple workflow. But sometimes let’s say you're doing like send an email and you change your state and then you have to do like an expect somewhere to check that the status changed, it's not so clean. So I try to add comments before I write the test and that’s how I go. It's like okay, I put Elementor in that state, I start finding the elements and it's usually like after a couple of [inaudible] have everything running.**CHUCK: Now, one of the thing that I'm seeing, it looks like the URL for Elementoris optional. So if you run it without a URL, then does it just connect to the browser, headless or not, that Selenium starts up? ANDRES: Yeah, it starts the browser and you can do whatever you want with the browser. CHUCK: Okay. ANDRES: It may not work if you go to a non-Angular website. You have to say “browser.driver” which is a raw driver API that was not waiting for Angular to be ready. Or you can just enter from the command line “browser ignore synchronization=true” and that’s how you test in a non-Angular website. Which is very common when you're logging in. Usually, people have an Angular application  but their login screen is not Angular. So that’s one of the top questions whenever people are starting with Protractor. CHUCK: Yeah, that makes sense. So do you have to do anything to install the Elementor Chrome extension? ANDRES:**No, you just put it inside the browser. So you're going to see it in the developer tools. Unfortunately, the way WebDriver communicates with the browser, this is developer tools… so we have the console open, it will not work. So you have to clone the tab and do like some… put the two tabs in the same state and then you can start testing from the developer tools. Or you can use… there's a pop up in the corner that you can open and you can start banging commands. So you say, okay, if you say something and by CSS and you say div, it will turn this into a count expression and it will tell you like, “Hey, there are like 20 divs here.” I mean it's not a good locator, but that’s how it is. You have a bunch of tools, you can either do it from the browser, from the developer tools, from your IDE (whatever IDE that you use).**CHUCK: Gotcha. JOE: That's awesome. ANDRES:**Yeah, we've been pushing a lot of people to use Protractor. It's a fantastic tool and I think we have the largest Protractor code base. We have tons of tests; maybe we have like 170-180 tests and they run all the time. So the reason why I push people to use Protractor is because eventually, you have to go to production. And that going to production maybe like every few days, every few hours, every month but somebody has to test the application before you go into production, right? So I used to be a banker. So obviously, you have to wait until the market closes; so that’s like Friday, 6PM. That’s when you can deploy. So I would say whenever I had to manage the release, I would stay and run this like 200 steps… it took hours and you're tired because it was the end of the week. So I’ve been always trying to automate this task because you have smart engineers and you always have lazy engineers like me. [Laughs]**JOE: They are not mutually exclusive. CHUCK: Yes. I was going to say… JOE: In fact, they are usually the same thing. ANDRES:**I'm not very good at testing manually. Sometimes I just say, “I'm going to skip this test because either I don't understand what is done with testing or it takes too long or nobody changed the code so I'm going to trust that it's not broken.” So sometimes you go to production because you say, “Okay, it's going to be okay.” But nobody really tested it manually and that’s why we have like very good coverage with Protractor. Something [inaudible] is going to be hard to test obviously. There's no way to check if your CSS is wrong. So if your button is misaligned or the color is wrong or you don't see this, that’s very obvious when you see the application. For me, you can automate a lot; let’s say 80-85% but you still have to click around a little bit, a few minutes. But you go from an hour to maybe five minutes. And then when something breaks, you say, “Okay, let me check that scenario.” Did the code change? The locator changed? Or is this feature really broken and we have to fix it before going to production?CHUCK: I really like it. I think it looks really just like an interesting extension. The only problem I have with it at this point, just looking through everything, is that it doesn’t connect to a real code editor, meaning Emacs. JOE:[Laughs] Oh, gosh! You're killing us, Chuck. There's two people on this phone call that are rolling their eyes.ANDRES:[Chuckles] It should be relatively easy. You just send an HTTP GET and then it will give you a JSON object; you parse it and you turn it into bang. I don't know if you can show a pop up on Emacs.**CHUCK:**No, you can open another pane and show the information there, so. Yeah, I don't think it’d be terribly difficult. But I had to sass you a little bit, I mean you're supporting Sublime Text and everybody knows Sublime Text is dead, so. [Laughter]**ANDRES: It's great but it doesn’t… you can’t do refactoring. I don't know, WebStorm is fantastic. And once you know how to build plugins, I don't know, my inspiration is always when I see egghead.io and I see these plugins like sjump, I don't know if you have tried it. JOE: Yeah, SJump is cool. ANDRES: John Lindquist has a few plugins, so he inspired me to build my own plugins. I have a few ones. There's one called ddescriber, which you can use for Jasmine tests. So it just hack your ID if it doesn’t work the way you want it to work, you just learn how to do it and that’s why I love IntelliJ or WebStorm or whatever. JOE: Yeah. I'm a big fan of WebStorm too. CHUCK:**Yeah. I do like WebStorm for a lot of things. Sometimes just having the GUI is… Anyway, let’s see who else can I troll while we're at it. [Laughter]**JOE: You didn’t troll Vim, Chuck. Come on. CHUCK: I've said Emacs. That’s all it takes. But anyway, is there anything else that we should talk about with Elementor before we get to picks? ANDRES:**I would say give it a try. Give me some feedback because I'm going to improve it over the next few weeks. I'm going to visit the Protractor team next month and I wanna make it awesome [chuckles]. And that means like having more interaction with your IDE, making it more flexible. And I don't know like to which point you can get maybe integrating the debugger with Elementor. There are many ways to debug. Not many people know how to do it. It's kind of overwhelming if you don't have WebStorm [chuckles] people do it from the command line. But yeah, that’s going to be my focus for the next month, I guess.**CHUCK: Awesome. ANDRES: And you should try protractor. Protractor is amazing. CHUCK: Sounds like fun. All right, let’s do us some picks. Joe, do you have some picks for us? JOE:At ng-Conf, which this is not an announcement for ng-conf because by the time this comes out, the conf should be like in swing, right? But at ng-conf on Wednesday night, the night before, we're doing kind of a hack night. And one of the main events for that is an Open Space’s event. And I love Open Spaces. So Open Space is going to be my pick. An open space event is where you just have a small circle of chairs (ten to twenty chairs) and you have a topic and people show up and talk about that topic for say half an hour. And it doesn’t matter if you're an expert; you can still show up and get to hear it. And if you are an expert, you can show up and help other people. And I love Open Space conferences. So the ones that I have gone to, they’ve always started out at the beginning and had everybody go up and sign up for a topic to facilitate even if they don't  know anything about the topic, they just wanna learn it. And they are just going to sit there and make sure that people talk about it and they might take notes on a little white board or something. So you can always pick a topic that you're really interested in and not have to worry that there's going to be a talk about it. And then people show up and talk about that topic and I just love it. So I really hope that Open Space Even goes really well. And I really hope they expand on it next year. So it's going to be my pick is Open Space Conferences.CHUCK: All right, I'm going to throw a pick out there. I'm reading a book called Miracles and Massacres. I know that in the US depending on what your political leaning is, the author's a little bit controversial; it’s Glenn Beck, but it's mostly just stories out of history. And it's really, really fascinating to listen to. So right now, I'm listening to basically the history of Westinghouse and Thomas Edison. So Thomas Edison was a proponent of DC electricity coming into our houses and stuff, and Westinghouse was putting in AC electricity, so it's kind of the battle there. Nikola Tesla was working for Westinghouse at the time and so you know it's basically kind of a Tesla versus Edison and all the political gains that they were playing to try and win the market. And so it's been really interesting to listen to and I'm really curious to see what finally wins out for AC current since that’s what we actually use in our houses today. And the other stories have been terrific too, just you know glimpses into the Revolutionary War and the times just past that. Andres, what  are your picks? ANDRES: there is a website that has APIs for multiple projects, it's called DevDocs.io. You can check Node, you can check Angular, there are thousands of projects. And then like from a single place, you can see what functions are available. It has a left navigation menu and it has a search bar and you say, “Okay, I'm going to search across all of these projects.” And let’s say you're going some nodes, okay, I wanna explore HTTP. You start typing, it will do a filter and then boom, it's there. So instead of googling, because I don't know, Node’s documentation is not as good as it should be, this tool is just amazing. And it's for multiple projects. CHUCK: Awesome. All right, if people wanna get in touch with you or find out more about Elementor, what should they do? ANDRES:On GitHub or maybe Twitter is @andresdom or I don't know, Google+… wherever you can find me [chuckles], LinkedIn -- just Google me.CHUCK: All right. Sounds good! Thanks for coming. ANDRES: Thank you for having me. JOE: Yeah, it was awesome. CHUCK: Great conversation. All right, we will wrap up the show and catch you all next week!  [This episode is sponsored by Mad Glory. You’ve been building software for a long time and sometimes it gets a little overwhelming; work piles up, hiring sucks, and it's hard to get projects out the door. Check out Mad Glory. They are a small shop with experience shipping big products. They're smart, dedicated, will augment your team, and work as hard as you do. Find them online at madglory.com or on Twitter at @madglory.]**[Hosting and bandwidth provided by The Blue Box Group. Check them out at bluebox.net]**[Bandwidth for this segment is provided by Cache Fly, the world’s fastest CDN. Deliver your content fast with Cache Fly. Visit cachefly.com to learn more.]**[Do you wanna have conversations with the Adventures in Angular crew and their guests? Do you wanna support the show? Now you can. Go to adventuresinangular.com/forum and sign up today!]

Sign up for the Newsletter

Join our newsletter and get updates in your inbox. We won’t spam you and we respect your privacy.