Run protractor test on firefox browser – webstorm ide

In one of our post Protractor test on chrome browser, we have seen how to run protractor tests in chrome browser (using VSCode IDE), in this post we will be using WebStorm IDE [just to get a difference experience] to run protractor tests on firefox browser

Let’s see the implementation step by step

Download and install

Download webstorm ide here and install.

Open ide, click on File | New | Project [enter folder path and project name]

tsconfig.json

Create a new file – Right click on the project, click New | File and name it as “tsconfig.json”

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": false,
    "declaration": false,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "tmp",
    "types": ["jasmine", "node"]
  },
  "exclude": [
    "node_modules"
  ]
}

All the .ts files will be converted to .js file under tmp folder

package.json

Create a new file and name is as “package.json”

{
  "name": "protractor-typescript",
  "version": "1.0.0",
  "description": "a protractor with typescript example",
  "scripts": {
    "example": "protractor tmp/conf.js",
    "pretest": "tsc",
    "test": "npm run example"
  },
  "author": "qavalidation",
  "license": "N/A",
  "dependencies": {
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.41",
    "@types/node": "^6.0.62",
    "protractor": "~5.1.0",
    "typescript": "~2.2"
  }
}

Firefox browser version – 56

Firefox driver version – 0.19.1

Protractor version – 5.1.2

conf.ts

Same way, create another file with name “conf.ts”

import {Config, browser} from 'protractor';

export let config: Config = {
    //directConnect:true,
    seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
    specs: [ './spec.js' ],
    capabilities: {
        browserName: 'firefox',
        acceptSslCerts: true,
        shardTestFiles: false,
        maxInstances: 1,
        marionette : true
    },
    onPrepare: () => {
        browser.manage().window().maximize();
        browser.manage().timeouts().implicitlyWait(5000);
    }
};

spec.ts

Let’s create test case or script, create a new file with name “spec.ts”

import { ElementFinder, browser, by, element } from 'protractor';

describe('slow calculator', () => {

    beforeEach(() => {
        browser.get('http://juliemr.github.io/protractor-demo/');
    });

    describe('memory', () => {
        let first: ElementFinder;
        let second: ElementFinder;
        let goButton: ElementFinder;

        function add(a: number, b: number){
            first = element(by.model('first'));
            first.sendKeys(a);
            second = element(by.model('second'));
            second.sendKeys(b);
            goButton = element(by.id('gobutton'));
            goButton.click();
        };

        it('should start out with an empty memory', () => {
            let memory = element.all(by.repeater('result in memory'));
            expect<any>(memory.count()).toEqual(0);
        });

        it('should fill the memory with past results', () => {
            add(1,1);
            add(10,20);

            let memory = element.all(by.repeater('result in memory').
            column('result.value'));

            memory.then((arr) => {
                    console.log("no. of result entries - " + arr.length);
                    expect<any>(arr.length).toEqual(2);

                    arr[0].getText().then((val)=>{
                        console.log("1st result - " + val);
                    });

                    arr[1].getText().then((val)=>{
                        console.log("2nd result - " + val);
                    });

                    expect<any>(arr[0].getText()).toEqual('30'); // 10 + 20 = 30
                    expect<any>(arr[1].getText()).toEqual('2'); // 1 + 1 = 2
                });
        });
    });
});

So we have now 4 files to get started with

open the local terminal (Alt + F12) in webstorm and

Run 1st command

npm install

this will install all the dependencies needed to run protractor test [this command will create a new folder “node_modules” under your project directory]

Run 2nd command

webdriver-manager start

Wait till it shows “Selenium Server is up and running”

Then open another terminal, click on + symbol and

Run 3rd command

npm test

This will open the firefox browser and run the script

Output:

C:\MyFiles\NewTechonologies\Protractor\WebstormProj\Protractor_Typescript>npm test
> protractor-typescript@1.0.0 pretest C:\MyFiles\NewTechonologies\Protractor\WebstormProj\Protractor_Typescript
> tsc
> protractor-typescript@1.0.0 test C:\MyFiles\NewTechonologies\Protractor\WebstormProj\Protractor_Typescript
> npm run example
> protractor-typescript@1.0.0 example C:\MyFiles\NewTechonologies\Protractor\WebstormProj\Protractor_Typescript
> protractor tmp/conf.js
[14:32:09] I/launcher - Running 1 instances of WebDriver
[14:32:09] I/hosted - Using the selenium server at http://127.0.0.1:4444/wd/hub
Started
.no. of result entries - 2
1st result - 30
2nd result - 2
.
2 specs, 0 failures
Finished in 11.238 seconds
[14:32:27] I/launcher - 0 instance(s) of WebDriver still running
[14:32:27] I/launcher - firefox #01 passed