Visual Studio Code, selenium-webdriver, JavaScript, Cucumber and Chrome

Now we will use selenium-webdriver and Cucumber.js for end-to-end testing for the same test scenario.

(Be aware: selenium-webdriver and webdriver.io are not the same.)

I will use Visual Studio Code as a code editor again and Windows system.

For better Cucumber support you may install the following VSC extensions (Ctrl + Shift + X):

• Cucumber (Gherkin) Full Support
• Search and install 'Snippets and Syntax Highlight for Gherkin (Cucumber)

1. Create a directory for the project, initialize the node project in the directory:

npm init -y

2. Then install selenium-webdriver :

npm install selenium-webdriver --save-dev

3. Install cucumber.js :

npm install --save-dev @cucumber/cucumber




4. Then install chromedriver:

npm install chromedriver --save-dev

5. Install cucumber-html-reporter :

npm install cucumber-html-reporter --save-dev

So, the dev dependencies part in package.json looks like:

6. Add the following script:

"test": "./node_modules/.bin/cucumber-js features -f json:report/cucumber_report.json"

7. Create features directories with support and steps subdirectories:

8. In support folder create env.js file:

const { setDefaultTimeout } = require('@cucumber/cucumber');
setDefaultTimeout(60 * 1000);

9. In support folder create word.js file:

require('chromedriver');

const { setWorldConstructor } = require('@cucumber/cucumber');
const webdriver = require('selenium-webdriver');
const Capabilities = require('selenium-webdriver/lib/capabilities')
        .Capabilities;
const capabilities = Capabilities.chrome();

function World({ attach, parameters }) {
    this.driver = new webdriver.Builder()
    .withCapabilities(capabilities).build();
}

setWorldConstructor(World);

10. In the project "root" directory create index.js file:

const reporter = require('cucumber-html-reporter');
 
const options = {
        theme: 'bootstrap',
        jsonFile: 'report/cucumber_report.json',
        output: 'report/cucumber_report.html',
        reportSuiteAsScenarios: true,
        scenarioTimestamp: true,
        launchReport: true,
        metadata: {
            "App Version":"0.0.1",
            "Test Environment": "STAGING",
            "Platform": "Windows 10",
            "Executed": "Local"
        }
    };
 
    reporter.generate(options);

11. In features directory create first.feature file with the first test scenario written in Gherkin language:

Feature: Automation Playground blog
As a test automation enthusiast
I want to write test for Automation Playground blog
So that I can practice Cucumber

Scenario: Verify the blog's title
  Given the Automation Playground blog opened
    Then the Automation Playground blog title should be equal <title>
     Examples:
            |title                   |
            |"Automation Playground" |

12. In steps directory create first.steps.js file with the steps difinitions:

const { Before, Given, When, Then } = require('@cucumber/cucumber')
const assert = require('assert')

const base_url = 'https://automation-playground.blogspot.com/'

Given('the Automation Playground blog opened', function () {
  return this.driver.get(base_url);
});

Then('the Automation Playground blog title should be equal {string}', async function (title) {
  const actualTitle = await this.driver.getTitle();
  assert(title, actualTitle);
});

13. Also in steps directory create hooks.js file:

const { After, Before } = require('@cucumber/cucumber');

After(function(){
        return this.driver.quit();
  })

14. In the project "root" directory create report subdirectory with empty cucumber_report.json file

15. Run the test:

npm test

The following test scenario will be executed: 

•  run Chrome browser
•  go to https://automation-playground.blogspot.com
•  verify the blog's title
•  close Chrome browser

 The test passed!

16. Execute the following command to create html report from now populated cucumber_report.json:

node index.js







Visual Studio Code, Selenium, Firefox, JavaScript and Mocha with Chai

Let's leave Netbeans IDE to Java and start using lightweight Visual Studio Code for JavaScript test automation.

Preconditions:

• Node.js installed
• Gecko driver downloaded
• path to Gecko driver added to PATH

Download and install Visual Studio Code

Assign some hot-keys to run it without a mouse, for example:

We will try not to use a mouse.

Open Visual Studio Code using the shortcut keys and open Terminal in the editor using the following hot-keys: Ctrl + `  and change the directory, for example cd c:/devel

Visual Studio Code works primarily with folders, so to start new project you need to just create new folder, for example: mkdir selenium_vsc , then change directory to the folder: cd selenium_vsc:

Init node.js project in the folder by the following : npm init -y

Install the libraries:

Mocha:

npm install mocha --save-dev

Chai:

npm install chai --save-dev

Selenium Web Driver:

npm install selenium-webdriver --save-dev

Create test folder:  mkdir test

Change current directory to the folder: cd test

You may use Tab button to autocomplete the folder/file name

Create e2e folder for our end-to-end Selenium tests:  mkdir e2e

Change current directory to the folder: cd e2e

Create new empty file: break > first.test.js

Happy Linux and Mac OS users would just type: touch first.test.js

In the future you most likely will create new files by closing the terminal Ctrl + ` and then Ctrl + N , but now we just learn the Windows console commands.

