使用 Selenium WebDriver 自動化您的功能測試

本文適用於希望花更少時間測試其 Web 應用程序前端但仍希望確保每個功能都能正常工作的 Web 開發人員。 它將通過使用 Selenium WebDriver 自動執行重複的在線任務來節省您的時間。 您將找到自動化和測試 WordPress 登錄功能的分步示例，但您也可以將該示例改編為任何其他登錄表單。

什麼是硒，它對您有何幫助？

Selenium 是一個用於 Web 應用程序自動化測試的框架。 使用 Selenium，您基本上可以自動執行瀏覽器中的每項任務，就好像真人要執行任務一樣。 用於向不同瀏覽器發送命令的接口稱為 Selenium WebDriver。 該接口的實現適用於所有主流瀏覽器，包括 Mozilla Firefox、Google Chrome 和 Internet Explorer。

使用 Selenium WebDriver 自動化您的功能測試

您是哪種類型的 Web 開發人員？ 您是在每次部署後測試 Web 應用程序的所有關鍵功能的紀律嚴明的類型嗎？ 如果是這樣，您可能會對這種重複測試所消耗的時間感到惱火。 或者你是那種不關心測試關鍵特性並且總是認為“我應該測試更多，但我更願意開發新東西”的類型。 如果是這樣，您可能只是偶然發現錯誤，或者當您的客戶或老闆抱怨它們時。

在德國某知名網店工作了很長時間，我一直屬於第二類：想到網店的新功能太激動了，完全不喜歡去每次部署新軟件後，再次覆蓋所有以前的功能。 因此，該策略或多或少是希望所有關鍵功能都能正常工作。

有一天，我們的轉化率嚴重下降，並開始挖掘我們的網絡分析工具來尋找這種下降的根源。 我們花了很長時間才發現自上次軟件部署以來我們的結帳無法正常工作。

那天我開始做一些關於自動化我們的 Web 應用程序測試過程的研究，我偶然發現了 Selenium 和它的 WebDriver。 Selenium 基本上是一個允許您自動化 Web 瀏覽器的框架。 WebDriver 是關鍵接口的名稱，它允許您向所有主要瀏覽器（移動和桌面）發送命令並像真實用戶一樣使用它們。

使用 Selenium WebDriver 準備第一個測試

首先，我有點懷疑 Selenium 是否適合我的需求，因為該框架是 Java 中最常用的，而且我當然不是 Java 專家。 後來，我了解到作為 Java 專家並不一定要利用 Selenium 框架的強大功能。

作為一個簡單的第一個測試，我測試了我的一個 WordPress 項目的登錄。 為什麼選擇 WordPress？ 僅僅因為使用 WordPress 登錄表單是一個示例，每個人都可以比我參考一些自定義 Web 應用程序更容易遵循。

開始使用 Selenium WebDriver 需要什麼？ 因為我決定使用 Java 中最常見的 Selenium 實現，所以我需要設置我的小型 Java 環境。

如果您想效仿我的示例，可以使用您選擇的 Java 環境。 如果您還沒有設置，我建議您安裝 Eclipse 並確保您能夠在 Java 中運行一個簡單的“Hello world”腳本。

因為我想在 Chrome 中測試登錄，所以我確保 Chrome 瀏覽器已經安裝在我的機器上。 這就是我在準備中所做的一切。

下載 Chrome 驅動程序

所有主流瀏覽器都提供自己的 WebDriver 接口實現。 因為想在 Chrome 中測試 WordPress 登錄，所以需要獲取 Chrome 的 WebDriver 實現：ChromeDriver。

我提取了 ZIP 存檔並將可執行文件chromedriver.exe存儲在我以後可以記住的位置。

在 Eclipse 中設置我們的 Selenium 項目

對於經常使用 Java 和 Eclipse 的人來說，我在 Eclipse 中採取的步驟可能是非常基本的。 但是對於像我這樣對此不太熟悉的人，我將介紹各個步驟：

1. 打開 Eclipse。
2. 單擊“新建”圖標。
   

   

3. 選擇嚮導以創建一個新的“Java 項目”，然後單擊“下一步”。
   

   

4. 為您的項目命名，然後單擊“完成”。
   

   

5. 現在您應該在屏幕左側看到您的新 Java 項目。
   

   

將 Selenium 庫添加到我們的項目中

現在我們有了我們的 Java 項目，但是 Selenium 仍然缺失。 所以，接下來，我們需要將 Selenium 框架引入到我們的 Java 項目中。 以下是我採取的步驟：

1. 下載最新版本的 Java Selenium 庫。
   

   

2. 提取存檔，並將文件夾存儲在您可以輕鬆記住的位置。
3. 返回 Eclipse，然後轉到“項目”→“屬性”。
   

   

