QA Automation with Protractor
Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in real browser,interacting with it as a user would ,it is built on top of WebDriverJS, which uses native events and browser-specific drivers to interact with your application as a user would,it also includes Automatic Waiting.
WHY DO WE NEED PROTRACTOR FRAMEWORK
NPM should be installed in your system before downloading protractor.
1- Use npm to install Protractor globally using npm install -g protractor, this will install protractor and webdriver-manager.
2- Check protractor version to make sure it is running using protractor –version .
3- Update the webdriver manager using webdriver-manager update .
4- Now start up a server with webdriver-manager start ,when it will get started you will get the message in command prompt last line Selenium Server is up and running below is the screenshot.
5- By default protractor supports jasmine and has in built framework, if you want to use Mocha or Chai you have to install explicitly.
SAMPLE ANGULAR JS APLLICATION TESTING USING PROTRACTOR
Protractor needs 2 files to run, a spec file and configuration file.
- Configuration file: This File helps protractor to where the test files are placed (specs.js) and to talk with Selenium server (Selenium Address). Chrome is the default browser for Protractor.
- Spec file: This File contains the logic and locators to interact with the application.
Step 1. We have to login https://angularjs.org and enter the text as “GURU99” in “Enter a name here” textbox.
Step 2. Entered the name “Protractor”
Step 3. Verify the displayed name and the name we have typed.
Create a spec.js File with any name e.g here we are creating with Angular.js and write the code mentioned below here we are using the inbuilt jasmine framework
Save the file as conf.js . This configuration tells Protractor where your test files (specs) are, and where to talk to your Selenium Server (seleniumAddress). It will use the defaults for all other configuration. Chrome is the default browser. Here in spec pass the name of the JS file in which we are writing code.
- Open Command Prompt.
2.Use webdriver-manager start to make sure selenium webdriver is up and running,and hit Enter.
- If webdriver is not up and running we cannot proceed further for execution.
- Open another command prompt
- Navigate to the project folder using cd in command prompt.
- Run command protractor conf.js .
- Here protractor will execute the conf.js file with the spec file given in it.
- Here we can see the results how many pass and how many fail.
Protractor exports a global function element which takes a locator and will return an Element Finder, for multiple elements use element.all .
- Find an element using css locator.
- Find an element by the given id using by.id(‘my-id’);
USING BROWSER OTHER THAN CHROME
In conf.js file under :
Inside capabilites change the browser name from chrome to firefox if you want to run the test other than chrome.
- Using pause browser.pause();
- Using browser.debugger();
- Type c in command prompt after browser stops to move forward step by step.
GENERATE REPORTS USING JASMINE REPORTER
- Open command prompt.
2. Execute the following command npm protractor-jasmine2-html-reporter.
- Copy the code below in the conf.js file.
- Again execute the conf.js
- Check the result folder click on the html file you will get the result like below.
MAKING YOUR PROTRACTOR TEST DATA DRIVEN
Often when creating end to end tests using Protractor, you’ll end up writing several tests which execute the same steps over and over again, and only differ in terms of the values you’re inputting or performing assertions on. Abstracting your test data from your test automation framework is always a good idea, but it also provides an excellent way of achieving this reusability when testing very similar scenarios.
How it’s done
1- Install Jasmine Data provider cd<project location> and run command npm install jasmine-data-provider.
2- Write your data in a separate JSDataProvi.js file
3- Write your spec.js file as
- Import test data: We have imported TestData file in the second line.
- using block: We are passing test data to protractor spec by using block. Using block will iterate test for 3 times as we have 3 inputs in JSDataProvi.js file.