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

Nowadays, automation is very useful for testing applications. Many automation tools are available, and Selenium is one of them, developed in 2004. Also, it is a cross-platform tool, so we can use Selenium with most programming languages, and here we will use it with JavaScript.

Users need to create a Node.js application to use the Selenium WebDriver with JavaScript.

Setting Up Node.js Application

Follow these steps to create a Node.js application for Selenium automation:

Step 1: Initialize a new Node.js project

npm init -y

Step 2: Install the Selenium WebDriver package

npm install selenium-webdriver

Step 3: Install ChromeDriver for Chrome browser automation

npm install chromedriver

Step 4: Create an app.js file and add your automation code

Step 5: Run your application

node app.js

Login Automation Algorithm

Here's the step-by-step approach to automate website login:

Step 1: Import required modules

require("chromedriver");
let seleniumDriver = require("selenium-webdriver");

Step 2: Initialize browser instance

let seleniumBuilder = new seleniumDriver.Builder();
let browserTab = seleniumBuilder.forBrowser("chrome").build();

Step 3: Navigate to the target URL

let browserWindow = browserTab.get("URL");

Step 4: Find form elements using CSS selectors. To find CSS selectors, right-click on any input field and select "Inspect" to open developer tools.

Step 5: Enter credentials and submit the form

let userInputBox = browserTab.findElement(seleniumDriver.By.css("#username"));
userInputBox.sendKeys("your_username");

Example: Practice Test Automation Site

This example demonstrates logging into a practice automation website. We use promise chaining to handle asynchronous operations and set appropriate timeouts for network delays.

// Import chrome driver
require("chromedriver");

// Import selenium webdriver
let seleniumDriver = require("selenium-webdriver");

// Get the browser instance
let seleniumBuilder = new seleniumDriver.Builder();
let browserTab = seleniumBuilder.forBrowser("chrome").build();

// Open the browser
let browserWindow = browserTab.get("https://practicetestautomation.com/practice-test-login/");

// Resolve promises
browserWindow
   .then(function () {
      // Set timeout for connection delay
      let timeOut = browserTab.manage().setTimeouts({
         implicit: 5000,
      });
      return timeOut;
   })
   .then(() => {
      // Get username input box
      let userInputBox = browserTab.findElement(
         seleniumDriver.By.css("#username")
      );
      return userInputBox;
   })
   .then((userNameInput) => {
      // Send username keys
      let sendUserName = userNameInput.sendKeys("student");
      return sendUserName;
   })
   .then(() => {
      console.log("Username filled!");
      
      // Get password input box
      let userPasswordBox = browserTab.findElement(
         seleniumDriver.By.css("#password")
      );
      return userPasswordBox;
   })
   .then((passwordInput) => {
      // Send password keys
      let sendPasswords = passwordInput.sendKeys("Password123");
      return sendPasswords;
   })
   .then(() => {
      console.log("Password filled!");
      
      // Get the submit button
      let continueButton = browserTab.findElement(
         seleniumDriver.By.css("#submit")
      );
      return continueButton;
   })
   .then((continueBtn) => {
      // Click on the submit button
      continueBtn.click();
      console.log("Sign-in completed!");
   })
   .catch(function (error) {
      console.log("Error: ", error);
   });

Username filled!
Password filled!
Sign-in completed!

Example: Dev.to Website Login

This example shows automation for the dev.to login page. Replace the placeholder credentials with your actual account details.

require("chromedriver");
let seleniumDriver = require("selenium-webdriver");
let seleniumBuilder = new seleniumDriver.Builder();
let browserTab = seleniumBuilder.forBrowser("chrome").build();
let browserWindow = browserTab.get("https://dev.to/enter");

browserWindow
   .then(function () {
      let timeOut = browserTab.manage().setTimeouts({
         implicit: 5000,
      });
      return timeOut;
   })
   .then(() => {
      let userInputBox = browserTab.findElement(
         seleniumDriver.By.css("#user_email")
      );
      return userInputBox;
   })
   .then((userNameInput) => {
      let sendUserName = userNameInput.sendKeys("your_email@example.com");
      return sendUserName;
   })
   .then(() => {
      console.log("Username filled!");
      let userPasswordBox = browserTab.findElement(
         seleniumDriver.By.css("#user_password")
      );
      return userPasswordBox;
   })
   .then((passwordInput) => {
      let sendPasswords = passwordInput.sendKeys("your_password");
      return sendPasswords;
   })
   .then(() => {
      console.log("Password filled!");
      
      // Get the login button
      let continueButton = browserTab.findElement(
         seleniumDriver.By.css(".crayons-btn.crayons-btn--l")
      );
      return continueButton;
   })
   .then((continueBtn) => {
      // Click on the login button
      continueBtn.click();
      console.log("Sign-in completed!");
   })
   .catch(function (error) {
      console.log("Error: ", error);
   });

Username filled!
Password filled!
Sign-in completed!

Key Points

• Always set appropriate timeouts to handle network delays
• Use CSS selectors to locate form elements reliably
• Handle promises properly to ensure sequential execution
• Include error handling with catch blocks
• For Firefox automation, install geckodriver instead of chromedriver

Conclusion

Selenium WebDriver with JavaScript provides powerful automation capabilities for website login testing. By finding elements with CSS selectors and using promise chains, you can create reliable automated login scripts for various websites.