Protractor Configuration with VSCode

On previous post we have configured Eclipse with Protractor but we could not configure with latest version of node.js.

To overcome this issue here we will learn to configure VSCode

Step1:

Download node.js from here.

Now install node.js after clicking on few next button.

We can verify the installation of the Node.Js using the following commands.

• node -v or we can use node --version 
• npm -v or we can use npm –version

Step 2:

Now we need to install protractor on our machine using the following command     

npm install -g protractor or npm -g protractor@version

After installation we can find Protractor directory under this location

Now we need to type the following command to download drivers to run our script on firefox or chrome

webdriver-manager update

After executing this command drivers should be downloaded under the following path.

Step3:

Download VSCode from here.

Install it after few click on next button.

Step 4:
Install the following plugins for protractor.

Step 5:

Now we need to import the workspace in VSCode. To open the workspace we can follow any one step from below

• Create WorkSpace Folder and browse it from VS code.
• Create WorkSpace Folder and drag and drop to Editor.
• Navigate to VScode WorkSpace from cmd and type code

Step6:

Copy this following 2 files from the below location and keep it under newly created project directory in VSCode.

We will discuss it later in details of these 2 files for now we can say cong.js is require for protractor configuration and example_spec.js is for testcases.

Copy the protractor modules to VSCode project folder structure.

Step 7:

Click on debug option from side bar and from top menu bar option select the option start without debugging.

Now the default launch.json file will be created and we will modify it as mentioned below

{

    // Use IntelliSense to learn about possible attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit: https://go.microsoft.com/fwlink/?link...

    "version": "0.2.0",

    "configurations": [

        {

            "name": "ng e2e",

            "type": "node",

            "request": "launch",

            "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",

            "protocol": "inspector",

            "args": ["${workspaceFolder}/e2eTest/config/conf.js"]

          }

    ]

}

Protractor Configuration With Eclipse

We can configure Protractor with Eclipse as mentioned the below steps:

Step1:

Download Node.js 7.7.3 from here. We need to download the older version of node because eclipse plugins are not working properly with new version of node.

Now install node.js after clicking on few next button.

We can verify the installation of the node.js using the following commands.

• node -v or we can use node --version
• npm -v or we can use npm –version

Step2:

Now we need to install protractor on our machine using the following command

• npm install -g protractor or npm -g protractor@version

After installation we can find Protractor directory under this location

Now we need to type the following command to download drivers to run our script on firefox or chrome

• webdriver-manager update

Download Eclipse Oxygen from here. We need to download the older version of Eclipse because required plugins for Protractor are not working properly on new version of Eclipse.

We can download Eclipse IDE for Java EE Developers or Eclipse IDE for JavaScript and Web Developers.

Step3:

Extract it and click on eclipse.exe to launch the IDE. 

NOTE : Sometimes it is showing some error for long path on extraction of zip file.

we can skip it or we can modify the group policies 

or tweak the registry as below

Step4:

We need to install the following plugin for Protractor

After launching the eclipse Go to Help -> Install New Software…

Now type URL for plugin http://oss.opensagres.fr/angularjs-eclipse/1.3.0-SNAPSHOT/

Now click on OK then click on Next now accept the Licenses.

Click on Install anyway to install this plugin

Then click on Restart Now option to complete the installation of this plugin

Now download the node eclipse plugin from Eclipse MarketPlace. 

Install this plugin as previously we have discussed.

Step 5: 

Now we will create a Sample Project to test Configuration.

Click on File -> Other -> Java Script Project

Click on Next and give a project name

and click on Finish button it may ask to open in JavaScript Perspective then click on Ok button.

Then Project will be created and available under project explorer section

Step 6:

Now Right Click on Project and choose Configure -> Convert to Tern Project

Select the following options

a. Angular JS

b. Jasmine

c. Node.js

d. Protractor

Step 7:

Copy this following 2 files from the below location and keep it under newly created project directory in eclipse. 

We will discuss it later in details of these 2 files for now we can say config.js is require for protractor configuration and example_spec.js is for testcases.

Copy the protractor modules to eclipse project folder structure.

Step 8:

Now Right click on project structure and click on the Run As -> Run Configurations…

Select the new Configuration for Protractor and Provide the following details.

We can also create a node runner as well use the following details as below

Using browsermob proxy with Selenium WebDriver

Some time we need to extract har(http archive) file from browser to measure client site performance or extracting analytics data. Incorporating browsermob proxy with selenium we need to follow the below steps:

Step 1:
Create a maven project and add the following dependencies in pom.xml file.

        <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>3.141.59</version>
        </dependency>
       
        <!-- https://mvnrepository.com/artifact/net.lightbody.bmp/browsermob-core -->
        <dependency>
            <groupId>net.lightbody.bmp</groupId>
            <artifactId>browsermob-core</artifactId>
            <version>2.1.5</version>
        </dependency>

        <!-- Dependency For Driver Management -->
        <dependency>
            <groupId>io.github.bonigarcia</groupId>
            <artifactId>webdrivermanager</artifactId>
            <version>3.6.2</version>
        </dependency>

Step 2:

Instantiate and start the browsermob proxy server .

        BrowserMobProxyServer proxy = new BrowserMobProxyServer();
        proxy.setTrustAllServers(true);
        proxy.start();

Step 3:
  
Create the Selenium proxy to store all browser network communication.

        Proxy seleniumProxy = ClientUtil.createSeleniumProxy(proxy);

Step 4:

