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

 

Reference:

ES8 – Callback, Promise and Async

Callbacks: Pass in a function as a parameter

function fetchData(callback) { 
    callback(); 
}

 

Promise: States: Pending, Fulfilled, Rejected

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

        // if error:
        reject(errorInfo)
    });
};

 

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

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

 

async()

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

 

Array.prototype.includes

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)

 

WordPress.com – create a custom tag list widget

I never really like Tag Clouds. Just from the UI point of view, making tags big and small is just chaos and ugly. WordPress.com free or personal plan don’t allow you customize the CSS so this is a hacky way to get around it.

Unfortunately, this way doesn’t automatically generate the list and it takes a lot of manual processes to maintain it, but you can do this. Note, it requires you a bit of knowledge in CSS and Javascript. I’ll try my best to walk you through.

Anyways, let’s get started. Here are the 4 steps to get the following result:

Protractor Notes

Protractor Locators (= Angular locators + selenium locators):

• binding
• model
• css
• buttonText
• repeater
• options
• id
• linkText
• name
• tagName
• xPath
• addLocator

 

Create Test Suites

exports.config = { 
    seleniumAddress: 'http://localhost:4444/', 
    specs: ['./**/*.spec.js'], 

    suites: {
        smoke: './smoke/*.spec.js', 
        feature: './feature/*.spec.js',
        full: './**/*.spec.js'
    },

    onPrepare: function() {
        browser.driver.manage().window().setPosition(0, 0); 
        browser.driver.manage().window().setSize(1280, 720); 
    }
}

# In the terminal, run the following to set specific suite:
protractor conf.js --suite=smoke,feature

 

Other Notes

Reference

This note is taken from Introduction to Protractor by Nate Taylor and AngularJS Fundamentals by Joe Eames and Jim Cooper from Pluralsight.