Headless Browsing and Automation UI Testing: A nightmare

Maulik SompuraMaulik Sompura
2 min read

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.


0
Subscribe to my newsletter

Read articles from Maulik Sompura directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Maulik Sompura
Maulik Sompura

Hello, I’m Maulik Sompura, a fullstack Javascript developer. I have a passion for building web applications using Node JS, React, Vue, and various databases and APIs. I can implement business logic, RESTful services, and responsive UIs from Figma designs. I am proficient in GraphQL and Express along with Infrastructure management. I have had the opportunity to work with a variety of technologies including Node JS, React JS, Vue JS, Typescript, Firebase, AWS (various services), Stripe, Cloudinary, PHP, Angular JS, ElectronJS, and ElasticSearch. I am passionate about learning new things and sharing my knowledge with others. I write about Javascript, web development, and other topics on my blog. You can also find me on Linkedin, Github, and Skype. Feel free to reach out to me if you have any questions or feedback. Thanks for reading!