AngularJS Protractor Tutorial 07 (Using Page Object Pattern) | QAShahin

[@pramod1000cc]

Fantastic.. Well explained! Waiting much more from you. Thanks

[@miguellimas7240]

I have been working as manual QA Software Engineer for about 12 years but now I am being requested to learn how to automate angular webpages with protractor jasmine. I was looking for books on amazon but could not find one which really help me out or better say could not find anyone. When I was surfing the web I found some tutorials but since I was a beginning level I started struggling. it was then when I found this marvelous video tutorial. all I can say it is thanks for this vide tutorial.

[@nikhilmylarapu7349]

this is not a long video, this is an excellent explanation video. thank you somuch G BoxT.

[@therhythmatic]

This was a great kick start on Protractor. I enjoyed this entire series!

[@LarsRyeJeppesen]

This is great. Thank you so much for this series on Protractor testing. It has now gotten me started using automatic testing when I develop AngularJS apps.... great fun!!! Thanks again!

[@jitendrajangid9358]

Everything precisely elaborated. Thanks for wonderful tutorial!

[@nhantrantrong8669]

Thank so much for AngularJS Protractor videos tutorial. They are really useful and informative :D

[@IndefinableNebulaCrystals]

Thank you a lot, this is already 5th video i am trying to understand page object usefulness , and thanks to you it is clear now!) Thanks.

[@arnabpatra143]

Great videos ....kudos to the contributor.Keep doing good works. Will wait for few more videos for reporting and spreadsheet integration in Protractor .

[@neerajaggarwal919]

Really informative. Appreciate your knowledge and way of explaining. It was crystal clear to me in the very first instance

[@QAShahin]

Hey Neeraj, many thanks for taking the time to watch my video and comment, it means a lot to me. I really hope that you find my other videos useful and helpful. Once again, thanks.

[@pingpancheng4573]

awesome, saved me a lot of time learning protractor, thanks !!

[@kasimusunuri7447]

short and sweet but still very effective. Do more of this :-)

[@QAShahin]

I plan on doing just this, many thanks for your comment.

[@purushothamgowda6449]

Wonderfully explained POM, very informative video, learnt many things. Well done sir, appreciate your efforts.

[@QAShahin]

Thanks for watching and commenting.

[@michaelcarr8123]

You are an excellent teacher. Thank you so very much!

[@QAShahin]

Thank you Michael for watching and your kind words, it means a lot to me. I really hope that you take sometime positive away from my video/s. Thanks again.

[@nemanja92013]

Great guide!!! Helped me alot. It would be great if you make some more videos about protractor. Cheers

[@ankurtyagi4770]

great stuff.. thanks a lot

[@QAShahin]

Thanks Ankur.

[@sneheshpillai6940]

Thanks for this awesome tutorial.

[@pradeepsundaram]

Nice video for a beginner....

[@anthonyng1336]

Thanks for the tutorials, They have been very informative and I've picked up a lot of useful tips. Hopefully you continue to keep making more protractor videos in the future and i'll check them out. Keep it up :)

[@sureshaddala9870]

Really Very nice video, clear explanation, Thanks a lot :).. Also upload data driven testing video....

[@QAShahin]

Hi Suresh, many thanks for your comment. I will most certainly consider uploading a video on framework somewhere in the future. Apologies for my late reply.

[@kamilhighfive9976]

Great tutorials, thanks a lot!

[@QAShahin]

Thanks Kamil.

[@fuadosman4888]

Solid explanation!

[@sunnysachdeva7373]

Hi G BoxT, Its one of the best video to learn about Protractor. Thanks so much for covering most aspects of Protractor. Just a request, could you please cover one more video on how to use different reporters with Protractor and Jasmine2. Thanks Sunny

[@dannyc6730]

Thanks man. Great Video

[@harishdaggupati8292]

great tutorials

[@rock120383]

Hey Shahin, Thanks a ton, your videos are very very descriptive and easy to follow. I would like to understand if you are working on data driven testing in protractor will be very valuable if you could add a video on that well and also discuss synchronization techniques in protractor available . which will be click complete course in it self. Thanks again.

[@MrGpkumar]

Very Thanks ,Great stuff really helped me a lot,please let me know any upcoming videos like parametrization and generating reports

