Selenium Login Automation

» What is Selenium?

  1. Selenium WebDriver: The WebDriver is the core component of Selenium and provides a programming interface to interact with web browsers.

  2. Developers can write scripts in various programming languages (such as Java, Python, C#, JavaScript, etc.) to automate browser actions like clicking buttons, filling forms, navigating pages, and extracting data from web pages.

  3. Selenium IDE (Integrated Development Environment): This is a browser extension used primarily for record and playback testing.

  4. Selenium Grid: Selenium Grid enables the distribution of tests on multiple machines or browsers simultaneously.

» Prerequisites

  1. Make sure that you have Node.js and npm installed by running the commands npm -v and node -v in the terminal.
node -v

npm -v

  1. If you don’t have Node.js installed, visit node.js website and dowmload the latest LTS version.

  2. To install npm, in terminal run the command:

npm intsall -g npm

» Create a new Project

  1. Create a new project named selenium-automation which is initially empty. So open the project in VS code and the terminal let’s initialize this project with npm by running the command
npm init -y

So, it will generate the package.json file which will hold the dependencies.

We also need a selenium-webdriver and chromedriver, let’s run the command

npm install selenium-webdriver chromedriver

» Write The Script

  1. Import required packages - This code will import necessary classes and functions from the selenium-webdriver package and the selenium-webdriver/chrome package. These are used to interact with the web browser and control its behavior.
const { Builder, By, Key, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
  1. Then we are creating a new instance of the chrome.Options class. And, The argument –start-maximized instructs the Chrome browser to start in maximized window mode, ensuring that the browser window opens with its maximum size, filling the entire screen.
const chromeOptions = new chrome.Options();
chromeOptions.addArguments('--start-maximized');
  1. Then a new WebDriver instance is created using the Builder class. It specifies that the Chrome browser should be used for automation.
const driver = new Builder()
    .forBrowser('chrome')
    .setChromeOptions(chromeOptions)
    .build();
  1. These variables will hold the URL of the website to be logged into and the login credentials (username and password). Make sure, you replace them with your credentials.

const websiteUrl = 'https://example.com/login';
const username = 'your-username';
const password = 'your-password';
  1. Define async function to automate login, This function will contain the logic to automate the login process.
async function automateLogin() {
   
}
  1. Inside the automateLogin function, a try-catch block will be used to handle any potential errors that might occur during the automation process.
async function automateLogin() {
    try {
        // Open the website
        await driver.get(websiteUrl);

        // Find username and password fields, and login button
        const usernameField = await driver.findElement(By.name('username'));
        const passwordField = await driver.findElement(By.name('username'));
        const loginButton = await driver.findElement(By.css('button[type="submit"]'));

        // Enter username and password
        await usernameField.sendKeys(username);
        await passwordField.sendKeys(password);

        // Click the login button
        await loginButton.click();

        // Wait for a specific element on the logged-in 
        // page to ensure successful login
        await driver.wait(until.elementLocated(By.css('.alert-success')), 10000); 
        // Adjust the CSS selector and timeout as needed

        await delay(5000); // Delay 2 seconds

        console.log('Login successful!');
    } catch (error) {
        console.error('An error occurred:', error);
    } finally {
        // Quit the WebDriver session
        await driver.quit();
    }
}

// Delay the process
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// Call the automation function
automateLogin();
  1. Run the command in terminal, to run the script:
node file-name

And That’s it! You’ve successfully learned how to automate a login page of any website with the help of Selenium + Node.js.

Thank You and Happy coding!😊

Topics