如何使用 Selenium Web 驱动程序和 JavaScript 登录任何网站?
如今，自动化对于测试应用程序非常有用。有许多自动化工具可用，Selenium 就是其中之一，于 2004 年开发。此外，它是一个跨平台工具，因此我们可以将 Selenium 与大多数编程语言一起使用，在这里我们将它与 JavaScript 一起使用。
用户需要创建 NodeJS 应用程序才能将 Selenium Web 驱动程序与 JavaScript 一起使用。
创建 NodeJS 应用程序
用户可以按照以下步骤创建 NodeJS 应用程序。
步骤 1 – 在终端中打开项目目录并输入以下命令。
npm init -y
步骤 2 – 现在，在项目目录中输入以下命令以在项目中安装 seleniumwebdriver NPM 包。
npm install selenium-webdriver
步骤 3 – 用户还需要安装 chrome web driver 才能将 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 – 解决承诺。使用 CSS 选择器找到用户名输入字段。要找到 CSS 选择器，用户应该转到受尊重的网页。例如，在我们的例子中，转到"https://practicetestautomation.com/practice-test-login/"网页。
用户将看到下面的界面。
之后，右键单击用户名输入字段。它将显示一个菜单，用户需要在菜单中选择名为"检查"的最后一个选项。
它将打开 chrome 开发者工具。在此，用户需要找到元素并获取其 id 或类名。
在我们的例子中，我们将使用用户名输入字段的 id 作为 CSS 选择器。这里，用户名字段的 id 是"用户名"。
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 秒，以克服连接速度慢的问题。
之后，我们使用承诺链来获取用户名，将密钥发送给用户名，获取密码输入，将密钥发送给密码，找到登录按钮，然后单击登录按钮。
// 导入 chrome 驱动程序
require("chromedriver");
// 导入 selenium webdriver
let seleniumDriver = require("selenium-webdriver");
// 获取浏览器实例
let seleniumBuilder = new seleniumDriver.Builder();
let browserTab = seleniumBuilder.forBrowser("chrome").build();
// 打开浏览器
let browserWindow =
browserTab.get("https://practicetestautomation.com/practice-testlogin/");
// 解析承诺
browserWindow
.then(function () {
// 设置连接延迟的超时时间
let timeOut = browserTab.manage().setTimeouts({
implicit: 5000,
});
return timeOut;
})
.then(() => {
// 获取用户输入框
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 web 驱动程序自动登录"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!");
// 获取继续按钮
let continueButton = browserTab.findElement(
seleniumDriver.By.css(".crayons-btn.crayons-btn--l")
);
return continueButton;
})
.then((continueBtn) => {
// 点击继续按钮
continueBtn.click();
console.log("SignIN completed!");
})
.catch(function (error) {
console.log("Error ", error);
});
输出
本教程教我们使用 Selenium web 驱动程序登录两个网站。Selenium web 驱动程序对于自动化测试非常有用，而且它还用于从不同的网站抓取数据。
对于登录自动化，用户需要通过 CSS 选择器找到输入字段，并使用 selenium webdriver 发送密钥。最后，用户需要使用 click() 方法单击登录按钮。如果用户想要将 selenium webdriver 与 Firefox 一起使用，他们应该安装 Firefox 驱动程序而不是 Chrome 驱动程序。
