Selenium IDE - JavaScript 函式

---

---

Selenium IDE 可用於執行 JavaScript 命令，以使用 Target 欄位與頁面上瀏覽器中出現的元素進行互動。有時，Selenium WebDriver 中可用的定位器無法與頁面上的元素進行互動，在這些情況下，我們可以藉助 JavaScript 函式。

執行 JavaScript 函式的基本命令

執行指令碼命令

此命令用於在當前活動的視窗或框架中執行 JavaScript。它是一個匿名函式，支援各種資料型別，例如 WebElements、Long、String、Lists 和 Boolean。為了將 JavaScript 的返回值儲存在變數中，使用 return 關鍵字。

執行非同步指令碼命令

這是一種多執行緒方法，用於在當前活動的視窗或框架中執行單個 JavaScript 任務。它允許頁面解析繼續進行，從而最佳化效能並提供更大的靈活性。此方法能夠以最佳方式執行非同步 JavaScript。

執行指令碼命令

此命令允許從 Selenium IDE 執行 JavaScript 函式。

示例 1

讓我們使用 JavaScript 函式在下面的網頁上建立一個警報 - Tutorialspoint

以下是需要遵循的步驟：

步驟 1 - 點選安裝後在瀏覽器上顯示的 Selenium IDE 擴充套件程式。

步驟 2 - Selenium IDE 應該啟動，並顯示包含工具版本的歡迎訊息。在下圖中，安裝的版本是 3.17.2。

此外，它還提供選擇我們想用該工具做什麼的選項，例如在新專案中記錄新測試、開啟現有專案、建立新專案和關閉 Selenium IDE。

此外，還提供了一個帶有文字“Selenium IDE 專案頁面”的連結，單擊該連結後，我們將進入 Selenium 整合開發環境文件頁面。

https://www.selenium.dev/selenium-ide/.

步驟 3 - 點選“建立新專案”連結，然後在“請輸入新專案的名稱”下輸入專案名稱，例如 Test11。最後，我們將點選“確定”按鈕。

步驟 4 - 我們現在在 Selenium IDE 中擁有了工作區。

步驟 5 - 在“命令”欄位中輸入 open，在“目標”欄位中輸入 https://tutorialspoint.tw/selenium/，以啟動應用程式。

步驟 6 - 在“命令”欄位中輸入 execute script，在“目標”欄位中輸入 alert("Tutorialspoint")。

步驟 7 - 在“命令”欄位中輸入 close 以關閉瀏覽器視窗。

步驟 8 - 點選左窗格中顯示的三個點，然後選擇“重新命名”選項。

步驟 9 - 在“重新命名測試用例”欄位中輸入名稱，例如 Test11，然後點選“重新命名”。輸入的名稱將出現在 Selenium IDE 的左側。

步驟 10 - 點選頂部的“執行所有測試”，然後等待測試執行完成。在我們的示例中，我們將看到“執行：1”、“失敗：0”以及一個綠色條，表示測試成功執行且沒有任何失敗。此外，“日誌”下還顯示了成功完成的訊息。

在上例中，我們啟動了應用程式，使用 Selenium IDE 中的 JavaScript 函式和 execute script 命令建立了一個帶有文字“Tutorialspoint”的警報。

除此之外，所有測試步驟以及測試用例名稱都變為綠色，反映所有步驟均透過。所有在“日誌”選項卡下顯示的步驟都顯示為綠色的“OK”。

示例 2

讓我們再舉一個關於以下頁面的例子，在這個例子中，我們將訪問文字“Selenium - Automation Practice”，並檢索在“姓名：”標籤旁邊的輸入框中輸入的值“Selenium”。

以下是需要遵循的步驟：

步驟 1 - 按照示例 1 中的步驟 1 到 5 進行操作。

步驟 2 - 在“命令”欄位中輸入 execute script，在“目標”欄位中輸入 return document.getElementsByTagName('h1')[0].innerHTML，在“值”欄位中輸入 value。

請注意，document.getElementsByTagName('h1')[0] 是文字“Selenium - Automation Practice Form”的定位器值。

步驟 3 - 在“命令”欄位中輸入 echo，在“目標”欄位中輸入 ${value}。請注意，這將在 Selenium IDE 的“日誌”中列印我們在步驟 2 中訪問的文字。

步驟 4 - 在“命令”欄位中輸入 type，在“目標”欄位中輸入 id=name，在“值”欄位中輸入 Selenium。請注意，id=name 是輸入框的定位器值。

步驟 5 - 在“命令”欄位中輸入 execute script，在“目標”欄位中輸入 return document.getElementById('name').value，在“值”欄位中輸入 valueEntered。

請注意，document.getElementById('name') 是輸入框的定位器值。

步驟 6 - 在“命令”欄位中輸入 echo，在“目標”欄位中輸入 ${valueEntered}。請注意，這將在 Selenium IDE 的“日誌”中列印我們在步驟 4 中輸入的文字。

步驟 7 - 在“命令”欄位中輸入 close 以關閉瀏覽器視窗。

步驟 8 - 點選頂部的“執行所有測試”，然後等待測試執行完成。在我們的示例中，我們將看到“執行：1”、“失敗：0”以及一個綠色條，表示測試成功執行且沒有任何失敗。此外，“日誌”下還顯示了成功完成的訊息。

在上例中，我們啟動了應用程式，並使用 JavaScript 命令“return document.getElementsByTagName('h1')[0].innerHTML”訪問了文字“Selenium - Automation Practice Form”。然後使用 JavaScript 命令“return document.getElementById('name').value”獲取輸入框中輸入的值。

