andres dominguez:hello, everyone. welcome to google. my name is andres. i'm a front-enddeveloper in doubleclick. we have the largest--can you hear me? good. we have the largest angularapplication in the universe, according to oneof our developers. we have been working on angularfor more than three years,
and we work very closelywith the angular team. very recently, ihave been working with julie ralph, theauthor of protractor. protractor, i'm going tobe talking about this. it's a framework to testangular applications. so let's go to our talk. the agenda is goingto be about testing. i'm going to show youthe basics of protractor. protractor works on--it's based on webdriverjs.
i'm going to giveyou a few demos. i'm going to show yousome best practices. it's a relatively newframework, so best practices, imagine quotes, because thoseare my practices, because we don't have a lot of tests yet. then i'm going to showyou a few tips, something that i learned during myinitial integration tests and what problems i hadand how i solved them. and hopefully you don'thave to repeat those.
how many of you havewritten end-to-end tests? ok, quite a few. so i'm going todescribe what exactly i mean by end-to-endtesting, and what's the difference between unittesting and end-to-end testing. so when you'rewriting unit tests, imagine that you havean application that has three or more layers. you have your front end, whichis your angular application,
and you have unittests for that. then we have a middle tieron the back end, which is a database or somepersistence layer. and then you'll write unittests where you're really testing a singlefeature, and you're very limited to the interactionon what you're testing. it looks something like this. so you have some tests foryour middle tier, some tests for your controllers,for your directives,
but you really don't know ifyour application is working. you have to make sure thateverything is connected. and as someone saidin my previous job, it's like you can havethe best application, but if your combo box or yoursave button doesn't work, then basically you don'thave a safe application. so when you're testing afeature with end-to-end testing, you have to make surethat all of the components and all of the littlepieces and your save button
and the directiveand the controller and the services,everything is connected. and you have to makesure that when you save it goes all the wayto a persistence layer and it comes back. and you have to doit automatically, because doing it manuallyis a pain in the ass, and every time we haveto go to production, you have to spend hoursor maybe half an hour
or an hour doing itmanually, and it's horrible. so why would you use protractor? some people ask me what'swrong with the angular scenario runner, and here aresome of the reasons. it hasn't beenupdated in two years. there have been somebug fixes, but it's really, really limited. so everything you runis inside an iframe, and if you want to interactwith something that
is external toyour application-- let's say you need tolog in or maybe you need to open two windows at thesame time-- you can't do it. whatever you're doinginside that iframe, that's all you can test. with protractor,it's more stable. you can takescreenshots and-- ok, i'm going to show youthe basic of protractor. protractor is based onwebdriver, selenium webdriver.
they basically mean thesame-- selenium and webdriver. they used to be twodifferent projects, but eventually they merged. and now they mean the same. so i'm going to say webdriverinstead of selenium webdriver. so how many of youhave experience with webdriver or haveheard about webdriver? ok. so webdriver is asuite of tools that
allow you to automate tests. and they run several browsers,so you have different plug-ins and you can run chrome orinternet explorer or firefox or other things like android. and it can be controlled byseveral different programming languages. you can do java orpython or javascript. in this case, i'mgoing to be showing you how to do your tests injavascript with node.js.
protractor is implementedin javascript, and it's very popular. it has a lot of support. it's a great framework totest your applications, because it basically mimicswhat a real user would perform on a browser. so all of the actions likeclicking on an element, entering text, hitting enteror hitting escape or stuff like that, you can mimic thoseoperations on a web browser.
so let me show you alittle bit about webdriver. if you want to learnprotractor, you need to understandhow webdriver works. so you have something calledthe selenium web server. it's a server thatyou start, and it will interact with severalbrowsers, one or more browsers. it connects to yourangular application, and it's a processthat you start. it opens a server in a port,and you issue instructions
on the server, and it performsactions on your behalf. there's a webdriverjs api,and you send the instructions, and you say, ok, find thiselement, click on this button, go to this url and so on. your tests arewritten in javascript. you execute these teststhrough protractor, and protractor communicateswith the selenium web server through http. i'm going to show you anexample of a webdriver test, how
it looks, something very simple. in this test, we'regoing to import a module, like a regular node application,so we use webdriver. we configure it. we create a new instancewith the builder. we pass the capabilities. here we are saying ok, usechrome, and then you build it. and then you have driver. driver is the objectthat allows you
to interact with the browser. so, in this example,we are going to google and we're going tosearch for something. so the first actionis going to a url, so you go www.google.com. and then you have thesesyntaxes that have promises. so you'll find an element. you say driver, findelement, and you have like a strategy,a locator strategy.
and you say, ok, find by name,find by css, find by x path. so there are multipleways to find an element. once you find the element,you can send keys. imagine you aresearching for webdriver. then you find the searchbutton, and you click connect. then you wait afew milliseconds, and eventuallyyou get the title, and you assert that the titleis webdriver google search. so here, whenever thepromise is fulfilled,
you're going to getthe text of the title and then you do an assertion. this is kind of flaky,because you really don't know how long the serveris going to take to respond. so usually when you'rewriting webdriver tests, the most difficult partis synchronization. sometimes it takes longer,and it usually-- it's a cause of many,many flaky tests. so whenever you have allof these instructions
for webdriver, webdriver hassomething called the control flow. it uses a promise manager,and the promise manager has a queue of allof the instructions that it has to perform. so even if this isall asynchronous, it simulates-- well, it executesall of these instructions in the same order as youhave them in your test. and then after it executesone instruction, it's ready,
and then it performsthe next one. so in this case, it willgo to www.google.com, find the elements, send text,click on the button, wait, and then it willdo an assertion. so protractor extends webdriver. so we have the webdriverapi, and on top of that, it will have some functionality. so you have webdriverjs. you have protractor, whichis an extension of webdriver.
it adds capabilities. and then you haveyour test codes, and it lookssomething like this. you have a protractor binary,and you pass of configuration, and you also have thisselenium stand-alone server, so you start it. so i'm going to show youhow it-- oops, sorry. so here i'm going to start myselenium stand-alone server. and it's-- ready.
i'm going to show you howto run a protractor test. in this case, we're going togo to the angular application. we are going to entersome text, and then we're going to do an assertion. so i just do protractorand the configuration file. i don't know if you can see. sometimes it goesreally, really fast. it will open angularwith a set of text here. and then it willassert these changes.
i'm going to show you thecoding in a few seconds. and it tells you, ok, therewas one test, one assertion, and no failures. so why should youuse protractor? it extends the webdriver api. it has some convenient locators. and the most important featureto me is it waits for angular. so you don't haveto synchronize. you don't have to sleep.
you don't have to say, waituntil this element is visible, wait until this state is there. so if you havesomething in flight, let's say you have an httprequest or a timeout that is waiting to finish,protractor knows it's connected to angular. it knows when it'sready, and then it proceeds with your instructions. so it's transparent to you.
you don't have tosynchronize anything. and it's very, very stable. there are no more flaky tests. it's great because it addssome custom selectors. and this is how you wouldwrite a test in protractor. it's based in-- in thiscase, we are using jasmine. if you are familiar withjasmine, you have a test suite. a test suite isa describe block. so here i have a suite,and i have a unit test.
my unit test is a neat block. so you say it-- itshould enter a name, and then we have pretty muchthe same syntax i showed you before. it will go to angularjs. it will find-- and here is whereprotractor is very convenient, because i'm going to angular. it will find my model. this is one of the extensionsthat protractor has.
it will send keys, and it willfind an element by binding, and it will get the text. so in the case of angularjs,it will come here. it will enter some text. and as you can see here,there's an ngmodel. it will find thiselement by model. and this one is a binding,so it says hello and whatever it's bound to yourname in the scope. here there are two waysto write your test.
you have a promise. you'll find the element. when it found the element--when it finds the element, it will fulfill the promise,and it will give you the value. so here i'm saying,ok, get text. and when it gets text, i'mgoing to do an assertion. so i say expect textto be "hello andres". there is a modificationthat julie wrote, which is really nice.
instead of havingthis promises syntax, you can do somethinglike passing a promise to the expect function. it will resolve it, and then itwill do the assertion for you. so you can do it likethis, but you can also do it like in the shorter,shorter format, which is ok, expect, element by binding,gettext to be "hello andres". and it's the testi just showed you. ok, so the locators thatprotractor has, there are a few
that you can use. there is by binding,which is very convenient. so whenever you havelike this syntax to bind some value fromthe scope to your view. or whenever you havengmodel, you can do by model. or you can also do byrepeater, so if you are finding an elementinside a repeater-- let's say you aredrawing a table-- you can do it by column or by row.
and a protractor configurationfile looks like this. it's very short. you can add more stuff, but thisis the most basic configuration file. you have theselenium web server, so this is thelocation where it will communicate this port, this url. then you say, ok, this is goingto be the pattern of the tests that you're going to be running.
then you can say,ok, the capabilities, in this case i'm passinga couple of attributes. the first one is "runchrome," and the second one is "i want to passflags to chrome." so usually when youstart your chrome, you have all of your extensions,and then it opens tabs, and it's like kind of noisy. and you can say, ok,disable extensions, or you can pass anyother flags if you
know how to configure it. you can pass a base url. so instead ofsaying in your test like, go to local hostport 3000 slash and so on, you can say, ok,based on this url, you just pass the relative path. and then you canpass more options like the timeout interval. it's by default 10 secondsfor-- i don't remember,
but you can override it. so today i'm going to beshowing you a simple angular application that i built. it's called a protractorband application. you can have members,albums, and bands. so here, i'm simulatinga slow application. so if you see, it loads the bandmembers, and then it responds. whenever i want to create anew one, i go here, i save it, and we have a new element.
so if you arestarting from scratch and you want to createa protractor project, you can use a tool that i built. how many of you are familiarwith yeoman, the code generator? ok, so i created ayeoman code generator, which is calledgenerator protractor. so you just executeyo-protractor-- hold on. and it will ask you acouple of questions.
the first one is what's thename of your configuration file? and i'm going to say thisone, because i'm lazy. it wants a base url. you say this. it will download allof the dependencies. it will create an emptynode application for your-- that includes theprotractor dependencies, and it has a simple test. so let me show you how it looks.
we have the package.jsonthat includes a protractor dependency. and it also has-- under tests,it has a sample unit test. so this one is verysimple, but it shows you how to test somethingreally, really basic. and if you want to run it,just say protractor, and then the configuration file. hold on. so it will go to ang-- andit's really, really fast.
sometimes you can't even see it. so in the examplei was showing you, i was putting some sleepsso you can see how it flows. ok, so i'm going toshow you how to write a very simple test forthe band application. and the architectureof the application is really, really basic. so we have anangular application. we have our rest api, whichis written in express,
and for persistencei'm using mongo db. so we have three layers,everything is running locally. in this case, i'mgoing to show you how to test creatinga new member. you're going to go tothe new member list. you're going to clickon the create new. you're going to enter a name. you're going to clickon save, and then you're going to do an assertionsaying, ok, make sure
that the member was created. so if you go here, younavigate to the member list. as you can see,there's a wait here. so protractor will waitfor this will happen. you can click on create. you can enter a name. then you have tofind the save button and then do an assertion. i'm asserting on thistitle, and i want to say ok.
if this same member created isthere, then the test is good. and this is how it looks. maybe the only thing youcan see is the loading, and they did that on purposebecause if you didn't have the timeout, it would go so fastit would run in like a second. so that's like a very basic--let me put it in presentation mode. so it will navigateto the member list. it will find by link text--this is one of the locators
that protractor has. it will find anelement by model. it will say, ok, new member. it will click onthe save button. and here there arelike different syn-- there's like syntacticsugar in protractor. so this looks like jquery,but it's really protractor. and this is shorthandfor element by css. so whenever you want tofind an element by css,
you can use thisshorthand notation. otherwise, you canuse element by, and then you say thelocator-- by css, by x path. so you can use all of thewebdriver locators plus whatever you have in protractor. so some of the bestpractices that i've found, and i have beendiscussing with julie ralph about thesepractices and how you want to structureyour integration
tests, your end-to-end tests. one of them isusing page objects. so instead of having this--this is kind of cryptic to read. this is kind ofcryptic, because if you want to reuse this, or imagineyou have several tests, and you're saying, ok,i'm going to update one. i'm going to delete one. i'm going to search. i'm going to have likemultiple interactions.
this is very, very difficult toread unless you have comments. so whenever i write my tests,i like having plain english. so i'm going to showyou a simplified version of this end-to-end test. here, i'm using a page object. the page object is basicallyabstracting whatever you have in theview and making it accessible through an object. so for each view inyour application,
you're going tohave a page object. so here we haveseveral elements. we have an id, input. we have a name, andwe have three buttons. so imagine you havea membereditpage. it will a name, a savebutton, an edit button. it would havenavigate so you don't have to remember what'sthe url, and then you would have a getid.
so the getid, we'll findit from this element. so once you startusing the page object, it's very, very easy towrite your second integration test or your thirdintegration test, because you can reuse large[inaudible] abstracted away in the page object. so here, you don't needthe comments anymore, because you can readit in plain english. it flows like"given, when, then."
so, for example, here, giventhat i navigate to the list page, when i click on thecreate button and when i say, ok, new member, and save, thenexpect an id to be defined and a message to be"member created." and the same for updatingan existing member. so it's very easy. and here i'm saying,ok, i'm navigating. i'm clicking on the first row. we can have something,i clickonrow
and you pass the index. you say, ok, name, sendkeys. it will click onthe save button, and then you'll say,ok, "member updated." and that's-- even if youdon't really understand the framework, it's reallyeasy to understand what you're testing. another best practice ismaking your tests independent, because sometimes, ifyou change the order you
run a subset of your tests, theybreak something, because you have dependencies, eitherbecause you created some object before or you dependon that object. so my recommendation would bemake your tests independent. you really don'tknow if you want to run only this one or thissubset or in which order. i also recommend you totest one feature at a time, because i have seen multiple,multiple, multiple assertions in the same test,and then you really
don't know what you're testing. and if one feature breaks,then only one test breaks, but you really don't knowwhat you're breaking. so be careful and havemultiple unit tests. here i'm testingone single feature. i'm saying, ok, create. here i'm just saying ok, update. maybe i can now an integrationtest, end-to-end test for validation orstuff like that.
just test one concept ata time, so when it breaks you know what's going on. now i'm going to show you somecommon problems i've found. the first one is,in my application, you have to log in. and i'm pretty sure inmost of your applications and we use the regulargoogle login application, which is not anangular application. so when i told you thatprotractor synchronizes
with angular, if you try toaccess a website that is not an angular application,you're going to get an exception,because it's going to say i waslooking for angular, and i couldn't find it. protractor wraps aninstance of driver. so you can call plainwebdriver and write the test like a regularwebdriver application. so if you want toaccess webdriver,
you just say browser.driver.get,findelement, and so on. so for your loginpage or whatever you want to test that is notan angular application, use browser.driver,and then you won't get that exception saying,ok, i'm waiting for angular, and it wasn't there. so another problem is ispend maybe 90% of my time when i'm writing an end-to-endtest finding a selector. so i like css selectors,but sometimes you
want to do somethingmore sophisticated, and it's not something thatyou can run from your console. so you can use theelement explorer. the element exploreris fantastic, because it allows you toopen a webdriver instance, and you can testwhat's going on. i'm going to showyou how to use it. the element explorer isunder protractor/bin, and you start it like this.
so here in the projecti just created, i go toprotractor/bin/elementexplorer. bin, it will start aserver-- a browser for me. and this is connectedto webdriver, so you can interacteither here or here. so imagine i go to angular. it has autocomplete, becausei am super, super lazy. it's fantastic. you say ok, get,http://angular--
audience: get angular? andres dominguez: butit's going to complain, and it's going to sayoh, you suck at typing. ok, i'm going toretype-- oh, here. it's great, becauseyou can do it from the command line or here. ok, so imagine i'm trying tofind a selector for this thing, which is by model orsomething like that. or maybe i want tofind something by name.
so let's try it. oops. sorry. let's do it again. so here i'm trying to find bybinding, and i'm using list. list will list you all ofthe bindings that it found. so here maybe selectingby binding name doesn't make any sense,because there are multiple, and you want yourselectors to be unique.
so here i can trysomething different. i can do something likeby css or by model. let me show you. so i want to find this item,which is-- to the text. and as you can see, itworks, and now i have this. this is a fantastic tool,because i would usually run and run and runand run the tests over and over and over again. and this is very,very convenient,
and you have the wholeapi here in your terminal. and i love it. sometimes you need todebug something, which is really hard because,as you can see, it goes, and it flows, and youdon't know what's going on. you can do two things. you can sleep, or you can setsomething called debugger. and then you can stop thetest in the middle of the run, and you can do iteither from webstorm,
or you can do it fromthe command line. if you have webstorm,intellij, or one of those ids, you can do something like this. i'm going to debug this. and it stops here. and i can see what'sgoing on and say, ok, oh, maybe this is wrong. and i can examine, ok,this element is not visible or something like that.
and then you continue. if you don't have an id, youcan do it from the command line, and you do it like this. you say debug, and you passthe configuration file. and you say c for continue. hold on, i'm not inthe same project. continue. and it's here. it just stopped.
sometimes you needsome data in your test, and that's a big problem,and there's really no good solution. if you can have aprepopulated database, and you can run a script,and you know something's going to be there. fantastic. but it's really,really hard to do. something that you can dois create your own data.
so if you have a service thatyou can call from your angular application to createthe data for you, you can do this kindof hack, and you can create the databefore you use it. so imagine that you havean http service that interacts with the rest api,and you have a create function. you can execute async script, and this runs inside the browser. so in the sample codethat i have on github,
there's a module. there's a service. i can get a reference to theapi service, and then i say, ok. member.save. i pass the data, andwhenever it gets a callback, it will call this callback, andit will give them the item id. so imagine i'm writinga test for a member, and i want to update a member. but i need a memberto be created first.
so i created callingthe rest api, and then i do somethinglike this-- createmember, and then when youget the response, this is the id of thenewly created member. and it looks like this. imagine i want to updatean existing member, and for some reasonit's very difficult to do it through their ui. or maybe it's tooslow, because you
don't want to go throughthe entire application. for example, in my application,we have several objects, and there areseveral dependencies. if you want to test a nav,you have to create this user, and that thingcan ping, and it's like you have to gothrough several uis, and it takes many,many, many seconds. and if any of thosefeatures break, it means that yourtest cannot run,
and you don't know if yourfeature is running or not. so what i do is i create allof the dependencies calling the rest api, and then itest my feature individually. and it's independent. so here i'm creating somethingcalled a test member. it will return an id. it will navigate to this id. i will say, ok, sendkeysupdated, save button, and so on.
here you can do somethinglike a delete scenario. imagine that i countthe number of members i had before and the numberof members i have after. so here i count the number ofmembers during a rest api call, and then i just do an assertionat the end of the delete that the number of membershas decreased by one. it's very, very convenient. you can run this multiple times. and let me showyou how it looks.
and at the end, it willsay there were n members and now there are n minus 1. before, 16. now, 15. do you have any questions? yeah. audience: [inaudible]. andres dominguez:the question is if i can show the configuration.
so when you runin webdriver, it's just a regular node application. it's here. you have to say add node. and the trick is this one. there's a protractorcommand line interface, and that's a binarythat you have to run. so you pass theprotractor configuration file, the cli working directory,and where is your node.
and that's theentire configuration. bigger? andres dominguez: wehave one here, and then-- audience: hey. so obvious question. any tool to record this stuff? andres dominguez:any tool to report? audience: like selenium id? andres dominguez: we haveour own tool internally,
so i really don't know ifthere are external tools. but maybe you can havea feature request, and julie willimplement it quickly. audience: all right. and then second simplequestion, have you tried this on theandroid driver? or have you-- andres dominguez:android driver? audience: have you thoughtabout trying it on mobile?
andres dominguez: sorry,i didn't hear you. audience: have youthought about trying this-- i mean, it shouldwork, but have you tried it on mobile? andres dominguez:i think it works, because i have seen someissues in the github website about android. i think it works. i think it alsoworks in phantomjs.
or maybe partially works, butjulie was working on that. audience: quick question. what about mouse events? one of the things thati have an issue with is to figure out how tosimulate a mouse-driven test. andres dominguez: if youwant to perform something with your mouse,it's kind of hidden. it's not very, very visible. if you go to docsand-- well, there's
a good example on their tests. it's something like actions,and then you perform actions. like this. so you do browser,actions-- you do some stuff. you can do hover, mouseenter, mouse out, and so on. and that's how yousimulate the mouse. another one here? audience: how oftendo you run tests? like what is the best?
on your workflow,how often is enough? and how often becomeslike an ocd [inaudible]? andres dominguez: wehave an automated build, so it runs-- i guess itdepends on your project. we have severalenvironments, and it flows from development toproduction through the days, so maybe every time you wantto switch from this environment to the next one. because when you haveend-to-end tests,
you want to make surethat everything works, so whenever it makes sense. whenever you change something,whenever the database changes, whenever you apply some newschema or the middle gear changes or some configuration,so whatever changes you have in your system,you should test. yeah? audience: two questions, onefollowing up on his question. is there a way to run as you go?
like somethinglike karma where it notices what fileyou change and runs these tests first sothat you can actually rely on it as a unit test? andres dominguez: somebodywrote a grant task to do that. but it's very, very slow. i guess it dependson your application. if your application isnot the fastest one, then maybe you don'twant to do that,
because it starts abrowser, and sometimes you perform somethingon the database, and it will getlike-- i don't know. you're going toget a lot of data if you create users, membersand members and members. i don't want to end upwith thousands of members. and the secondquestion that might be relating to that as well,i didn't get the last demo part that you showed, but isthere a way to not actually hit
the server and just mock tosee that the request goes in and out? because that would bemuch, much faster as well. andres dominguez: well, youcan write an integrat-- a unit test. audience: there'snothing like in-- andres dominguez: yes. audience: projector? andres dominguez:there's a feature where
you can inject a module inyour angular application, or you can replace a module. so imagine yourapplication sends an email or does something thatyou don't want to do. so you can replacethat functionality. and it's hidden somewhere here. so in this test, you caninject your own module and overwrite whatever youhave in your application. so if you want to dothat, you can do it.
i will not bias it unless youhave some email or something like that, but that's thepurpose of your integration test or of your end-to-endtest, that everything flows. we have one? audience: just a quick question. in the beginning of the slides,you said it waits for angular. so i didn't understand. what do you mean bywaits for angular? andres dominguez:ok, waits for angular
means if you're usinganother framework, you'll know when yourapplication is done. so in this case, ifyou go to network, there's a requestthat takes 2 seconds. so you have to synchronizefor this event. so imagine i'm testing thatclicking on one of these items will take me to the editpage, to the properties page. but it's loadingdata from the server, and until my response is thereit doesn't make sense to say,
ok, click on the link,because there's no link. so in the test, protractorknows that angular is still waiting for these httprequests to come back. and then it says, ok,i'm ready, then follow. so it waits for angular to beready either like a timeout or an http requestor some rendering. and when it's ready,then it fires. and there's no sleep,no synchronization, no wait for this to happen.
it's very transparent. it's like plainenglish, if you make it plain english of course. audience: hi. a great benefit of karma isthat i can run the karma server, and i can open a web browseron any external device, connect to this server,and all the tests will be run against this device. so if there is anythingsimilar in protractor?
because it's great tohave an opportunity to test the stopped browser,but what about mobile device, which amount is huge? andres dominguez: ok. so when you'reusing this, they're like extensions forselenium or webdriver. i think it's here--multiple browsers. and these ones are available. this is the only thingyou can test right now,
because the webdriverstand-alone server, it starts its own serverand has to have a way to communicate--it's own browser. it has to tell the browser,ok, do this, do that. so you need these extensions. so the question iscanary now supports what? so mobile is-- yeah. it's very, very important. i don't have a lot ofexperience with mobile,
but julie is going to beworking on that, adding support to more clients, more devices. so you can follow-- youcan raise an issue here. and then julie's goingto take care of it. she's really, really fast. so maybe there's something,but i don't know. she checks the issues liketwice a day, even on weekends. audience: how long does ittake the end-to-end test to run but you'vemade for doubleclick?
andres dominguez: itdepends on your environment. if you run it inmy local machine, we have a few-- acouple thousand tests. it's like a minutebecause we have thousands. and sometimes you have torequest thousands and give me more and give me more andthen you'll see this wait. but in production, itruns in 30 seconds. but it's because of the data. it depends on how much datayou have in your environment.
so if you have a few items,it's going to be like foom. it returns quickly. but sometimes you haveseveral resources, and it's a gigantic application. it's huge, the largestangular application. and it takes sometimes a coupleof seconds for a page to load. not to load, butto be done, done, done because itstarts showing stuff, but then there aresome dependencies
that haven't been loaded. but it's really quick. and we used to havejava integration tests, and they were horrible. these ones aresuper, super stable. audience: is protractorable to detect when angular isdone bootstrapping in an iframe on the page? there is a trick,and it's called--
there's a way toswitch to an iframe. ok, so maybe it'snot documented here. but it's on stack overflow. there's our protractor. something like this. and you pass theid of the iframe. audience: great. thank you. audience: i had afollow-up question about--
andres dominguez: yeah,i just did it last week. audience: abouttesting how a template is connected to a controller. do you recommend doing thatwith an end-to-end test or with some kind of unit test? andres dominguez:i guess it depends on what you want to test. sometimes you have severaldirectives and controllers, several controllers thatinteract with each other.
and the best way is to do itthrough end-to-end testing. if you can writegood unit tests, and there are many talksabout how to write good unit tests for directives andhow to connect to the view. maybe you should do it likethat, because it's faster. it runs in milliseconds. protractor is slow. you have to run a server. you have to run theselenium server.
it takes forevercompared to a karma test, which is just like milliseconds. audience: do you have arecommended best practice for ensuring that yourtests don't go out of sync with the codein terms of the binding expressions or thestrings you use to find the elementthat you need? because it's enough thatsomeone will change the template or something and yourtest will be wrong.
andres dominguez: it dependson how unstable your view is. so i would recommendyou to go by binding if you can do it or by modelor something like that. if you can't, maybe you cancheat and add a testing class. so you have a specificclass to the element you're interestedin, and you say ok. imagine i have abutton here that is very difficult to findthrough some locator. i can just say ok.
button id, say button. or you can add a class name--class, peter, save button. and then when you arepreparing your view to be deployed to production,maybe you want to minify it, and you can have sometool that will get rid of these extra classes. so if you have somethingstarting with peter blah, it will remove thatclass from the view, and it doesn't go to production.
but then you won't beable to test in production because that class isnot going to be there. so i don't know. you can add an idor whatever you think is not going to change. moderator: any more questions? no? all right, i thinkthat's all for right now. [audience applauding]