Open the new file by typing the following: code -r first.test.js

Copy/paste our example code:

const {assert} = require('chai');
const webdriver = require('selenium-webdriver');
const Capabilities = require('selenium-webdriver/lib/capabilities')
        .Capabilities;
const capabilities = Capabilities.firefox();
capabilities.set('marionette', true);

let driver;

describe('Automation Playground tests', async () => {
    describe('When verifying the blog title', () => {
        it('should be equil to Automation Playground', async() => {
            const title = await driver.getTitle();
            assert.equal(title, 'Automation Playground');
        });
    });
});
before(async() => {
    driver = await new webdriver.Builder()
            .withCapabilities(capabilities).build();
    driver.get("https://automation-playground.blogspot.com");
});
after(async() => {
    await driver.quit();
});

Save Ctrl  + S

Go to the project root directory: cd ../..

Open package.json file by typing the following: code -r package.json

Copy/paste the following as script for test:

mocha ./test/e2e/*.test.js --timeout 30000

Save Ctrl + S

Go to the terminal by clicking twice Ctrl + `

Enter to run the test: npm test

The following test scenario will be executed:

• run Firefox browser 
• go to https://automation-playground.blogspot.com 
• verify the blog's title
• close Firefox browser

Test passed !

NetBeans IDE, Selenium, Firefox, JavaScript and Mocha with Chai

Now we will use Mocha testing framework and Chai assertion library in NetBeans IDE to write and execute tests.

We will use Mocha hooks (before, after) as well.

Also we will use console in Windows to set up the project and execute tests.

Skip the steps that you have already done:

1. Install the actual version of  Node.js

2. Install and set Git for Windows to use it as terminal.

3. Download Gecko driver from: https://github.com/mozilla/geckodriver  and store it in some folder, for example: C:\tools\web-drivers\ .

4. Add the driver location to the PATH:

5. Run NetBeans IDE

6. File > New Project

7. Select Node.js Application > Next and then enter the project name and location:

8. Click Next and select Create package.json:

9.  Git-bash and go to the project directory:

10. Install the libraries:

 Mocha:

npm install mocha --save-dev

Chai:

npm install chai --save-dev

Selenium Web Driver:

npm install selenium-webdriver --save-dev

Open package.json and see the dependencies have been added:

11. Create 'test' folder with unit and 'e2e' subfolders:

12.Open project Properties and select the subfolders as Unit Tests Folder and Selenium Tests Folder:

13. Click Selenium Testing and select Mocha test runner:

14. Set ES7 for the project in Settings:

15. Create 'blog.test.js' file in 'e2e' folder and copy/paste the following code:

const {assert} = require('chai');
const webdriver = require('selenium-webdriver');
const Capabilities = require('selenium-webdriver/lib/capabilities')
        .Capabilities;
const capabilities = Capabilities.firefox();
capabilities.set('marionette', true);

let driver;

describe('Automation Playground tests', async () => {
    describe('When verifying the blog title', () => {
        it('should be equil to Automation Playground', async() => {
            const title = await driver.getTitle();
            assert.equal(title, 'Automation Playground');
        });
    });
});
before(async() => {
    driver = await new webdriver.Builder()
            .withCapabilities(capabilities).build();
    driver.get("https://automation-playground.blogspot.com");
});
after(async() => {
    await driver.quit();
});

16. Click Run Selenium Tests:

The following test scenario will be executed:

• run Firefox browser 
• go to https://automation-playground.blogspot.com 
• verify the blog's title
• close Firefox browser

Test passed!

17. Lets run the test via command line in Git Bash, enter the following command in the project root directory:

mocha ./test/e2e/*.test.js --timeout 20000

Test will run again and...

Test passed again!

How to kill process in Windows (for example, Internet Explorer)

Sometimes you need to kill some process or instance, you can run Task Manager  :  taskmgr and kill the process manually.

But it is better to do the task faster and without a mouse.

For example:

Usually after test fails you need to cancel/delete/stop IE instances. To make it easy, do the following:

• create new text file, name and save it as a bat file, for example: stopIE.bat
• write in the stopIE.bat file the following:

taskkill /F /IM iexplore.exe
taskkill /F /IM IEDriverServer.exe

• create a shortcut for the bat file
• right click on the shortcut >> Properties, click into Shortcut key field and click on your keyboard some keys, for example Ctrl + Alt + C >> click OK button
• any time just use the hot keys to run the bat file.

Using Terminal and bash in Windows

• Download Git for Windows : https://git-for-windows.github.io/
• Install, than create a file shortcut for the application (in case it is not created automatically on your Desktop)
• right click on the file shortcut > Properties:

• click into Shortcut key and then press Ctrl + Alt + T
• click OK
• anytime press Ctrl + Alt + T and enjoy
• The same way you can assign hot keys to other applications, for example Atom, Netbeans IDE or WebStorm IDE