Testing Angular Apps 
END-to-END

Pedro Meza
pedromeza72@gmail.com

What is Protractor?

  • AngularJS E2E Testing Framework
  • Introduced during AngularJS 1.2
  • Built on Selenium's WebDriver API
  • Extension for all sorts of browsers
  • Built on top of Jasmine framework
  • The test files use Jasmine framework but can use mocha instead.

E2E Tests

Test to see if page loads properly
Test for specific browser
Integration tests

When do you do YOUR TESTING?

  • Never
  • After the project is done
  • After large amounts of code
  • Before I start programming
  • At the same time I write code

Install PROTRACTOR

> npm install -g generator-protractor
> yo protractor 
> npm install grunt-protractor-runner --save-dev

Once the plugin is installed lets load it by adding the following line in our Gruntfile
 grunt.loadNpmTasks('grunt-protractor-runner');

ADD CONFIG TO GRUNT

    protractor: 
        test: true;




        options: {
              configFile: "protractor.conf.js",
              keepAlive: true, // If false,grunt stops when the test fails.
              noColor: false, // If true, not use colors in output.
              args: {
                  // Arguments passed to the command
              }
          },
        chrome: {
            options: {
                  args: {
                      browser: "chrome" // phantomJS, Safari, etc
                  }
              }
        }
    }

Run SELENIUM

  ./node_modules/protractor/bin/webdriver-manager start
or add Selenium to protractor.config
 ./node_modules/protractor/bin/webdriver-manager update



chromeDriver: './node_modules/protractor/selenium/chromedriver',
                                  


MOcking






  • 
Test asynchronous code, syncronously
    

    • 

  • 
Mock stuff like an animation, AJAX request or a timeout, etc...)
    

    • 

  • 
capture what's going on (using mocks) and work around it. 
    





speeds up your tests a lot and AngularJS uses tricks like these in their core code to reduce about one trillion CPU cycles each time the testing suite is run ($httpBackend for example is used to mock HTTP responses for routes, templates and AJAX calls).




 $httpBackend 


Finding Elements


    

  • 
by class name
    

    • 

  • 
by css
    

    • 

  • 
by id
    

    • 

  • 
by linkText
    

    • 

  • 
by partialLinktext
    

    • 

  • 
by name
    

    • 

  • 
by xpath
    

    • 

  • 
by binding
    

    • 

  • 
by input
    

    • 

  • by repeater
    • 

  • by model
    • 

Webelement methods


    

  • 
clear()
    

    • 

  • 
click()
    

    • 

  • 
getAttribute(name)
    

    • 

  • 
getCSSValue(propertyName)
    

    • 

  • 
getLocation()
    

    • 

  • 
getSize()
    

    • 

  • 
getTagName()
    

    • 

  • getText()
    • 

  • isDisplayed()
    • 

  • isEnabled()
    • 

  • isSelected()
    • 

  • sendKeys(keysToSend)
    • 

DEBUGGING


Code can stopped 


browser.debug() 



ADVANCED TOPICS


Asynchronous Testing




    

  • Use Selenium Flow Manager
    • 

  • Chain actions and calls by then
    • 

  • Use Timeouts and Mock Services
    • 








Setting up CI Testing Env




    

  • TravisCI
    • 

  • JenkinsCI
    • 

  • Sauce Labs
    • 









Resources





				

				

					
				

			

		

	


	

		

		

			
angularJS_protractor

			
By Pedro Meza

		

	


	

		

		

			

			

		

	








	

		

			

					

						Made with Slides.com
					

				

					
					
				

			


			

				
				
			

		


		

			
		


		


		

			

				
angularJS_protractor

				
    
					
  • 
						
						
					
    • 
					
  • 
						
						
					
    • 
					
  • 
						
						1,355
					
    •