4. 在對話框中，轉到“Java Build Path”，然後註冊“Libraries”。
5. 單擊“添加外部 JAR”。
   

   

6. 使用 Selenium 庫導航到剛剛下載的文件夾。 突出顯示所有.jar文件並單擊“打開”。
   

   

7. 對子文件夾libs中的所有.jar文件也重複此操作。
8. 最終，您應該會在項目的庫中看到所有.jar文件：
   

   

而已！ 到目前為止，我們所做的一切都是一次性的任務。 您現在可以將此項目用於所有不同的測試，並且您無需再次為每個測試用例執行整個設置過程。 有點整潔，不是嗎？

創建我們的測試類並讓它打開 Chrome 瀏覽器

現在我們有了 Selenium 項目，但接下來呢？ 為了看看它是否有效，我想嘗試一些非常簡單的方法，比如打開我的 Chrome 瀏覽器。

為此，我需要創建一個新的 Java 類，我可以從中執行我的第一個測試用例。 在這個可執行類中，我複制了幾行 Java 代碼，不管你信不信，它成功了！ 神奇的是，Chrome 瀏覽器打開了，幾秒鐘後又自行關閉了。

自己試試：

1. 再次單擊“新建”按鈕（當您在新項目的文件夾中時）。
   

   

2. 選擇“類”嚮導，然後單擊“下一步”。
   

   

3. 為您的類命名（例如，“RunTest”），然後單擊“完成”。
   

   

4. 將新類中的所有代碼替換為以下代碼。 您唯一需要更改的是計算機上chromedriver.exe的路徑：
   

    import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Waiting a bit before closing Thread.sleep(7000); // Closing the browser and WebDriver webDriver.close(); webDriver.quit(); } }

5. 保存您的文件，然後單擊播放按鈕運行您的代碼。
   

   

6. 如果您已正確完成所有操作，代碼應該會打開一個新的 Chrome 瀏覽器實例並在此後不久將其關閉。
   

   

測試 WordPress 管理員登錄

現在我很樂觀，我可以自動化我的第一個小功能測試。 我希望瀏覽器導航到我的一個 WordPress 項目，登錄到管理區域並驗證登錄是否成功。 那麼，我需要查找哪些命令？

1. 導航到登錄表單，
2. 找到輸入字段，
3. 在輸入字段中輸入用戶名和密碼，
4. 點擊登錄按鈕，
5. 比較當前頁面的標題，看看是否登錄成功。

同樣，在我對代碼完成所有必要的更新並單擊 Eclipse 中的運行按鈕後，我的瀏覽器開始通過 WordPress 登錄神奇地自行運行。 我成功運行了我的第一個自動化網站測試！

如果您想自己嘗試，請將 Java 類的所有代碼替換為以下內容。 之後我將詳細介紹代碼。 在執行代碼之前，您必須將四個值替換為您自己的值：

1. 您的chromedriver.exe文件的位置（如上），

2. 您要測試的 WordPress 管理員帳戶的 URL，

3. WordPress用戶名，

4. WordPress 密碼。

然後，保存並讓它再次運行。 它將打開 Chrome，導航到您的 WordPress 網站的登錄名，登錄並檢查當前頁面的h1標題是否為“儀表板”。

 import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Maximize the browser window webDriver.manage().window().maximize(); if (testWordpresslogin()) { System.out.println("Test Wordpress Login: Passed"); } else { System.out.println("Test Wordpress Login: Failed"); } // Close the browser and WebDriver webDriver.close(); webDriver.quit(); } private static boolean testWordpresslogin() { try { // Open google.com webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); // Type in the username webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); // Type in the password webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD"); // Click the Submit button webDriver.findElement(By.id("wp-submit")).click(); // Wait a little bit (7000 milliseconds) Thread.sleep(7000); // Check whether the h1 equals “Dashboard” if (webDriver.findElement(By.tagName("h1")).getText() .equals("Dashboard")) { return true; } else { return false; } // If anything goes wrong, return false. } catch (final Exception e) { System.out.println(e.getClass().toString()); return false; } } }

如果您已正確完成所有操作，您在 Eclipse 控制台中的輸出應如下所示：

了解代碼

因為您可能是一名 Web 開發人員，並且至少對其他編程語言有基本的了解，所以我相信您已經掌握了代碼的基本思想：我們為調用的特定測試用例創建了一個單獨的方法testWordpressLogin 。我們的主要方法。

根據方法返回 true 還是 false，您將在控制台中獲得一個輸出，告訴您此特定測試是通過還是失敗。

這不是必需的，但這樣您可以輕鬆地向此類添加更多測試用例，並且仍然具有可讀代碼。

現在，一步一步，這是我們的小程序中發生的事情：

1. 首先，我們告訴我們的程序在哪裡可以找到 Chrome 的特定 WebDriver。
   

    System.setProperty("webdriver.chrome.driver","C:/PATH/TO/chromedriver.exe");

