如何使用Selenium WebDriver和JavaScript登录任何网站?


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

用户需要创建NodeJS应用程序才能将Selenium WebDriver与JavaScript一起使用。

创建NodeJS应用程序

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

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

npm init -y

步骤2 – 现在,在项目目录中输入以下命令,以在项目中安装selenium-webdriver NPM包。

npm install selenium-webdriver 

步骤3 – 用户还需要安装Chrome WebDriver才能将Selenium与Chrome浏览器一起使用。使用以下命令安装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 – 解析Promise。使用CSS选择器查找用户名输入字段。要查找CSS选择器,用户应访问相应的网页。例如,在本例中,请访问“https://practicetestautomation.com/practice-test-login/”网页。

用户将看到以下界面。

之后,右键单击用户名输入字段。它将显示一个菜单,用户需要选择名为“检查”的最后一个选项。

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

在本例中,我们将使用用户名输入字段的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);
   });

输出

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

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

示例

在下面的示例中,我们使用Selenium WebDriver来自动登录“https://dev.to/enter”网站。我们使用“user_email”ID查找用户名字段,使用“user_password”字段查找密码字段。

用户需要确保他们在“dev.to”网站上拥有帐户。测试以下代码时,请确保将<your_username>替换为您的电子邮件,将<your_password>替换为您的密码。

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);
      });

输出

本教程教我们如何使用Selenium WebDriver登录两个网站。Selenium WebDriver对于自动化测试非常有用,它也用于从不同的网站抓取数据。

对于登录自动化,用户需要通过CSS选择器查找输入字段,并需要使用Selenium WebDriver发送键。最后,用户需要使用click()方法单击登录按钮。如果用户想将Selenium WebDriver与Firefox一起使用,则应安装Firefox驱动程序而不是Chrome驱动程序。

更新于:2023年3月7日

2K+ 浏览量

启动您的职业生涯

完成课程获得认证

开始学习
广告