Set the capturing capability of Selenium Proxy.

        Set<CaptureType> captureTypes = new HashSet<CaptureType>();
        captureTypes.add(CaptureType.REQUEST_BINARY_CONTENT);
        captureTypes.add(CaptureType.REQUEST_CONTENT);
        captureTypes.add(CaptureType.REQUEST_COOKIES);
        captureTypes.add(CaptureType.REQUEST_HEADERS);
        captureTypes.add(CaptureType.RESPONSE_BINARY_CONTENT);
        captureTypes.add(CaptureType.RESPONSE_CONTENT);
        captureTypes.add(CaptureType.RESPONSE_COOKIES);
        captureTypes.add(CaptureType.RESPONSE_HEADERS);

Step 5:

Set the Capture Type in Selenium Proxy
 
        proxy.enableHarCaptureTypes(captureTypes);

Step 6:

Set browser capability for Chrome
 
        DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability(CapabilityType.PROXY,seleniumProxy);
        ChromeOptions option = new ChromeOptions().merge(capabilities); 

Step 7:

 Instantiate Chrome browser with Capability and maximize the browser.
 
        ChromeDriverManager.chromedriver().setup();
        driver = new ChromeDriver(option);
        driver.manage().window().maximize();

Step 8:

Giving a har name, this name is not related with physical file name. This name will be available within your data it is basically used to group the data of different page.

        proxy.newHar("Google");
Step 9:
 
Open the browser with actual URL
 
        driver.get("https://www.google.com");
        driver.manage().timeouts().pageLoadTimeout(120, TimeUnit.SECONDS);

Step 10:
 
Get the all network traffic.

        Har har = proxy.getHar();

Step 11:

Store it in a .har file.
 
        File harFile = new File("./Google.har");
        har.writeTo(harFile);    

Step 12: 

Close the  browser and stop the browsermob proxy server
 

        if (driver != null) {
            driver.quit();
        } else if (proxy.isStarted()) {
            proxy.stop();
        }

Complete Code:

package com.ibm.atnt.automation.test;

import java.io.File;
import java.io.IOException;
import java.util.HashSet;
import java.util.Set;
import java.util.concurrent.TimeUnit;

import org.openqa.selenium.Proxy;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.remote.CapabilityType;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

import io.github.bonigarcia.wdm.ChromeDriverManager;
import net.lightbody.bmp.BrowserMobProxy;
import net.lightbody.bmp.BrowserMobProxyServer;
import net.lightbody.bmp.client.ClientUtil;
import net.lightbody.bmp.core.har.Har;
import net.lightbody.bmp.proxy.CaptureType;

public class ValidateAnalyticsData {
    WebDriver driver;
    BrowserMobProxy proxy;

    @BeforeTest
    private void beforeTestAnalyticsData(){

        /*
         * Instantiate and start the browsermob proxy server.
         */
        proxy = new BrowserMobProxyServer();
        proxy.setTrustAllServers(true);
        proxy.start();

        /*
         * Create the Selenium proxy to store all browser network communication.
         */
        Proxy seleniumProxy = ClientUtil.createSeleniumProxy(proxy);

        /*
         * Set the capturing capability of Selenium Proxy
         */
        Set<CaptureType> captureTypes = new HashSet<CaptureType>();
        captureTypes.add(CaptureType.REQUEST_BINARY_CONTENT);
        captureTypes.add(CaptureType.REQUEST_CONTENT);
        captureTypes.add(CaptureType.REQUEST_COOKIES);
        captureTypes.add(CaptureType.REQUEST_HEADERS);
        captureTypes.add(CaptureType.RESPONSE_BINARY_CONTENT);
        captureTypes.add(CaptureType.RESPONSE_CONTENT);
        captureTypes.add(CaptureType.RESPONSE_COOKIES);
        captureTypes.add(CaptureType.RESPONSE_HEADERS);

        /*
         * Set the Capture Type in Selenium Proxy
         */
        proxy.enableHarCaptureTypes(captureTypes);
       
        /*
         * Set browser capability for Chrome
         */
        DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability(CapabilityType.PROXY,seleniumProxy);
        ChromeOptions option = new ChromeOptions().merge(capabilities);
       
        /*
         * Instantiate Chrome browser with Capability and maximize.
         */
        ChromeDriverManager.chromedriver().setup();
        driver = new ChromeDriver(option);
        driver.manage().window().maximize();
    }

    @Test
    public void testAnalyticsData() throws IOException {

        /*
         * Giving a har name
         */
        proxy.newHar("Google");

        /*
         * Open the browser with actual URL
         */
        driver.get("https://www.google.com");
        driver.manage().timeouts().pageLoadTimeout(120, TimeUnit.SECONDS);

        /*
         * Get the all network traffic.
         */
        Har har = proxy.getHar();

        /*
         * Store it in a .har file.
         */
        File harFile = new File("./Google.har");
        har.writeTo(harFile);
    }

    @AfterTest
    private void afterTestAnalyticsData() {
        if (driver != null) {
            driver.quit();
        } else if (proxy.isStarted()) {
            proxy.stop();
        }
    }
}
 
pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.ibm.atnt.automation</groupId>
    <artifactId>Demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <dependencies>
       
       <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>3.141.59</version>
        </dependency>
       
        <!-- https://mvnrepository.com/artifact/net.lightbody.bmp/browsermob-core -->
        <dependency>
            <groupId>net.lightbody.bmp</groupId>
            <artifactId>browsermob-core</artifactId>
            <version>2.1.5</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.testng/testng -->
        <dependency>
            <groupId>org.testng</groupId>
            <artifactId>testng</artifactId>
            <version>6.14.3</version>
            <scope>test</scope>
        </dependency>

        <!-- https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager -->
        <dependency>
            <groupId>io.github.bonigarcia</groupId>
            <artifactId>webdrivermanager</artifactId>
            <version>3.6.2</version>
        </dependency>

    </dependencies>
</project>