硒化物簡介

一、簡介

在本文中，我們將了解用於 UI 自動化測試的Selenide項目。我們將了解它是什麼以及如何使用它來測試我們的 UI 項目。

2.什麼是硒化物？

Selenide 是一個構建在 Selenium WebDriver 之上的免費開源框架。它使我們能夠使用 Selenium 的所有功能來對我們的網絡應用程序執行自動化測試。儘管如此，它還是被大大簡化了，這樣我們就可以只關注重要的事情。

特別是，Selenide 將簡化所有 Web 瀏覽器的管理。如果測試失敗，它還會自動截取瀏覽器窗口的屏幕截圖。然後，它為我們提供了一個更加簡化的 API，用於與 Web 瀏覽器交互，包括一些無法從 Selenium 直接獲得的功能，並簡化了其他可用的功能。

3. 入門

讓我們快速看一下使用 Selenide 的簡單示例。

3.1. Maven 依賴項

在我們做任何事情之前，我們需要將 Selenide 添加到我們的項目中。這是我們可以添加到構建中的單個依賴項：

<dependency>
 <groupId>com.codeborne</groupId>
 <artifactId>selenide</artifactId>
 <version>6.15.0</version>
 <scope>test</scope>
 </dependency>

最新版本可以在Maven Central Repository中找到。

這將自動引入所有必要的內容，包括適當版本的 Selenium WebDriver。

我們還需要一個可用的測試框架——例如 JUnit。這將用於像往常一樣編寫我們的測試，Selenide 只是我們可以在測試代碼中使用的另一個庫。

3.2.我們的第一次測試

現在我們已經設置了依賴項，讓我們編寫一個測試。我們將進行一次檢查，以檢查 Baeldung 是否確實是搜索引擎搜索時的第一個命中結果。

我們首先想要的是一些進口產品。我們不需要這些，但它們更容易閱讀代碼：

import static com.codeborne.selenide.Selenide.*;
 import static com.codeborne.selenide.Condition.*;
 import org.openqa.selenium.By;

現在我們可以編寫我們的測試：

@Test
 public void searchBaeldung() throws Exception {
 open("https://duckduckgo.com/");

 SelenideElement searchbox = $(By.id("searchbox_input"));
 searchbox.click();
 searchbox.sendKeys("Baeldung");
 searchbox.pressEnter()

 SelenideElement firstResult = $(By.id("r1-0"));
 firstResult.shouldHave(text("Baeldung"));
 }

首先要注意的是這裡的東西有多麼少。我們對瀏覽器管理、等待加載或任何其他通常使這些測試變得如此復雜的事情一無所知。相反，我們在這裡看到的一切都與相關測試直接相關。

我們首先打開我們的網頁。然後我們點擊搜索框，輸入搜索詞，然後按 Enter 鍵。最後，我們找到第一個結果（我們從頁面的 HTML 中知道r1-0是賦予第一個結果的 ID）並確保它具有預期的文本。

我們在這裡看到的$()符號是我們查詢瀏覽器頁面的方法。這需要一個選擇器並返回一個SelenideElement表示整個頁面中的第一個匹配元素。我們還有$$()它將返回所有匹配元素的集合。

一旦我們有了SelenideElement ，我們就可以使用相同的模式繼續獲得更具體的信息 - 只是這一次我們使用的是SelenideElement.$和SelenideElement.$$ 。

一旦我們有了SelenideElement ，我們就可以開始與它交互——例如使用click() 、 sendKeys()和pressEnter()等方法。

我們還可以使用should() 、 shouldBe()和shouldHave()來斷言該元素符合我們的預期。這三種方法是相同的，只是為了讓測試讀起來更好而措辭不同 - 例如， firstResult.should(text(“Baeldung”));功能相同，但閱讀效果不佳。

4. 頁面對象

頁面對像是我們可以在 UI 測試中使用的有用模式。這涉及編寫類來封裝整個網頁或其部分。然後我們可以在測試中使用這些對象。這樣做的好處是，如果我們更改頁面的工作方式，我們會更改單個頁面對象，並且使用它的每個測試都會自動正確。

毫不奇怪，Selenide 允許我們像 Selenium WebDriver 一樣輕鬆地使用頁面對像模式。我們可以根據需要編寫直接使用 Selenide 類的類。要么使用$ static 方法，它允許我們與整個頁面交互，要么通過包裝代表頁面較小部分的SelenideElement值。

讓我們使用此模式重寫原始測試，看看它是什麼樣子。首先，我們需要一個頁面模型來表示搜索表單：

public class SearchFormPage {
 public void open() {
 Selenide.open("http://duckduckgo.com/");
 }

 public void search(String term) {
 SelenideElement searchbox = $(By.id("searchbox_input"));
 searchbox.click();
 searchbox.sendKeys(term);
 searchbox.pressEnter();
 }
 }

我們可以使用兩種方法 - 一種打開搜索頁面，另一種實際執行對提供的術語的搜索。

接下來，我們需要一個頁面模型來表示搜索結果頁面：

