{"id":15364,"date":"2016-12-07T12:15:39","date_gmt":"2016-12-07T10:15:39","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=15364"},"modified":"2016-12-06T17:33:35","modified_gmt":"2016-12-06T15:33:35","slug":"quick-start-end-end-testing-protractor","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/","title":{"rendered":"Quick Start: End-to-End Testing With Protractor"},"content":{"rendered":"<p>As AngularJS applications become more complex, manual testing becomes unreliable and repetitive. Unit Testing is a great start for testing the code, but eventually End-to-End testing is needed for better coverage.<\/p>\n<p>A great tool to use for this is Protractor, which is an end-to-end test framework for AngularJS applications. In this blog, we\u2019ll introduce the benefits of Protractor and give you the steps needed to get\u00a0started.<\/p>\n<h2>Introduction to Protractor<\/h2>\n<p><a href=\"http:\/\/www.protractortest.org\/\" target=\"_blank\">Protractor<\/a> runs tests against your application using a browser, as a user would, and interacts with the UI, similar to how you would test workflows in QA. It allows for better testing interaction between components than unit testing can provide, making sure everything gets tested the same way each time, and eliminating the repetitiveness that large applications require for testing.<\/p>\n<p>Based on the Node.js program, Protractor uses WebDriverJs and Selenium to control the browser and simulate user interaction. Jasmine is the default testing framework, but you could also use Mocha or a custom framework of your choice.<\/p>\n<p>A test file, or <code>spec<\/code>, includes a <code>describe<\/code> block, and has <code>it<\/code> blocks that contain the requirements that you want to test. <code>it<\/code> blocks are made of <code>commands<\/code> and <code>expectations<\/code>.<\/p>\n<p><code>Commands<\/code> tell Protractor to do something, such as go to a page, get an element, or click on a button. <code>Expectations<\/code> tell Protractor to assert something about the application\u2019s state, such as a value of a field, a count, or the current URL. If any Expectation within an <code>it<\/code> block fails, the runner marks the <code>it<\/code> block as <code>Failed<\/code> and continues on to the next block.<\/p>\n<h2>Setup for Protractor<\/h2>\n<p>Run <code>npm<\/code> on the command line to install Protractor globally:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor1.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15370\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor1.png\" alt=\"protractor1\" width=\"260\" height=\"58\" \/><\/a><\/p>\n<p>This will install the <code>protractor<\/code> command line tool, the <code>webdriver-manager<\/code> command line tool, and the Protractor API library. You can check the version with:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15371\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor2.png\" alt=\"protractor2\" width=\"250\" height=\"62\" \/><\/a><\/p>\n<p>To download the necessary binaries for <code>webdriver-manager<\/code> and make sure they are up to date, run:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor3.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15372\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor3.png\" alt=\"protractor3\" width=\"275\" height=\"52\" \/><\/a><\/p>\n<p>To start up an instance of a Selenium Server, run:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor4.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15373\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor4.png\" alt=\"protractor4\" width=\"278\" height=\"48\" \/><\/a><\/p>\n<p>This will start up a Selenium Server. Your Protractor test will send requests to this server to control the browser. You can see information about the status of the server at\u00a0<a href=\"http:\/\/localhost:4444\/wd\/hub\" target=\"_blank\">http:\/\/localhost:4444\/wd\/hub<\/a>.<\/p>\n<h2>Project File and Folder Structure<\/h2>\n<p>You should set up your end-to-end tests in a way that best fits the structure of your project. Some prefer a separate testing project, while others keep it with the code in a <code>test\\e2e\\<\/code> folder that matches your code structure, separate from your unit tests. This will make finding your tests and locating what you are testing easier.<\/p>\n<p>Here is an example of how you could set up your project structure:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor5.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15374\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor5.png\" alt=\"protractor5\" width=\"303\" height=\"433\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor5.png 303w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor5-210x300.png 210w\" sizes=\"(max-width: 303px) 100vw, 303px\" \/><\/a><\/p>\n<p>In this example I have a <code>test\\e2e\\<\/code> folder that contains my Protractor tests. The <code>protractor.config.js<\/code> file is in the test folder. All the <code>specs<\/code> (test files) are in the <code>e2e<\/code> folder, broken up and organized in folders where it makes sense. The <code>pages<\/code> folder will have my <code>page objects<\/code>.<\/p>\n<h3>Writing A Basic Test<\/h3>\n<p>To write a test, you will need a <code>spec<\/code> file and a <code>configuration<\/code> file.<\/p>\n<p>Here is an example of a spec for Keyhole\u2019s <a href=\"https:\/\/mockola.com\/\" target=\"_blank\">MockOla<\/a> application:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor6.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15375\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor6.png\" alt=\"protractor6\" width=\"624\" height=\"399\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor6.png 624w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor6-300x192.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/a><\/p>\n<p>This spec can be used to test the MockOla home page, to make sure it loads, and that the 5 default mocks are shown. The <code>describe<\/code> and <code>it<\/code> syntax are from <a href=\"https:\/\/jasmine.github.io\/\" target=\"_blank\">Jasmine<\/a>. The <code>beforeEach<\/code> function will cause whatever code is included in it to run before each <code>it<\/code> block. <code>browser<\/code> is a global created by Protractor and <code>browser.get<\/code> will navigate to the given page. <code>element.all<\/code> is used to find HTML elements on the page.<\/p>\n<p>The <code>by<\/code> object creates Locators, which tells Protractor how to find DOM elements. The most common are <code>by.css<\/code>, <code>by.id<\/code>, <code>by.model<\/code>, and <code>by.binding<\/code>. <code>by.repeater<\/code> is used above.<\/p>\n<p><a href=\"http:\/\/www.protractortest.org\/#\/locators\" target=\"_blank\">More about Locators<\/a><\/p>\n<p>Here is an example of a config file:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor7.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15376\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor7.png\" alt=\"protractor7\" width=\"735\" height=\"425\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor7.png 735w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor7-300x173.png 300w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/><\/a><\/p>\n<p>This config file tells Protractor to use Jasmine (<code>framework<\/code>), the url for selenium (<code>seleniumAddress<\/code>), where the test files are located (<code>specs<\/code>), and to use the Chrome browser (<code>capabilities<\/code>). It also has test <code>suites<\/code> defined, which allow you to group your tests together to run as needed. The last section, <code>onPrepare<\/code>, will run once Protractor is ready, but before the tests are executed.<\/p>\n<p>In my example, it tells Protractor to use <code>jasmine-spec-reporter<\/code>, giving you a more detailed display of the test results.<\/p>\n<p><a href=\"http:\/\/www.protractortest.org\/#\/api-overview\" target=\"_blank\">Working with Spec and Config Files<\/a><\/p>\n<h2>Running Tests<\/h2>\n<p>To run the tests on the command line, use:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor8.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15377\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor8.png\" alt=\"protractor8\" width=\"355\" height=\"47\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor8.png 355w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor8-300x40.png 300w\" sizes=\"(max-width: 355px) 100vw, 355px\" \/><\/a><\/p>\n<p>You can also specify the test suite with the suite option:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor9.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15378\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor9.png\" alt=\"protractor9\" width=\"474\" height=\"42\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor9.png 474w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor9-300x27.png 300w\" sizes=\"(max-width: 474px) 100vw, 474px\" \/><\/a><\/p>\n<p>Here is what the results will look like using <code>jasmine-spec-reporter<\/code>:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor91.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15379\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor91.png\" alt=\"protractor91\" width=\"691\" height=\"350\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor91.png 691w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor91-300x152.png 300w\" sizes=\"(max-width: 691px) 100vw, 691px\" \/><\/a><\/p>\n<p>While the tests are running, you will see the browser open, run through all the tests, and then close.<\/p>\n<p>The <code>jasmine-spec-reporter<\/code> is used above to give a more detailed output than the standard periods and failures seen below:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor92.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15380\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor92.png\" alt=\"protractor92\" width=\"651\" height=\"209\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor92.png 651w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor92-300x96.png 300w\" sizes=\"(max-width: 651px) 100vw, 651px\" \/><\/a><\/p>\n<h3>Page Objects<\/h3>\n<p>Page Objects are a little more advanced technique that can help you write cleaner tests by encapsulating information about the elements on your application page.<\/p>\n<p>In many cases if the UI changes, you just have to update the <code>page object<\/code> instead of the <code>spec<\/code>. It also helps reduce the number of places you will need to update when refactoring and makes the <code>spec<\/code> code much more sustainable and readable.<\/p>\n<p>Here\u2019s an example of a <code>page object<\/code> for an account registration:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor93.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15381\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor93.png\" alt=\"protractor93\" width=\"847\" height=\"536\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor93.png 847w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor93-300x190.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor93-768x486.png 768w\" sizes=\"(max-width: 847px) 100vw, 847px\" \/><\/a><\/p>\n<p>All the elements that are used in the test are assigned to <code>properties<\/code>, and some reusable <code>set<\/code> functions are created.<\/p>\n<p>And here is the <code>spec<\/code> file that goes with the account registration page object:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor94.png\"><img decoding=\"async\" class=\"aligncenter wp-image-15382\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor94.png\" alt=\"protractor94\" width=\"860\" height=\"652\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor94.png 943w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor94-300x227.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor94-768x582.png 768w\" sizes=\"(max-width: 860px) 100vw, 860px\" \/><\/a><\/p>\n<p>The <code>RegistrationPage<\/code> page object is brought in using require and a new <code>registrationPage<\/code> instance is created. Then you can use the <code>properties<\/code> (instead of <code>element(by.()) <\/code>) and set functions defined from the registration page object.<\/p>\n<p>This makes the JavaScript much more readable.<\/p>\n<p><a href=\"http:\/\/www.protractortest.org\/#\/page-objects\" target=\"_blank\">More on Page Objects<\/a><\/p>\n<p>Let\u2019s run our account registration tests and see that they pass:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor95.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15383\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor95.png\" alt=\"protractor95\" width=\"691\" height=\"433\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor95.png 691w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/Protractor95-300x188.png 300w\" sizes=\"(max-width: 691px) 100vw, 691px\" \/><\/a><\/p>\n<p>Success!<\/p>\n<h2>Final Thoughts<\/h2>\n<p>Thanks for following along with this blog, I hope you found it helpful in getting to know Protractor. Feel free to leave any questions or comments below. Also make sure to check out some more information available:<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"https:\/\/keyholesoftware.com\/2016\/12\/02\/quick-start-end-to-end-testing-with-protractor\/\">Quick Start: End-to-End Testing With Protractor<\/a> from our <a href=\"http:\/\/www.webcodegeeks.com\/join-us\/wcg\/\">WCG partner<\/a>\u00a0Todd Horn at the <a href=\"http:\/\/keyholesoftware.com\/\">Keyhole Software<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>As AngularJS applications become more complex, manual testing becomes unreliable and repetitive. Unit Testing is a great start for testing the code, but eventually End-to-End testing is needed for better coverage. A great tool to use for this is Protractor, which is an end-to-end test framework for AngularJS applications. In this blog, we\u2019ll introduce the &hellip;<\/p>\n","protected":false},"author":206,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[43],"class_list":["post-15364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js","tag-protractor"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Quick Start: End-to-End Testing With Protractor - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"As AngularJS applications become more complex, manual testing becomes unreliable and repetitive. Unit Testing is a great start for testing the code, but\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quick Start: End-to-End Testing With Protractor - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"As AngularJS applications become more complex, manual testing becomes unreliable and repetitive. Unit Testing is a great start for testing the code, but\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-07T10:15:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Todd Horn\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Todd Horn\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/\"},\"author\":{\"name\":\"Todd Horn\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/58e38466c43c667b7e16a425c0e24bdc\"},\"headline\":\"Quick Start: End-to-End Testing With Protractor\",\"datePublished\":\"2016-12-07T10:15:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/\"},\"wordCount\":964,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"keywords\":[\"Protractor\"],\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/\",\"name\":\"Quick Start: End-to-End Testing With Protractor - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2016-12-07T10:15:39+00:00\",\"description\":\"As AngularJS applications become more complex, manual testing becomes unreliable and repetitive. Unit Testing is a great start for testing the code, but\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Quick Start: End-to-End Testing With Protractor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/58e38466c43c667b7e16a425c0e24bdc\",\"name\":\"Todd Horn\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9be950bff23bc140cadfd24fa876bf2ad7430935ee01e27d92d136c3772f0400?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9be950bff23bc140cadfd24fa876bf2ad7430935ee01e27d92d136c3772f0400?s=96&d=mm&r=g\",\"caption\":\"Todd Horn\"},\"description\":\"Todd Horn is a Keyhole Software developer based in St. Louis, MO with experience in .Net, JavaScript, Java, and PHP. Todd has been involved with software projects in the telecom, manufacturing, insurance, and non-profit industries, including background in HR, Payroll, Benefits, and Insurance systems. When not at work, he enjoys spending time with his wife and kids, helping with boy scouts, hiking, and volunteering for the Ozark Trail Association.\",\"url\":\"https:\/\/www.webcodegeeks.com\/author\/todd-horn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Quick Start: End-to-End Testing With Protractor - Web Code Geeks - 2026","description":"As AngularJS applications become more complex, manual testing becomes unreliable and repetitive. Unit Testing is a great start for testing the code, but","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/","og_locale":"en_US","og_type":"article","og_title":"Quick Start: End-to-End Testing With Protractor - Web Code Geeks - 2026","og_description":"As AngularJS applications become more complex, manual testing becomes unreliable and repetitive. Unit Testing is a great start for testing the code, but","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-12-07T10:15:39+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Todd Horn","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Todd Horn","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/"},"author":{"name":"Todd Horn","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/58e38466c43c667b7e16a425c0e24bdc"},"headline":"Quick Start: End-to-End Testing With Protractor","datePublished":"2016-12-07T10:15:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/"},"wordCount":964,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","keywords":["Protractor"],"articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/","name":"Quick Start: End-to-End Testing With Protractor - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2016-12-07T10:15:39+00:00","description":"As AngularJS applications become more complex, manual testing becomes unreliable and repetitive. Unit Testing is a great start for testing the code, but","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/quick-start-end-end-testing-protractor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"Quick Start: End-to-End Testing With Protractor"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/58e38466c43c667b7e16a425c0e24bdc","name":"Todd Horn","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9be950bff23bc140cadfd24fa876bf2ad7430935ee01e27d92d136c3772f0400?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9be950bff23bc140cadfd24fa876bf2ad7430935ee01e27d92d136c3772f0400?s=96&d=mm&r=g","caption":"Todd Horn"},"description":"Todd Horn is a Keyhole Software developer based in St. Louis, MO with experience in .Net, JavaScript, Java, and PHP. Todd has been involved with software projects in the telecom, manufacturing, insurance, and non-profit industries, including background in HR, Payroll, Benefits, and Insurance systems. When not at work, he enjoys spending time with his wife and kids, helping with boy scouts, hiking, and volunteering for the Ozark Trail Association.","url":"https:\/\/www.webcodegeeks.com\/author\/todd-horn\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=15364"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15364\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=15364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=15364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=15364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}