Skip to main content

Headless Browsing and UI testing Automation : 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 you can 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 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.

Have sweet dreams!!
Happy Coding.

Comments

Post a Comment

Popular posts from this blog

Live Game Streaming on YouTube

Hello Guys, Today I gonna talk about how to stream your mobile gameplay to YouTube Gaming. Nowadays, PUBG (PlayerUnknown's BattleGround) is the most trending mobile game. Many Pro players upload/stream their gameplay to YouTube and earn money through monetization. Ok. Let's start. First of all Download YouTube Gaming App. After download, open the app and create/choose your google account for your YouTube channel. If you're a new user then you have to wait for 24 hours until you stream your gameplay (YouTube need to activate your account). Now Just click on the first icon(streaming icon) on the top left corner and this screen will appear: Click Next and select Stream if you want to live stream your gameplay or Record if you want to save the video to your phone and upload it later. Select the video format you want to upload/stream. Click next, you'll see a tips screen, read it and click next. Now, Select the game you want to stream or record. Add the st

Dynamic Form and Grid with C# in WPF

Ever wanted to generate the form & grid dynamically and add data from some data source? Here's to help you. Create a WPF project in Visual Studio. Add a UserControl and name it mainUserControl.xaml Now add a stackpanel just like this : <UserControl x:Class="TestApp.mainUserControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:SaiData.TestApp" mc:Ignorable="d" > <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="5*"/> <ColumnDefinition Width="43*"/> </Grid.ColumnDefinitions>

Automate Build & Deploy React production build with gitlab-ci to Linux base server (AWS)

Right now as everyone wanting to automate literaly everything, this post will show you how you can automate the react build and deployment. I am using create-react-app getting started with react and assuming you have a similar setup. Setup .gitlab-yml file for gitlab auto deploy Here's the whole .gitlab-yml file that you can copy directly to root of your project. Breaking each line: image: node : 10 cache:   paths: - node_modules / This line define the node version that should be used by the docker instance of shared gitlab-runner and the path defines to cache the node_modules dir. before_script: - apt - get update - qq & & apt install - y openssh - client openssh - server - mkdir - p ~ / . ssh - echo - e " $SSH_PRIVATE_KEY " > ~ / deploy . pem - chmod 400 ~ / deploy . pem - '[[ -f /.dockerenv