public class SearchResultsPage {
 public SearchResult getResult(int index) {
 SelenideElement result = $(By.id("r1-" + index));
 result.shouldBe(visible);

 return new SearchResult(result);
 }
 }

這為我們提供了訪問單個結果的單一方法。這將返回另一個頁面對象，這次在頁面中包裝單個SelenideElement ：

public class SearchResult {
 private SelenideElement result;

 public SearchResult(SelenideElement result) {
 this.result = result;
 }

 public String getText() {
 return result.getText();
 }
 }

然後，該頁面對象包裝該SelenideElement並允許我們與其精確交互。在本例中，通過從搜索結果中獲取文本。

現在我們可以實際編寫一個測試：

@Test
 public void searchBaeldung() {
 SearchFormPage searchFormPage = new SearchFormPage();
 searchFormPage.open();
 searchFormPage.search("Baeldung");

 SearchResultsPage results = new SearchResultsPage();

 SearchResult firstResult = results.getResult(0);
 assertTrue(firstResult.getText().contains("Baeldung"));
 }

該測試與以前相同，但我們現在用類來編寫它，以便更好地解釋正在發生的事情。這樣做的好處是，對於那些不確切知道 HTML 是如何呈現的人來說，測試更具可讀性。

它還使我們能夠輕鬆更改頁面的交互方式。例如，如果查找單個搜索結果的方法要更改，那麼我們必須更改此處的getResult()方法，而不是單獨更改許多不同的測試。

5. 測試失敗

當我們編寫測試時，一個重要的細節是能夠輕鬆識別測試失敗的原因。如果沒有這一點，我們就可以花費大量精力來找出問題所在。

讓我們嘗試更改原始測試，使其失敗。我們將通過調整它來搜索錯誤的術語來做到這一點：

SelenideElement searchbox = $(By.id("searchbox_input"));
 searchbox.click();
 searchbox.sendKeys("Something Else");
 searchbox.pressEnter();

運行這個測試顯然會失敗——搜索“Something Else”不會發現 Baeldung 作為第一個結果。但失敗時會是什麼樣子呢？

毫不奇怪，失敗在於我們的第一個斷言：

但實際的錯誤是什麼樣的呢？

由此，我們可以立即看到我們斷言的確切 HTML 元素，以及它的確切值。在本例中，我們對文本內容進行斷言，因此這就是我們所看到的。

但還有更多。我們已經捕獲了屏幕截圖和頁面源文件。我們可以打開這些來查看發生錯誤時網頁的確切狀態：

立即查看此屏幕截圖，我們可以看到我們搜索了錯誤的內容，因此我們得到了錯誤的搜索結果。這可以幫助我們輕鬆識別問題並修復測試。

或者，它實際上可能會強調應用程序未按預期運行。在這種情況下，測試很好，但在我們的代碼中發現了回歸。

6. 配置Selenide

我們剛剛看到 Selenide 保存失敗測試的屏幕截圖。但它需要知道將屏幕截圖放在哪裡。

Selenide 具有開箱即用的合理默認行為。例如，我們的屏幕截圖默認存儲在build/reports/tests中。

然而，這些默認值並不總是適用於所有情況，因此我們必須能夠調整它們。我們可以通過以下三種方式之一來做到這一點：

• 使用屬性文件
• 具有系統屬性
• 以代碼方式編程

我們控制這些設置的最高優先級的方式是在我們的代碼中。我們通過在測試期間更改com.codeborne.selenide.Configuration對象的屬性來實現此目的。這可以直接在測試本身中、在@BeforeEach方法中或在適當時間執行的任何地方。所有這些屬性都有 JavaDoc 準確解釋它們的含義，以便我們可以正確地更改它們。

下一個最高優先級是使用系統屬性。我們可以以標準方式提供這些，就像為運行的測試提供系統屬性一樣。屬性名稱與Configuration類中的字段名稱完全相同，只是帶有“ selenide.”. S ， selenide.reportsFolder對應於Configuration.reportsFolder 。

最後，我們可以在類路徑根目錄下的selenide.properties文件中定義所有這些屬性。例如，在 Maven 項目中，這將位於src/test/resources中。該文件具有與系統屬性完全相同的屬性，但它們存在於項目內，而係統屬性可以從外部指定 - 例如，通過我們的 CI 系統。

這裡需要了解的最重要的屬性是有關如何使用 Web 瀏覽器以及文件存儲位置的屬性。例如，我們可以通過以下方式使用 Firefox 代替 Chrome：

• 以編程方式設置Configuration.browser = “firefox”;在我們的代碼中。
• 將-Dselenide.browser=firefox添加到命令行。
• 將selenide.browser=firefox添加到selenide.properties文件中。

所有這三個都會產生相同的效果。這意味著，例如，作為 CI 構建的一部分，我們可以使用系統屬性方法在各種不同的 Web 瀏覽器上運行完全相同的測試。

七、結論

在這裡，我們了解了 Selenide 庫以及如何使用它來編寫 UI 自動化測試。下次你進行 UI 測試時，為什麼不嘗試一下呢？

與往常一樣，我們可以在 GitHub 上找到本文中的所有代碼。