Protractor : How to automate AngularJS application using protractor

In my last post I have discussed about protractor and how to setup Protractor environment to run protractor test script. Here I will show you how to write protractor test script and run it using WebStorm editor.

Sample application : Note that we use Super calculator as sample AngularJS application. URL :http://juliemr.github.io/protractor-demo/

Test Cases : Verify that the application can add two numbers.

1. Open the application.
2. Enter First number.
3. Select operator (+,-,*…)
4. Enter Second number.
5. Click on Go button
6. Verify the result.

Step 1 : Create a Protractor Test project

• Open Webstorm IDE. Note that WebStorm can be downloaded from JetBrain’s site. You can use any other IDE to develop protractor scripts that supports JavaScript.
• Welcome to WebStorm window is displayed and click on “Create New Project” link.

• Select the project type as “Empty Project” and path. In my case path is “C:\Development\ProtractorTest”.

• Click on Create button.

• Right click on Folder name “ProtratorTest” Folder and click on JavaScript File.

• New JavaScript File window is displayed and enter the file name “test” and click on OK button.

• Now project is ready to write test script. test.js is the file to write test.

 

Step 2 : Write test script using JavaScript

• Write the following Script to open the application in test.js file.

Here describe and it comes from Jasmine framework. We will discuss it on future.

Common syntax of describe is,

describe(feature name, function(){

………

…….});

Common syntax for it is,

it(test case title, function(){

………….

….});

In order to write a test, syntax will be,

describe(feature name, function(){

      it(test case title, function(){…..

       …….

                 });

});

browser.get(url) is a protractor command to browse an application using a url given as argument.

• Now write the following code to enter first number.

Here element() is used to find an element and by.model() is a new locator in Protractor. Protractor uses some special locator to find out angularJS element beside selenium webdriver. We will discuss more on this in a separate post.

sendKeys() is a function to enter value/string to text box.

• Now select an operator. In this case it will be addition (+).

• Now write the following code to enter second number.

• Click on Go button.

• Verify the result.

Note that we use expect(……).toEqual(…) to verify the result.

Common syntax,

expect(actual value).toEqual(expected value);

• Now script of test.js file looks like the following,

 

Step 3 : Run Protractor Test

• Add a new JavaScript file named “conf.js” at the same directory. Note that conf.js is the file name only known by protractor at run time.

• Open conf.js file and write the following code.

Here, framework is the framework name. We use jasmine framework here.

seleniumAddress is the selenium server address running on the machine.

In my case  'http://127.0.0.1:4444/wd/hub'
We may write  'http://localhost:4444/wd/hub' is place of ip address.

specs is the JavaScript file name where scripts are written using protractor. In my case it is test.js.

• Now open a terminal window by clicking on Terminal tab.

• Terminal window look like this,

• At First we have to start our selenium server. Write the following command and press enter key.

• Selenium sever starts.

• Now open another terminal window by clicking (+) button

 

• Write the following command and press enter key.

• Scripts starts running and it opens the application and execute the steps.
• It shows the results in terminal window.

Note that we can use command prompt in place of Terminal window to run protractor script. Same command will be used and in that case we need to change the directory where test.js and conf.js file is located.

In our future post we will discuss more on protractor.

Happy UI Testing with Protractor!!!

Selenium : How to retrieve text from a Textbox in Selenium WebDriver using C#

Sometimes we need to retrieved data in a form for edit and for this we search data by using a search keyword. For example, we need to edit employee personal information and in that case we need to search the Employee information using Employee ID. All the data are displayed in a text box and we verify that proper data is displayed in the textbox for this employee id. Selenium WebDriver uses different method to retrieve data from textbox for assertion.

Selenium WebDriver has GetAttribute() method to capture textbox data.   

Common syntax to use this command,

ElementName.GetAttribute(“value”);

Here “value” is the argument and it returns the value of the attribute of that element. 

For example in C#,

Lets do a short project on how we can implement in our test scenario. For example we have the following page where we have to verify the data displayed at FirstName and LastName field. 

Page link : http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/form-template-update/defaultcs.aspx

Step 1 : Open Visual Studio and create a new unit test project.

Step 2 : Add a reference for WebDriver from Nuget package manager. How to add a reference from Nuget package can be found in my another post.

Step 3 : Write the following code for opening page using Firefox Browser  TestMethod1().

Note that we need to add following namespaces for webdriver.

Step 4 : Write the code for getting First name and last name from textboxes.

Note that we use GetAttribute("value") method here that returns the text displayed on that element and this element is a textbox.

Step 5 : Write the code for verification. 

Step 6 :  Now close the driver. The TestMethod1() will be,

Step 7 : Now build the application by going to Build > Build Solution and go to test explorer and run the application by right clicking on the test name and click on Run Selected Tests.

 

Test will run and it capture the value from textbox and verify expected value.

Happy scripting with Selenium WebDriver…!!!

Selenium : How to download file in selenium WebDriver using C#

In many of the test scenarios, we need to download file to test that file download features are working or not. At the time of writing automated script on file download we have to interact with the web element as well as browser file download dialog. Our Selenium WebDriver API can only works on clicking the button to display the File download dialog but cannot interact with the file dialog. In this situation we need to use the power of C#.

.Net has a library to handle file upload dialog. It has a SendKeys class that has a method SendWait(string keys). It sends the given key on the active application and waits for the message to be processed. It does not return any value. 

Common syntax to use this command,

SendKeys.SendWait(string keys);

Here keys is the string of keystrokes.

For example in C#,

SendKeys.SendWait() takes a string like “{Enter}” that it executes the enter key from keyboard. When File download dialog is displayed, OK button is activated by default. At this time if we press enter key from keyboard it executes the OK command.

Note that we need to add System.Windows.Forms namespace to get this method.

Lets do a short project on how we can implement in our test scenario. For example we have the following page where we have to download a file by clicking download link.

Page link : http://sample-videos.com/

Step 1 : Open Visual Studio and create a new project with Console Application type.

Step 2 : Add a reference for Webdriver from Nuget package manager. How to add a reference from Nuget package can be found in my another post.

Step 3 : Write the following code for opening page using Firefox Browser under static void Main(string[] args) method.

Note that we need to add following namespaces for webdriver.

Step 4 : Write the code for clicking on Download link of the page to open file download dialog.

Step 5 : Write the code to handle file upload dialog to click OK button.

Note that we need to add the following namespace SendKeys.SendWait().

We will not get this namespace if we do not add “System.Windows.Forms” reference from Reference manager window. We get this reference by right clicking on Reference and click on Add Reference option.

Reference section will be,

Note : Sometimes we need to add Thread.Sleep(30) method before SendKeys.SendWait() method to activate the OK button. We have to add System.Threading namespace to implement this statement.

Step 6 :  Now close the driver. Main method will be,

Step 7 : Run the application by clicking on Start button. It opens the browser and download file using SendKeys.SendWait() methods.

Happy scripting with Selenium  Webdriver using the power of C#.