如何在 JavaScript 中使用 Selenium 自動化瀏覽器測試
自動化瀏覽器測試對於任何 Web 開發人員來說都是必須的，以確保他們的應用程式正常運作。在這篇文章中，我們將逐步使用 JavaScript 設定 Selenium，以自動執行簡單的瀏覽器任務：開啟網頁並點擊按鈕。
先決條件
要跟隨，您需要：
-
Node.js 和 npm 已安裝。
-
已安裝 Google Chrome 和 ChromeDriver（或其他瀏覽器及其各自的驅動程式）。
第 1 步：設定您的項目
首先，為您的專案建立一個新資料夾。開啟終端機並運作：
mkdir selenium-test
cd selenium-test
登入後複製
接下來，初始化一個新的 Node.js 專案：
此指令產生一個 package.json 文件，用於追蹤專案的依賴項。
第 2 步：安裝 Selenium WebDriver
我們將使用 npm 安裝 Selenium WebDriver 和 ChromeDriver：
npm install selenium-webdriver chromedriver --save
登入後複製
這些軟體包提供了使用 Selenium 自動化 Chrome 所需的程式庫和工具。
第 3 步：編寫 Selenium 腳本
在專案資料夾中建立一個名為 test.js 的新檔案。此腳本將開啟一個網頁，等待按鈕變為可按一下狀態，然後按一下它。
const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
// Helper function to pause the script
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function runTest() {
// Configure Chrome to suppress unwanted prompts
let options = new chrome.Options();
options.addArguments('--no-default-browser-check', '--no-first-run', '--disable-default-apps', '--disable-infobars');
let driver = await new Builder()
.forBrowser('chrome')
.setChromeOptions(options)
.build();
try {
// Open the target webpage
await driver.get('https://example.com'); // Change this URL to the site you want to test
// Wait for an element to load
await driver.wait(until.elementLocated(By.className('sample-class')), 10000);
console.log('Found element with class "sample-class".');
// Generic wait for 6 seconds to handle any dynamic content
await sleep(6000);
// Wait for the button to be clickable
await driver.wait(until.elementLocated(By.id('sample-button')), 10000);
// Re-locate the button to ensure it’s still in the DOM
let button = await driver.findElement(By.id('sample-button'));
console.log('Button located:', button);
// Click the button
await button.click();
console.log('Button clicked successfully.');
// Wait for the next page or action to load
await driver.wait(until.urlContains('new-page'), 10000);
console.log('Navigation to new page was successful.');
} catch (error) {
console.error('Error during the test:', error);
} finally {
// Always close the browser
await driver.quit();
}
}
runTest();
登入後複製
第 4 步：運行腳本
要執行腳本，請執行：
Chrome 將開啟並執行腳本中定義的操作。觀察控制台中指示每個步驟進度的日誌。
故障排除
-
StaleElementReferenceError：當 DOM 在找到元素後發生變更時，就會發生這種情況。為了避免這種情況，請務必在與元素互動之前重新定位它們。
-
逾時：如果元素載入時間較長，請增加 driver.wait() 中的逾時。
結論
您現在已經有了使用 Selenium 和 JavaScript 進行自動化瀏覽器測試的基本設定。此設定可以輕鬆擴展以包括更複雜的互動、檢查和驗證步驟。
請記住保持驅動程式更新以符合您的瀏覽器版本，並考慮在 CI/CD 環境中使用無頭模式。
如果您想在Azure 中託管它，請查看我的其他帖子：https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure -and -發送電子郵件通知失敗-2aio
測試愉快！
以上是如何使用 JS：使用 Selenium 進行自動化測試的詳細內容。更多資訊請關注PHP中文網其他相關文章！
