如何使用 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 驱动程序。