[@damonguhaw]

I hope you can add another video how to setup Protractor in Jenkins or Bamboo

[@ayebo15]

I agree. That would be so helpfull.

[@confused6526]

Hi QAShahin, Great videos and thanks for sharing your knowledge with the world. Good job! I have a few recommendations though, please do not take them as criticism but my own view of your models: 1 - Page Object: As the name suggests, a page should contains only the objects (elements) on the page. There should not be any functions on the page. It simply the page does not act on its own. The actions (functions) should come from a user class. By following this paradigm, you can avoid re-write the same functions which behave the same on any page. As you can see in your video, they have to cut and copy the same click() function from page to page. There should one and only one click() function which can be call from the user, not from the page. 2 - That leads to a concept - you already know - called DRY which is Don't Repeat Yourself. This will make your code base much, much more compact, easy to maintain to can be re-used. Now ... I wonder1 - How to incorporate this Protractor framework with Cucumber? 2 - How to generate the test run reports? 3 - How to run individual test case? 4 - Is there a cucumber-like runner class that I can implement? etc...Thanks QASahin! J.N

[@MahanteshHallur]

Hi G Box T, Thanks for all your tutorial videos on Protractor tool, I need some more info on how to write Proctractor scripts in Eclipse (How to Configure it in Eclipse).

[@nikhilmylarapu7349]

+Mahantesh Hallur In Eclipse: goto help-->Marketplace, in find field type tern.javainstall Tern Eclipse IDE and accept the licence. Now create a project in eclipse and right click on project, mouse hover to configure and you will be able to see convert to tern project click on it, properties window pop-up, goto Modules and you will be able to see Protractor, select the check box and click on the Protractor and also check the dependencies as well. Now you are ready to write scripts using protractor.

[@arnabpatra143]

+Nikhil Mylarapu What are the dependencies.Can you please elaborate little detail?

[@MahanteshHallur]

Thank You Nikhil Mylarapu

[@rachelxue3852]

It is a nice Tutorial and gives me lots of idea about my work. It would be better if you have a github to follow and check the code.

[@pover777]

Great and clear explanation, you can record a video where protector works with a cucumber framework, I guess it will be useful, because I didn't find a lot of info about all details.

[@QAShahin]

Hi Taras, that sounds like a good idea. I will consider it as a future video series. Apologies for my late response.

[@mccataldo]

Great tutorial. A couple of questions: First, why put module.exports = new animal_page(); at the bottom? Is there any disadvantage to leaving it out and doing module.exports = function() { ... }; ? Secondly, why is it important to instantiate animal_page when animal_page is a function and not an object?

[@riteshmehta2292]

It is an excellent video. Thank you very much. Could you please make a video for generating HTML report with screen shots.

[@AnandRajanAnandRajan]

Hi, Really your videos are very helpful and thanQ so much for such a wonderful classes.... could you please post videos with examples of non-angular application that would be great!! :) Thanks, Anand Lenin

[@walmarsydorenko3640]

Thank you for the video. Would be very grateful if you make a video of unit testing with a protractor and jasmine. How to apply

[@atulnigam2]

Great explanation. Thanks for posting these videos. However i wanted to know if their is a why to trigger protractor tests from Finesse ?

[@programmertony]

Thank you, great tutorial. I watch all the videos. I was thinking you could improve it by not repeating things over and over. There were parts where you spent 3-4 minutes talking about something that you had just covered. Maybe some people like that, but I found it a little annoying. However, I loved the tutorial overall.

[@QAShahin]

Thanks Tony. I have tried to reduce the duplication in my recent videos, hopefully this is something that should be better. Many thanks for commenting.

[@miguellimas7240]

hello Shahin would it be possible to also have some tutorials on how create reports with results?Thanks again for your great work

[@sohelsaiyed7010]

Great Work... very informative videos... I would like to request you that can you please show how to run protractor test on sauce Lab on different platforms.. (i.e, windows, Linux, mac)

[@minzhu5521]

***** Definitely sauce lab, will be a great part 2. Love your tutorial!

[@sohelsaiyed7010]

***** , if you are planning to do further videos then can you also please some tutorial video about mobile app testing using protractor..

