How to use Selenium Web Driver and JavaScript to Login any website ?

This article shows the method to sign in on any website using automation with the help of Selenium Web Driver and JavaScript. The concept of promises would be used in this method. This will be demonstrated by logging in to the GeeksforGeeks website. The below steps have to be followed.

Step 1: Install the latest Node.js runtime by following the steps for Windows or Linux.

Step 2: Create a package.json file for creating the Node application. This can be done by running the below command and following the required steps.

npm init

Step 3: Install the Selenium webdriver package. This can be done by opening terminal/command prompt in the same directory where the node is installed and running the below command.

npm install selenium-webdriver

Step 4: Install drivers for browser that will be used for automating the browser. The browser used in this article is Chrome, hence the chromedriver package needs to be installed. This can be done using the below command.

npm install chromedriver

Step 5: Create a JSON file (eg. credentials.json) to store the username/email and password. The following format can be used for saving the credentials.

{
  "email": "your-username",
  "pass": "your-password"
}

Step 6: Create a JavaScript file in the same directory as the credentials file. This file would contain the code for controlling the browser and automatically sign in. The steps below are followed to login to the GeeksforGeeks page. This is written in this main JavaScript file.

1. Get to the login page.
2. Find the text box on the page for entering the username. 
3. Enter the given username. 
4. Find the text box on the page for entering the password. 
5. Enter the given password. 
6. Find the button for login.
7. Click the login button.

Step 7: Start the JavaScript file containing the script using the below command.

node scriptfile.js

Complete Code:

Javascript

// Include the chrome driver
require("chromedriver");

// Include selenium webdriver
let swd = require("selenium-webdriver");
let browser = new swd.Builder();
let tab = browser.forBrowser("chrome").build();

// Get the credentials from the JSON file
let { email, pass } = require("./credentials.json");

// Step 1 - Opening the geeksforgeeks sign in page
let tabToOpen =
    tab.get("https://auth.geeksforgeeks.org/");
tabToOpen
    .then(function () {

        // Timeout to wait if connection is slow
        let findTimeOutP =
            tab.manage().setTimeouts({
                implicit: 10000, // 10 seconds
            });
        return findTimeOutP;
    })
    .then(function () {

        // Step 2 - Finding the username input
        let promiseUsernameBox =
            tab.findElement(swd.By.css("#luser"));
        return promiseUsernameBox;
    })
    .then(function (usernameBox) {

        // Step 3 - Entering the username
        let promiseFillUsername =
            usernameBox.sendKeys(email);
        return promiseFillUsername;
    })
    .then(function () {
        console.log(
            "Username entered successfully in" +
            "'login demonstration' for GEEKSFORGEEKS"
        );

        // Step 4 - Finding the password input
        let promisePasswordBox =
            tab.findElement(swd.By.css("#password"));
        return promisePasswordBox;
    })
    .then(function (passwordBox) {

        // Step 5 - Entering the password
        let promiseFillPassword =
            passwordBox.sendKeys(pass);
        return promiseFillPassword;
    })
    .then(function () {
        console.log(
            "Password entered successfully in" +
            " 'login demonstration' for GEEKSFORGEEKS"
        );

        // Step 6 - Finding the Sign In button
        let promiseSignInBtn = tab.findElement(
            swd.By.css(".btn.btn-green.signin-button")
        );
        return promiseSignInBtn;
    })
    .then(function (signInBtn) {

        // Step 7 - Clicking the Sign In button
        let promiseClickSignIn = signInBtn.click();
        return promiseClickSignIn;
    })
    .then(function () {
        console.log("Successfully signed in GEEKSFORGEEKS!");
    })
    .catch(function (err) {
        console.log("Error ", err, " occurred!");
    });

Output: