Automatically sign in with Google using Puppeteer

Let’s try to log in with Google to the website hosting this post

Puppeteer is a tool imitating a user of a Chrome browser. You can easily program Puppeteer to automatically click buttons, fill fields or execute your JavaScript code on any website. Puppeteer has many use cases, but personally I use it mostly for automatic data import into web applications that have forms but do not support any quick ways of data import.

In this post I demonstrate how to automatically fill and submit the most common form — Sign in with Google.

Where could I log in with Google? Into any popular web site, including this one.

I try to sign in starting from a link https://medium.com/m/connect/google?state=google-%7Chttps%3A%2F%2Fmedium.com%2F that I found in the HTML of this website.

By default Puppeteer launches headless, or invisible, Chrome. The browser without graphical user interfaces is useful for applications running on servers. But developing Puppeteer-based code without seeing the page that is manipulated is needlessly complicated. So, during the quick development and debugging, my sample code launches a visible browser. In this way I will also be able to take screenshots needed to illustrate this post.

Filling in Google login form

The first version of the code should navigate to the login link, fill the email field,

click the blue button Next and enter the password into the password field.

In principle google1.js should be able to do that:

// google1.js
import puppeteer from 'puppeteer';
import { env } from 'process';
import puppeteer from 'puppeteer';
import { env } from 'process';
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();