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