Protractor – elementexplorer.js

elementexplorer.js is a bonus tool from protractor that helps you debug your selectors on page objects live! It’ll make your life on writing protractor tests a lot easier! This post assumes that you have worked with protractor before and have it installed on your machine.

Start selenium

Before starting elementexplorer.js, you need to first start selenium:

> webdriver-manager update
> webdriver-manager start

# or you can start webdriver with a specific port; default is 4444
> webdriver-manager start --seleniumPort XXXX

In the browser opened by selenium, navigate to your angular web app.

Assuming that you have the following binding in your application:

$scope.yourName = "Wahaha" 
<input ng-model="yourName" />


Use elementexplorer

Open a new terminal. Then locate it in node_modules folder and run the following command

> ./node_modules/protractor/bin/elementexplorer.js

Using list() in elementexplorer:

> list(by.model('yourName'))

> list(by.model('notExisted'))

> list(by.binding('yourName'))
['Wahaha']  //Note: this value can be changed on page



ES8 – Callback, Promise and Async

Callbacks: Pass in a function as a parameter

function fetchData(callback) { 


Promise: States: Pending, Fulfilled, Rejected

function fetchData() { 
    return new Promise((resolve, reject) => { 

        // if error:


takes multiple promises and returns a promise which resolves when all supplied promises are done.

takes multiple promises and resolves when the first promise is done.



// Running sequentially: asyncFunc1 is run before asyncFunc2
async () => { 
    await asyncFunc1(); 
    await asyncFunc2(); 

// Running in parallel
async () => { 
    await Promise.all([asyncFunc1(), asyncFunc2()]); 


ES8 – Array and Exponent

ES8 aka. ES2017

Array.prototype custom function (review)

let number = [1, 2, 3, 4]; 
let moreNumbers = new Array (1, 2, 3, 4); 

Array.protype.count = function() { 
    return this.length;

console.log(numbers.count());     // outputs 4
console.log(moreNumbers.count()); // outputs 4



Check if an array contains a specific value and returns a boolean.

let letters = ['a', 'b', 'c', NaN]; 
letters.includes('b');      // true
letters.includes('d');      // false

// includes is similar to indexOf from older version 
letters.indexOf('b') >= 0   // true

// when includes and indexOf is different: 
letters.includes(NaN)       // true
letters.indexOf(NaN) >= 0   // false


Exponential syntax: **

3 ** 4 = Math.pow(3, 4)


Bash: Variable – filename example

Variable in bash is not particularly cool until we have a good use of it  😛

> filename="myfile.txt"
> touch $filename
> ls filename

> rm $filename
> ls $filename
ls: myfile.txt: No such file or directory

> files="file1 file2" 
> touch $files
> ls $files


Bash: `type` Command

In unix, type command tells us whether a keyword is taken by the system or not. It is useful when trying to add a new custom command in the terminal and ensure that our command is not in conflict with system ones.

> type test
test is a shell builtin

> type cp
cp is /bin/cp

> type foo
-bash: type: foo: not found

# This is my custom command
> type note  
note is hashed (/Users/.../bin/note)


How to loop a video on YouTube

There are two ways:

Method 1: Create a playlist with only your target video and loop that playlist

Screenshot 2018-07-01 at 00.39.27

Method 2: Right click on the video and select loop option. This is a better way since it doesn’t refresh the page none stop 😉

Screenshot 2018-07-01 at 00.41.16