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

01 Jul, 2020
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.
Get to the login page.Find the text box on the page for entering the username. Enter the given username. Find the text box on the page for entering the password. Enter the given password. Find the button for login.Click the login button.
Get to the login page.
Find the text box on the page for entering the username. 
Enter the given username. 
Find the text box on the page for entering the password. 
Enter the given password. 
Find the button for login.
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 driverrequire("chromedriver");  // Include selenium webdriverlet swd = require("selenium-webdriver");let browser = new swd.Builder();let tab = browser.forBrowser("chrome").build();  // Get the credentials from the JSON filelet { email, pass } = require("./credentials.json");  // Step 1 - Opening the geeksforgeeks sign in pagelet 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:
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript