1/16/2018

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




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 !

No comments:

Post a Comment

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...