04. July 2019

Nightwatch.js

Create a folder and install night watch

mkdir nightwatch-frontend; npm install nightwatch -g --dev-save

Select WebDriver Service

So you have an option to what browser and driver you want to use for testing, there’s Firefox(GekoDriver), Chrome(ChromeDriver), Edge(Microsoft WebDriver), Safari(SafariDriver). I always use Chrome for development, so let’s install ChromeDriver.

Chrome Driver

npm install chromedriver --save-dev

nightwatch.json

Nightwatch expects to have nightwatch.json configuration file in your root directory and paste this code inside.

{
  "src_folders" : ["tests"],

  "webdriver" : {
    "start_process": true,
    "server_path": "node_modules/.bin/chromedriver",
    "port": 9515
  },

  "test_settings" : {
    "default" : {
      "desiredCapabilities": {
        "browserName": "chrome"
      }
    }
  }
}

Settings for different environment

This is really convenient and you don’t need to change URL every environment. You can set URL for local development and different URL for testing and production.

{
  ...
  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "globals" : {
        "myGlobalVar" : "some value",
        "otherGlobal" : "some other value"
      }
    },

    "integration" : {
      "launch_url" : "http://staging.host",
      "globals" : {
        "myGlobalVar" : "other value"
      }
    }
  }
}
nightwatch --env integration

Test Group

tests/
  ├── logingroup
  |   ├── login_test.js
  |   └── otherlogin_test.js
  ├── addressbook
  |   ├── addressbook_test.js
  |   └── contact_test.js
  ├── chat
  |   ├── chatwindow_test.js
  |   ├── chatmessage_test.js
  |   └── otherchat_test.js
  └── smoketests
      ├── smoke_test.js
      └── othersmoke_test.js

To run smoke tests:

nightwatch --group smoketests

To skip smoke tests:

nightwatch --skipgroup smoketests

Skipping multiple groups

nightwatch -skipgroup addessbook,chat

You can use tags as well but were not covering it here.

Lets write some basic test

Inside your tests folder create file first-test.js and paste the code sample and run nightwatch.

module.exports = {
  'Demo test Google' : function (browser) {
    browser.url('https://www.google.com');
    browser.expect.element('#hplogo').to.be.present; 
    browser
      .waitForElementVisible('body')
      .setValue('input[type=text]', 'nightwatch')
      .waitForElementVisible('input[name=btnK]')
      .click('input[name=btnK]')
      .pause(1000)
      .assert.containsText('#main', 'Night Watch');
    browser.end();
  }
}
nightwatch --env default

Chrome browser will open and simulate the test.

I hope this helps you setup nightwatch basic testing. Chow!!!

19. September 2018

Javascript Post Request Twice

I went nuts yesterday. I’m trying to figure out why my click event is triggering twice. I have a modal with send button, that button has and click function to post data, for some reason the event triggers twice, using e.preventDefault() and e.stopPropagation() doesn’t work. It took me a while to find the answer. Using the code below, works for me. I hope it works for you too.

e.stopImmediatePropagation();

26. August 2018

Making your teminal prompt a little bit pretty

I use terminal a lot, it helps make work easier and faster. After using a Mac then moving to Ubuntu, I realized, that I couldn’t live without a Linux terminal. I wanted to customize my terminal prompt, so I looked into the internet and found [oh-my-zsh](https://github.com/robbyrussell/oh-my- zsh), and looks pretty! lol!

zsh image

I wanted something like that, but, I don’t want to use ZSH, I want to stay in bash. Then I found bash_it. I don’t want to go and compare the two. but staying in bash, having a current path and git branch in my terminal prompt works for me. Bash_it has lots of plugins too and themes, I personally used ‘bobby theme’ and customized it to my needs.

my terminal

Installing bash_it
cd ~/
git clone --depth=1 https://github.com/Bash-it/bash-it.git ~/.bash_it
cd ~/.bash_it
sudo ./install.sh
To change theme

open your terminal, and nano into ~/.bash_profile or ~/.bashrc and look for this line.

# Lock and Load a custom theme file
# location /.bash_it/themes/
export BASH_IT_THEME='bobby'

If you don’t like my theme, visit bash_it themes for more options. Chow!