LambdaTest Community

Find answers, support, and inspiration from other users

Questions
LambdaTest Community
Answered

How can I setup automation environment for testing with Protractor and Selenium in Windows?

Can anyone please provide me a tutorial on how can I setup automation environment for testing with Protractor and Selenium in Windows.

Up Vote Down Vote 0 Votes
Posted one month ago
Edited one month ago

Answers


Protractor is an end-to-end test framework for AngularJS applications. Protractor is a Node.js program that supports the Jasmine and Mocha test frameworks. Selenium is a browser automation framework. Selenium includes the Selenium Server, the WebDriver APIs, and the WebDriver browser drivers.

Here are the prerequisite required for performing cross browser automation testing with Protractor and Selenium on Windows:

  • Node.js
  • Install protractor using npm
  • Update webdriver manager and start up a server
  • Visual Studio Code

Setting Up Automation Environment For Testing With Protractor And Selenium In Windows

This section has detailed steps explaining how to setup environment for performing end to end cross browser automation testing with Protractor and Selenium through Windows.

Step 1: Installation of Node.js

You need to install npm for Node.js.

What is npm?

npm is a free to use, package manager for javascript development which helps you to download all public software packages

What is package manager

A package in node.js contains group of files that you need for a module. Module is nothing it’s javascript libraries that can be included in your project.

To install Node.js, click here.

Once you are done downloading the installer, run it as administrator.

Click on ‘Next’ button in Node.js setup window to proceed further.

Click on checkbox for accepting license agreement and click on Next button.

Keep default windows location or feel free to change the location and click next.

Thereafter, click on Next and Install button. Wait for a couple minutes for the installation to complete.

You would have seen the following screen after installation completed.

To verify npm gets installed in your machine. Please supply the following command:

npm –version

Step 2: Installation of Protractor using npm

To download a package, open a command prompt and supply the following command

  • npm install –g protractor

install command is for download the package

-g stands for global which means any command to operate in global mode.

The below snapshot indicates that protractor is installed successfully.

To verify installed protractor version, supply the following command

  • protractor –version

Step 3: Update WebDriver Manager and Start Up A Server

To update webdriver manager, supply the following commands

  • webdriver-manager update

Once supply the above commands, it would download all necessary dependencies.

WebDriver manager is a helper tool to download necessary binaries. It will help to start and stop selenium server.

To start up with selenium server,

webdriver-manager start

To verify selenium server is running in browser, please use the following url

http://localhost:4444/wd/hub

Protractor test will send request to this server and control a local browser where you can see information about the status of the server. So, you could later go ahead and run your JS automation script with Protractor and Selenium.

Step 4: Installation of Visual Studio Code

What is Visual Studio Code?

Developed by Microsoft, Visual Studio code is a source code editor for Windows, Mac and Linux operating systems. It is a lot similar to other programming editor like Eclipse or Intellij. This tool was developed by Microsoft for Windows, Linux and Mac OS. It supports number of programming languages, to know more about Visual Studio code please visit here.

Double click on Visual Studio installer and click “Next” button.

Click on “I accept the agreement” in Setup – Visual Studio Code window

Keep default installation location (or) feel free to change different path in your computer and click “Next’ button.

Continue to click “Next” and check Desktop Shortcut if you want, finish the installation.

Once installation is complete, the following window would appear.

Click “Finish” button, finally Visual Studio Code Editors open up.

Click on the language which you want to install, I would suggest you to install JavaScript and TypeScript for executing automation test cases using Protractor and Selenium. Once clicked, it prompts you to select “ok” button, it would take few seconds to install the selected languages.

Writing Sample Code for Automation Testing With Protractor and Selenium

Now, we will have a look at a sample Javascript code for automation testing with Protractor and Selenium, and execute the test in local instance meaning execute the test that run on your browser installed in your machine.

To run protractor test for end to end automation, you must need two files:

  • Specs
  • Config

Specs: Specs is actual test suites that have more than on test cases designed in Javascript using Jasmine framework.

What is Jasmine Framework?

Jasmine is a BDD(Behaviour Driven Deployment) testing framework for Javascript. This framework helps you to write clean and better readability of code.

Executing Single Instance For Automation Testing With Protractor and Selenium WebDriver(Local)

Here is the simple example config file and how to write basic code in Protractor using Jasmine Framework.


Config.js:

exports.config = {

seleniumAddress: 'http://localhost:4444/wd/hub',

specs: ['lambdatest_spec.js'],

multiCapabilities: [{

'browserName': 'chrome',

},

{

'browserName': 'firefox'

}]

}

In the above snapshot shows the syntax of how to define config file to execute browser automation with Protractor and Selenium.

  • seleniumAddress: Protractor make use to Selenium Grid to run your test in specified browser.
  • specs: specs indicates test suite that you can mention in one or more spec files to run multiple tests.
  • Capabilities: This is the place where you can capability setting for your test configuration for eg., browser version, platform etc., in case no capabilities is provided then by default, it takes chrome browser in your machine.

describe('To verify Angular and non Angular application test', () => {

it('To verify page title of Lambdattest', () => {

browser.get("Free Cross Browser Testing Tool on Cloud | Selenium Automation Testing");

element(by.css('p.home-btn > a.home-cta')).click();

expect(browser.getTitle()).toEqual('Signup - LambdaTest App | Free Cross Browser Testing Tool');

});

});

Here is the clear explanation of what is the above code indicating.

describe –> describe is the keyword from Jasmine to write syntax for test suites. This is definition of collection of test cases in your script file.

it –> is the keyword for test cases to meet specific condition. There can be more than one “it” added under describe in Jasmine framework.

In the above code, we launch the browser, navigate to sign up page, see the title gets matched and pass the results.

To run your test:

In Visual Studio Code: Go to View Menu-> Click “Terminal” and supply the following command

Syntax: To run your test suites protractor followed by config file name.

Note: Before run your test, please make to run selenium Grid by supply the following commands:

  • webdriver-manager start

After executing the above test, observed the following failures which is expected

The above screenshot indicates the website https://lambdatest.com is not developed using AngularJS component. This is best real time examples to realize how Protractor works while launching browser. As mentioned in “Advantages” topic in above, the Protractor basically tries to connect with Angular JS framework while launching application. The moment Protractor identified and realized it’s not an AngularJS component, it recommended us to turn off waiting for Angular.

To Address this problem: we have a method called “browser.waitForAngularEnabled(false);”

Now, the method is added in the script and as you can see in the below screenshot, Protractor now supports with non-angular js application.

describe('To verify Angular and non Angular application test', () => {

it('To verify page title of Lambdatest', () => {

browser.waitForAngularEnabled(false);

browser.get("Free Cross Browser Testing Tool on Cloud | Selenium Automation Testing");

element(by.css('p.home-btn > a.home-cta')).click();

expect(browser.getTitle()).toEqual('Signup - LambdaTest App | Free Cross Browser Testing Tool');

});

});

After executing the test, the test is passed successfully.

Source: Automated Cross Browser Testing With Protractor & Selenium