資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用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驅動程式。
2K+ 瀏覽量