[@riteshmehta2545]

Please add a video to integrate the protractor tests with Jenkins and bamboo......

[@pianowhizz]

So for a single-page webapp (i.e. most 21st century apps) - do we just call them 'objects' instead of page objects?

[@banashriborah6772]

Can you please add video on Cucmber.js integration with Protractor,if not added yet

[@ronbaraskar]

Please create a video for debugging Protractor tests.

[@janardhanreddy5233]

Hey shahin!! Nice video and great explanation as well !!!!! could you please upload the code base for Page Object model with certain folder structure!!!! really it helps !!!!

[@QAShahin]

Hey Janardhan, many thanks for watching my video and commenting. Sure thing, I have added this as a video idea it may start looking into this at some point. This said, I do have a Java video on Page Factory pattern (kzbin.info/www/bejne/q2m7eWdsqpaEd9k) if you wish to check it out. Many thanks.

[@priyankabhowmick2405]

I tried running my code by using the same page object model concept, as you have defined, but I am continuously getting this error: Reference Error: Animal is not defined. Unable to figure out why is it so, even though I have implemented in the same way as you have mentioned in your video?

[@waheedahmed6524]

Quick question I have see two types of declaration element(by.model('"person.name")).sendKeys("1sttest"); and in other video element(by.model('person.name')).sendKeys("1st testl"); in one you are using "" and in other you are single quote ' ' whats difference and both works?

[@QAShahin]

As replied in Part 3 of this video series: Hey Waheed, strictly speaking since this is JavaScript there really is no difference when using ' or ", they both mean the same thing. However when using together then this can create an issue. When using together you must use them embedded in one another e.g. "hello 'world'". I hope this answers your question.

[@SelfLove0821]

hi, can u add more videos for protractor test, like excel , jenkins, suite, screenshot .

[@hothot611]

how did you get the protractor hints in the notepad++ or brackets?

[@reddynaveen341]

Hi,The page automation execution is very quick i want to execute the page slowly or it should wait at the time of ending the execution can you say that how we can do

[@pratik4373]

How many videos are there for protecter tutorial??

[@bharatbhushanparashar5832]

Hi G BoxT, It would be a great help if any material of protractor with cucumber framework.

[@rustu1666]

Can we test an AngularJS site using Java and Cucumber?

[@neerajaggarwal919]

No, I have not been successful in running tests on Edge or IE. I am using Protractor with Jasmine2. In order to run tests on Edge (20.10240). In conf.js, i have: seleniumArgs: ['-Dwebdriver.edge.driver=Drivers/MicrosoftWebDriver.exe'] Capabilities: { browserName: 'Edge'' }, seleniumAddress: '127.0.0.1:4444/wd/hub' MSWebDriver.exe is of the same version as of WIN (i.e. 10240). I have explicitly started Selenium server using command webdriver-manager start.

[@QAShahin]

I see, what output do you get when you run with the above configuration. Sadly I am yet to run Protractor using Edge or IE. Also on a side note, probably not the best time to point this out but Protractor and WebDriver in general have always had historical issue with IE. For stability you may want to consider moving to either Chrome or Fire Fox if given the option.

[@shinnysukhija2525]

Hi G Box T , Could you please do a tutorial on how to include external test data file in protractor.

[@QAShahin]

Hi Shinny, sure thing, I will certainly consider this for my future videos. Many thanks for commenting and for checking out my video.

[@neerajaggarwal919]

I am trying hard to run Protractor test cases in Edge and IE but unable to. Do you have any videos and/or documentation related to that?

[@QAShahin]

Hey Neeraj, thanks for your comment and for watching. At the moment I don't think I have a video on these particular browsers but in theory it should not be to different from the code we have in this video. The only thing we would need to change is the browser build configuration. I can look into this and get back to you if you like. Have you had any luck?

[@somanianands]

Hey Shahin, Thanks for great tutorial. One question: When I am navigating from one page to other page after clicking on button and verifying some text on 2nd page, my tests fails. "From asynchronous test: Error" and showing "No element found using locator" message but if I add some sleep it's works fine... Any idea How to solve this. Really appreciated... Looks forward for ASAP response.

[@QAShahin]

Hey Anand, this is most likely a symptom of Protractor. Are you trying to write tests against a website which is not built in AngularJS?

[@nicholasaurus]

It would be more clear to say that these are not page objects, but rather groups of code relating to pages.

[@reddynaveen341]

I need to run these tests in all browsers at a time like chrome,firefox,opera,IE can you say how it possible

[@ayebo15]

For parallel testing: Edit capabilities section of conf.js OR use selenium-grid

[@seenubujji]

i have a query. protractor is not finding element because of the page loading some what slow, if i put the browser.pause() it is working. can we manage without browser.pause(). Kindly help me out.

[@sohelsaiyed7010]

you can use browser.wait() e.g: return browser.driver.wait(function () { return (locator).isPresent().then(function (displayed) { return displayed == true; }) }); so here you dont need to wait extra time, the time when element is displayed it will return.

[@seenubujji]

Sohel Saiyed Hi sohel, it's no workin. kindly check the below code. return browser.driver.wait(function () { return element(by.css('img[alt="Sign in with Google"]')).isPresent().then(function (displayed) { return displayed == true; }) });

[@viveksmartayush11]

I am facing challenges while implementing cucumber on protractor... if you can guide

[@bhupeepant]

Cucumber not come with Protactor by default anymore. but if you want to use it you need to add "protractor-cucumber-framework": "^0.6.0" in your Package.json and in your config file add custom framework like framework: 'custom', frameworkPath: require.resolve('protractor-cucumber-framework'), specs: [ '../Features/*.feature' ],

[@QAShahin]

Thanks Bhupesh for helping out Vivek.

[@abhisheksharma1738]

Hello, When I am running the code i am getting the error "homepage.enterfieldValue" is not a function. why is that so ???

[@ayebo15]

Hi Mr. Sharma. Me too. Have you found a solution yet?

[@viveksmartayush11]

i wrote the same code but m getting a syntaxError: unexpected token ILLEGAL.. kindly suggest

[@sureshaddala9870]

hi Vivek, re write the code again it will work... let me know still ur facing the same issue i will help u on this...

[@QAShahin]

Thanks Suresh for helping out at the time :D

[@manasranjan3854]

very nice video.How to ignore pop ups that comes on www.thetestroom.com/jswebapp/index.html while running automation test ,in the log i see Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.✗ Please suggest

[@Chatakisheetal]

not able to select value from drop down by using this code.

[@QAShahin]

Hey Sheetal, thanks for watching and commenting. Is the drop down box using the select tag in HTML. Assuming that it is and your code is still not working then there is a long winded alternative. You can write some code to first click on the drop down which would make values visible on the page after which point you can try to find the value by element and then proceed to click on it. Let me know how you get on. Thanks.

[@Chatakisheetal]

Sorry for late response, I was bit busy. I wrote code to first click on drop down and select the value. But still not able to click and select the element.

[@QAShahin]

Hey Sheetal, sorry to hear that your still having issues. Did you manage to try my approach above?

[@kavithakrishna1111]

Hi, I have a doubt; I am trying to select a value from dropdown (www.way2automation.com/angularjs-protractor/banking/#/account) and I want to select 1005; so, similar to your code for select drop down i tried below, this.selectAccount = function (index) { element(by.id("accountSelect")).$('[value="'+index+'"]').click() } but it throws error saying, No element found using locator: By(css selector, [value="2"]); if i do gettex and print, i can see all the values of accounttype; can you let me know why this is not working??

[@kavithakrishna1111]

Thanks shanin! i got it!...i made the mistake of passing index eventhough it doesnt have index; i changed as value and it started working!

[@QAShahin]

That is awesome Kavitha, really happy to see you resolve the issue. It's a great moment when things start to work :D

[@kavithakrishna1111]

Very true..your video helped me a lot to get it going.. thankyou

[@QAShahin]

No problem at all :D

[@ericvillamor1448]

its been 5 yrs now, can you please provide a new test site or make the test site available again? JavaScript Test Site - www.thetestroom.com/jswebapp

[@QAShahin]

Hi Eric, I know that it's been a horribly long time for my to reply (I was dormant and away for), but the site should be up now. I hope that it is still of help. Thanks for watching and commenting.