2. 我們打開 Chrome 瀏覽器並最大化瀏覽器窗口。
   

    webDriver = new ChromeDriver(); webDriver.manage().window().maximize();

3. 這是我們跳入我們的子方法並檢查它是否返回真或假的地方。
   

    if (testWordpresslogin()) …

4. 我們的子方法中的以下部分可能不直觀理解：
   try{…}catch{…}塊。 如果一切按預期進行，則只會執行try{…}中的代碼，但如果在執行try{…}時出現任何問題，則繼續執行catch{} 。 每當您嘗試使用findElement定位元素並且瀏覽器無法定位該元素時，它會拋出異常並執行catch{…}中的代碼。 在我的示例中，只要出現問題並執行catch{} ，測試就會被標記為“失敗”。
5. 在子方法中，我們首先導航到我們的 WordPress 管理區域並通過查找用戶名和密碼的 ID 來定位用戶名和密碼的字段。 此外，我們在這些字段中輸入給定的值。
   

    webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD");

   
   

   

6. 填寫登錄表單後，我們通過其 ID 找到提交按鈕並單擊它。
   

    webDriver.findElement(By.id("wp-submit")).click();

7. 為了直觀地跟踪測試，我在此處加入了 7 秒的暫停（7000 毫秒 = 7 秒）。
   

    Thread.sleep(7000);

8. 如果登錄成功，當前頁面的h1標題現在應該是“Dashboard”，指的是 WordPress 管理區域。 因為h1標題應該在每個頁面上只存在一次，所以我在這裡使用了標籤名稱來定位元素。 在大多數其他情況下，標籤名稱不是一個好的定位器，因為 HTML 標籤名稱在網頁上很少是唯一的。 找到h1後，我們使用getText()提取元素的文本，並檢查它是否等於字符串“Dashboard”。 如果登錄不成功，我們將找不到“Dashboard”作為當前的h1 。 因此，我決定使用h1來檢查登錄是否成功。
   

    if (webDriver.findElement(By.tagName("h1")).getText().equals("Dashboard")) { return true; } else { return false; } 

   
   

   

9. 如果子方法的前一部分出現任何問題，程序將直接跳轉到下一部分。 catch塊將打印發生在控制台上的異常類型，然後將false返回給 main 方法。
   

    catch (final Exception e) { System.out.println(e.getClass().toString()); return false; }

調整測試用例

如果您想調整和添加自己的測試用例，這就是有趣的地方。 你可以看到我們總是調用webDriver對象的方法來對 Chrome 瀏覽器做一些事情。

首先，我們最大化窗口：

 webDriver.manage().window().maximize();

然後，在一個單獨的方法中，我們導航到我們的 WordPress 管理區域：

 webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");

我們可以使用webDriver對象的其他方法。 除了以上兩個，你可能會經常使用這個：

 webDriver.findElement(By. …)

findElement方法幫助我們在 DOM 中找到不同的元素。 有不同的選項來查找元素：

• By.id
• By.cssSelector
• By.className
• By.linkText
• By.name
• By.xpath

如果可能，我建議使用By.id因為元素的 ID 應該始終是唯一的（例如，與className不同），並且如果 DOM 的結構發生更改，它通常不會受到影響（例如，與xPath不同） .

注意：您可以在此處閱讀有關使用 WebDriver 定位元素的不同選項的更多信息。

一旦您使用findElement方法獲得了一個元素，您就可以調用該元素的不同可用方法。 最常見的是sendKeys 、 click和getText 。

我們使用sendKeys來填寫登錄表單：

 webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");

我們已經使用click通過單擊提交按鈕來提交登錄表單：

 webDriver.findElement(By.id("wp-submit")).click();

並且getText已用於在單擊提交按鈕後檢查h1中的文本：

 webDriver.findElement(By.tagName("h1")).getText()

注意：請務必檢查可用於元素的所有可用方法。

結論

自從我發現 Selenium WebDriver 的強大功能後，我作為 Web 開發人員的生活就發生了變化。 我只是喜歡它。 我越深入這個框架，我發現的可能性就越多——在 Chrome、Internet Explorer 和 Firefox 甚至我的智能手機上同時運行一個測試，或者自動截取不同頁面的屏幕截圖並進行比較。 今天，我使用 Selenium WebDriver 不僅用於測試目的，還用於自動化網絡上的重複性任務。 每當我看到有機會在 Web 上自動化我的工作時，我只需複制我最初的 WebDriver 項目並將其調整到下一個任務。

如果您認為 Selenium WebDriver 適合您，我建議您查看 Selenium 的文檔以了解 Selenium 的所有可能性（例如使用 Selenium Grid 在多個（移動）設備上同時運行任務）。

我期待聽到您是否發現 WebDriver 和我一樣有用！