除此之外，所有測試步驟以及測試用例名稱都變為綠色，反映所有步驟均透過。所有在“日誌”選項卡下顯示的步驟都顯示為綠色的“OK”。

示例 3

讓我們再舉一個關於以下頁面的例子，在這個例子中，我們將使用 JavaScript 函式和 Selenium IDE 中的 run script 命令停用“全名：”標籤旁邊的輸入框。在原始狀態下，輸入框如下面的圖片所示。

停用後，輸入框將如下面的圖片中突出顯示的元素一樣，如果我們嘗試向該停用的欄位中新增一些文字，我們將遇到錯誤。

以下是需要遵循的步驟：

步驟 1 - 按照示例 1 中的步驟 1 到 5 進行操作。

步驟 2 - 在“命令”欄位中輸入 run script，在“目標”欄位中輸入 document.getElementsByName('fullname')[0].setAttribute('disabled', '')。

請注意，document.getElementsByName('fullname')[0] 是輸入框的定位器值。

步驟 3 − 在“命令”欄位中輸入 type，在“目標”欄位中輸入 id=fullname，在“值”欄位中輸入 Selenium。請注意，id=fullname 是輸入框的定位器值。

步驟 4 − 點選頂部的“執行所有測試”，然後等待測試執行完成。在我們的示例中，我們將看到執行次數：1，失敗次數：1，以及一條紅色條表示測試由於嘗試在停用的輸入框中輸入文字而執行失敗。此外，錯誤訊息 - 元素當前不可互動，可能無法操作 出現在 type 命令的日誌下。

示例 4

讓我們來看另一個相同頁面的示例，我們將首先停用全名：標籤旁邊的輸入框，然後使用 JavaScript 函式和 Selenium IDE 中的指令碼命令啟用它。我們還將重新整理網頁，並在瀏覽器中藉助 JavaScript 函式和執行指令碼命令進行前後導航。

以下是需要遵循的步驟：

步驟 1 - 按照示例 1 中的步驟 1 到 5 進行操作。

步驟 2 - 在“命令”欄位中輸入 run script，在“目標”欄位中輸入 document.getElementsByName('fullname')[0].setAttribute('disabled', '')。

請注意，document.getElementsByName('fullname')[0] 是輸入框的定位器值。

步驟 3 − 在“命令”欄位中輸入 run script，在“目標”欄位中輸入 document.getElementsByName('fullname')[0].removeAttribute('disabled')。

請注意，document.getElementsByName('fullname')[0] 是輸入框的定位器值。

步驟 4 − 在“命令”欄位中輸入 type，在“目標”欄位中輸入 id=fullname，在“值”欄位中輸入 Selenium。請注意，id=fullname 是輸入框的定位器值。

步驟 5 − 在“命令”欄位中輸入 execute script，在“目標”欄位中輸入 history.go[0] 以重新整理瀏覽器。

步驟 6 − 在“命令”欄位中輸入 open，在“目標”欄位中輸入 https://tutorialspoint.tw/selenium/practice/links.php，以啟動另一個應用程式。

步驟 7 − 在“命令”欄位中輸入 execute script，在“目標”欄位中輸入 window.history.go(-1) 以返回瀏覽器歷史記錄。

步驟 8 − 在“命令”欄位中輸入 store title，在“值”欄位中輸入 val。請注意，頁面標題儲存在變數 val 中。

步驟 9 − 在“命令”欄位中輸入 echo，在“目標”欄位中輸入 ${val}。請注意，這將在 Selenium IDE 的日誌下在網頁上列印我們在步驟 8 中獲得的頁面標題。

步驟 10 − 在“命令”欄位中輸入 execute script，在“目標”欄位中輸入 window.history.go(1) 以前進到瀏覽器歷史記錄。

步驟 11 − 在“命令”欄位中輸入 store title，在“值”欄位中輸入 val1。請注意，頁面標題儲存在變數 val1 中。

步驟 12 − 在“命令”欄位中輸入 echo，在“目標”欄位中輸入 ${val1}。請注意，這將在 Selenium IDE 的日誌下在網頁上列印我們在步驟 11 中獲得的頁面標題。

步驟 13 − 在“命令”欄位中輸入 close 以關閉瀏覽器視窗。

步驟 14 − 點選頂部的“執行所有測試”，然後等待測試執行完成。在我們的示例中，我們將看到執行次數：1，失敗次數：0，以及一條綠色條表示測試成功執行且沒有任何失敗。此外，成功完成的訊息也出現在日誌中。

在上面的示例中，我們使用 JavaScript 函式document.getElementsByName('fullname')[0].setAttribute('disabled', '')以及run script命令停用了輸入框，然後使用 JavaScript 函式document.getElementsByName('fullname')[0].removeAttribute('disabled')和run script命令啟用了相同的輸入框。我們還使用 JavaScript 函式：history.go[0]以及execute script命令重新整理了瀏覽器頁面。

我們還分別使用 JavaScript 函式window.history.go(-1)和window.history.go(1)以及execute script命令在瀏覽器歷史記錄中進行了前後導航。此外，我們在測試用例名稱旁邊看到一個綠色勾號，表示測試透過。

本教程到此結束，我們全面介紹了 Selenium IDE - JavaScript 函式。我們首先介紹了一些基本的 Selenium IDE 命令來執行 JavaScript 函式，並透過示例演示瞭如何將 JavaScript 函式與 Selenium IDE 一起使用。這使您能夠深入瞭解 Selenium IDE 中的 JavaScript 函式。最好繼續練習您所學的內容，並探索與 Selenium 相關的其他內容，以加深您的理解並拓寬您的視野。