如何使用Selenium Web Driver和JavaScript登录任何网站

现如今，自动化对于测试应用程序非常有用。有许多自动化工具可供选择，其中之一就是Selenium，它是在2004年开发的。此外，它是一个跨平台工具，因此我们可以与大多数编程语言一起使用Selenium，这里我们将使用JavaScript。

用户需要创建一个使用Selenium Web Driver和JavaScript的NodeJS应用程序。

创建一个NodeJS应用程序

用户可以按照以下步骤创建一个NodeJS应用程序。

步骤1 - 在终端中打开项目目录，并输入以下命令。

npm init -y

步骤2 - 现在，在项目目录中输入以下命令，将seleniumwebdriver NPM包安装到项目中。

npm install selenium-webdriver

步骤3 - 用户还需要安装Chrome浏览器的Chrome Web Driver才能使用Selenium。使用以下命令安装Chrome驱动程序。

npm install chromedriver

步骤4 – 创建一个app.js文件，并添加代码以登录到任何网站。

步骤5 – 执行下面的命令来运行app.js文件的代码。

node app.js

算法

用户可以按照以下步骤登录任何网站。

步骤1 - 导入’chromedriver’和’selenium-webdriver’。

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

步骤2 - 打开浏览器窗口。

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

步骤3 - 在浏览器标签中打开URL。

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

步骤4 - 解决承诺。使用CSS选择器找到用户名输入字段。要找到CSS选择器，用户应该转到相应的网页。例如，在我们的示例中，转到‘https://practicetestautomation.com/practice-test-login/’网页。

用户将看到下面的界面。

如何使用Selenium Web Driver和JavaScript登录任何网站

然后，在用户名输入字段上右键单击。它将显示一个菜单，用户需要在菜单中选择最后一个选项‘inspect’。

如何使用Selenium Web Driver和JavaScript登录任何网站

这将打开Chrome开发工具。在其中，用户需要找到元素并获取其id或类名。

如何使用Selenium Web Driver和JavaScript登录任何网站

在我们的示例中，我们将使用用户名输入字段的id作为CSS选择器。在这里，用户名字段的id是‘username’。

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

步骤5 - 将用户名作为键发送到用户输入框。

let sendUserName = userNameInput.sendKeys("student");

步骤6 - 使用CSS选择器找到密码输入框，并将密码作为一个键发送，就像用户名一样。

步骤7 - 找到登录按钮，并使用click()按钮点击按钮。

continueBtn.click();

第8步 – 使用Selenium成功登录。

示例

在下面的示例中，我们按照上面的步骤使用Selenium webdriver登录到”https://practicetestautomation.com/practice-test-login/”网站。首先，我们使用setTimeOut()函数将超时时间设置为5秒，以克服网络连接较慢的问题。

然后，我们使用promise链式操作获取用户名，并将用户名输进输入框，获取密码输入框，并将密码输进输入框，找到登录按钮，并点击登录按钮。

// 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-testlogin/");

// resolve promises
browserWindow
   .then(function () {

      // set timeout for connection delay
      let timeOut = browserTab.manage().setTimeouts({
         implicit: 5000,
      });
      return timeOut;
   })
   .then(() => {

      // get a user 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 a 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 continue button
      let continueButton = browserTab.findElement( 
         seleniumDriver.By.css("#submit")
      );
      return continueButton;
   })
   .then((continueBtn) => {

      // click on the continue button
      continueBtn.click();
      console.log("SignIN completed!");
   })
   .catch(function (error) {
      console.log("Error ", error);
   });

输出

如何使用Selenium Web Driver和JavaScript登录任何网站

在上面的输出中，用户可以观察到首先打开一个浏览器窗口，然后打开URL，填写凭据到输入框并点击提交按钮。

用户可以在控制台中观察到以下消息。

如何使用Selenium Web Driver和JavaScript登录任何网站

示例

在下面的示例中，我们使用Selenium WebDriver自动化登录到’https://dev.to/enter’网站。我们使用’user_email’ id找到了用户名字段，使用’user_password’字段找到了密码字段。

在测试下面的代码时，用户需要确保在’dev.to’网站上有一个帐户。请确保将替换为您的电子邮件，将替换为您的密码。

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_username>");
      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 continue button
      let continueButton = browserTab.findElement(
         seleniumDriver.By.css(".crayons-btn.crayons-btn--l")
      );
      return continueButton;
   })
   .then((continueBtn) => {

      // click on the continue button
         continueBtn.click();
         console.log("SignIN completed!");
      })
      .catch(function (error) {
         console.log("Error ", error);
      });