How to Automate your Work From Home: Puppeteer Use Case


In this digital transformation movement of today, we have innovated and modernized our business, social and daily activities around us. This technological advancement has led significantly to how we interact and communicate. Modern technologies make automation possible by removing human efforts to do the recurring task easily. In contrast, manual tasks are monotonous and require human intelligence and much effort.

“You are either the one that creates the automation or you’re getting automated”

Tom Preston Werner

What is Task Automation?

Task automation simply is the process of reducing manual efforts. This can be achieved with the help of tools or software. In other words, automation is the application of modern technology to minimize or eliminate the need for human involvement to accomplish a task. We come across a lot of automation in our daily lives. When we visit ATMs, fast food, restaurants, prescription, subscription, chatbots, and Airport check-ins.

Example of Task Automation

During our airport check-in we might get our tickets printed at home even our cell phones which will eliminate human intervention on creating boarding passes and luggage handling.

“45 percent of the activities individuals are paid to perform can be automated by adapting currently demonstrated technologies. In the United States, these activities represent about $2 trillion in annual wages.”

McKinsey Institute(2015), Four Fundamentals of workplace automation Article

In this article, we will achieve this by writing some code. For this, we will be using Node and we will make use of the somewhat non-traditional method of using a headless browser. Headless? What? Yes, this just means there’s no graphical user interface (GUI). Instead of interacting with visual elements the way we normally would—for example with a mouse or touch, we automate use cases with a command-line interface (CLI).

As of today, Javascript rules the web, including almost everything we interact with on websites. So we will make use of Node which is a javascript runtime for our server code. There are a lot of tools and libraries which we can use to achieve this task but for this, we will be using Puppeteer.

What is Puppeteer?

Puppeteer is a headless chrome that is a relatively new player, released at the start of 2018. It’s a Node.js library that provides a high-level API to control headless Chrome or Chromium or to interact with the DevTools protocol. It’s maintained by the Chrome DevTools team and an awesome open-source community. We can still follow the link here for the documentation to learn more about it here.

Things that we can do manually in the browser can be done using Puppeteer. For example: Generating screenshot PDF of pages, Crawl SPA, and generate pre-rendered content with SSR. Automate form submission, UI testing, keyboard input, etc, testing chrome extension or capture timeline trace of our site to diagnose performance issues.

Setting up Headless Chrome and Puppeteer

I have used yarn for getting packages. We will go to our desired folder and run the following commands.

mkdir automating-work-from-home
cd automating-work-from-home
yarn init
yarn add puppeteer

After we have made our project and added our package.json file in which we added puppeteer as our dependency. We will now create a file to write our script.

touch main.js

Inside our main file we will teach Node how to speak to Puppeteer.

Teaching Node how to speak to Puppeteer.

Every command we provide to Puppeteer is “asynchronous”. Which states when we execute any one of the functions the function finishes its execution and immediately and continues with the rest of the program before it has gotten the result. So we need to await the Puppeteer functions, and we can only use the await keyword inside of an async function.

Here we have all done is launched our puppeteer with the launch() method available to us and we want headless to be false initially as we can see the browser opens up and does its task automatically before us. You can switch this to true to run this behind the background. With the use of another available method, we can create a new page and navigate to it with newPage().

* Note: Unless say to close the browser this will keep opening the browser forever.

Now we will go to our Vyguta login, head towards login, and take a snapshot of its UI first. 

After we execute our code above you must see a screenshot of the UI of Google which asks for authenticating into Vyaguta. Till now we are on the right track. Let’s head towards entering email and password and authenticating into Vyaguta and take its screenshot.

For this to achieve I will create two functions that can be reusable in the future. This helps in selecting the input DOM element and typing our email, the same process goes to our password which will be stored in a secret environment variable file.

You might find it weird to have a for loop for pressing TAB inside the browser. Generally, I personally did not find an appropriate selector for this and went on this hackish way to navigate around pressing TAB. After writing these two functions we will get into adding a bit of delay in between our actions and navigation to avoid a bit of mischievous traffic. But this might not really matter in our simple use case here.

We could have used an inbuilt method of the puppeteer to use this as well with waitFor(). But anyway we already have accessed our Vyaguta inside with our own credentials. Fortunately, we did not have to set our cookies and handle the routing with cookies in our header of the response. Which is a great thing till now. Now let’s create a function for making an array of tasks so that we can set random things in each of our forms. But this is just for experimental demo purposes, We really don’t want to randomly choose the task.

Also, let’s create a function that will pick the random task from the array here and set it into the input fields as well. 

We are near completion in writing our workable code here. We will go into our main asynchronous function we created and add the function we created for filling up email passwords and also picking random tasks. Our code looks something like this now.

According to research conducted by the McKinsey Institute, “Sixty percent of occupations could have 30 percent or more of their constituent activities automated.”

Finally, we don’t and we just did our evening work from home, still, we need to add our morning task as well lol. Also, I would like to add up a cron job for our function to trigger every working day from around 9:15 am and also trigger another function around 6:15 pm on Mon, Tue, Wed, Thu, Fri. To achieve this one, we will make the use of a library and install it into our package dependency. 

yarn add node-cron

And wrap our function to execute in the desired time and date.

We have just finished our evening task reporting. Also, I do have our script ready to execute for the morning task as well. This was really fun making this automated and implementing it in real life to make our own lives easier.

Conclusion

AI and robotics are contributing to making our lives much easier. With the right tools in choice, we can leverage and increase our productivity and stay efficient. The benefits of automation are countless. A few of them are listed here below:

  • Reducing the cost
  • Increase in overall productivity.
  • Improved performance.
  • Improved accuracy and efficiency.
  • Increase in human resource availability.
  • Increased focus on high-value, strategic activities
  • Increase in reliability.

With the help of automation we can enhance our productivity and make the use of technology to improve and ease our daily lives with the right use of it. This is solely for demo and experimental purposes, I assume you will make correct use of it. To take a look at the source code please check out my GitHub repository linked here. Feel free to fork and tweak changes as per your need. Cheers!


Ishan Manandhar

Ishan is a UX Designer at Leapfrog. You can reach out to Ishan in his Twitter handle: ishan02016

More awesome Augmentation awaits...

Moving Foward with New Leave Policies at Leapfrog AnnouncementsCulture

Moving Foward with New Leave Policies at Leapfrog

In March, we made some important updates to our existing leave policies. We aim for a workplace where everyone feels safe, heard, and accepted.

Read more
First-ever UX Design Internship, For Women By Women Internships

First-ever UX Design Internship, For Women By Women

Leapfrog is conducting its first-ever UX Design Internship. This time, we are making this position available only for women. It

Read more
Why are Soft Skills more Important than ever in 2021? CultureInsights

Why are Soft Skills more Important than ever in 2021?

The ability to speak and articulate our thoughts into precise words has always been a leader's skill. And, when done right, this ability can help in shaping the world but at the same time also something as simple as making a living.

Read more