Headless Browsing and Automation UI Testing: A nightmare

Headless Browsing and Automation UI Testing: A nightmare

Do you ever need to use the web using your code instead of a web browser? That's what we call Headless Browsing. The prime application for headless browsing is Automate the UI testing flow. Some other applications I can think of is keeping track of some rates of particular items from some sites on daily basis, visiting some website for views (If you are using google products you might not want to use this as google have set strict policy for this), parsing data from other sites.

So, the main purpose of headless browser

  • Test automation in modern web applications.

  • Taking screenshots of web pages.

  • Running automated tests for JavaScript libraries.

  • Scraping web sites for data.

  • Automating interaction of web pages

How can you achieve this with Node.JS?

Nightmare, don't get scared it's just a name of a node package. So, you to just need to install nightmare in your project like this,

npm install nightmare

Let's just write a script for logging in into StackOverflow and get your reputation.

const Nightmare = require('nightmare');
let userData = {
    user: "your.email@address",
    pass: "yourpassword"
}
const nightmare = Nightmare({ show: false });
const LOGIN_PAGE = 'https://stackoverflow.com/users/login';
nightmare
    .goto(LOGIN_PAGE)
    .wait('#login-form')
    .type('#email', userData.user)
    .type('#password', userData.pass)
    .click('#submit-button')
    .wait('a.my-profile')
    .evaluate(() => {
        let el = document.querySelector('.js-header-rep');
        return el ? el.innerHTML : 'null';
    })
    .end()
    .then(progressText => {
        console.log('reputation :', progressText)
    })
    .catch(function (error) {
        console.error('err', error);
    });

When I initialized the nightmare on the 6th line, I passed the show option as false, which means I want to perform this whole action in the background. If you want to display the scenario on the screen, then you should pass true.

If your login credentials are valid then this script will show your StackOverflow reputation in console, you can store it somewhere if you want.

This is just a simple script to visit a site. You can do much more as mentioned above.
If you want to run this script daily like visiting your blog daily, you can set cronjob on server. Headless browsing mainly used in Automation UI testing. There's one more similar library is puppeteer Give it a try.


Did you find this article valuable?

Support Maulik Sompura by becoming a sponsor. Any amount is appreciated!