使用Playwright對Java API實現自動視覺測試 - applitools

banq發表於2021-01-30
JavaAPI視覺APP

微軟新的端到端瀏覽器自動化框架Playwright引起了轟動！僅在幾個月前，我才試玩了Playwright，當時它是一個僅JavaScript的框架，當得知語言支援已經擴充套件到我心愛的Java以及Python和C＃時，我感到非常驚喜。
藉助額外的語言支援以及跨現代瀏覽器引擎Chromium，Firefox和WebKit執行的能力，這使Playwright與Selenium WebDriver處於同一類別，成為所有需要交叉測試的Web測試人員（不僅是JS）的可行測試解決方案瀏覽器測試功能，適用於複雜的應用程式。
我喜歡透過實際使用框架來自動化現實場景來評估框架。因此，在本文中，我將與Playwright分享構建測試專案的步驟，其中包括Page Objects，還將Playwright步驟與Selenium WebDriver中的等效步驟進行比較。
 

如何安裝Playwright Java
Playwright入門的第一步是將依賴項新增到您的專案中。您可以從Maven儲存庫中獲得Playwright客戶端。我建立了一個新的pom.xml檔案，並新增了playwright依賴項。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>angie.jones</groupId>
    <artifactId>playwright-java</artifactId>
    <version>1.0-SNAPSHOT</version>

   <dependencies>
       <dependency>
           <groupId>com.microsoft.playwright</groupId>
           <artifactId>playwright</artifactId>
           <version>0.180.0</version>
       </dependency>
   </dependencies>
</project>


像Selenium WebDriver一樣，Playwright是一種瀏覽器自動化工具，不一定限於測試框架。實際上，它們都不提供任何斷言方法。因此，您還需要新增一個斷言庫。對於此示例，我將使用TestNG。

  <dependencies>
       <dependency>
           <groupId>com.microsoft.playwright</groupId>
           <artifactId>playwright</artifactId>
           <version>0.180.0</version>
       </dependency>

       <dependency>
           <groupId>org.testng</groupId>
           <artifactId>testng</artifactId>
           <version>7.3.0</version>
           <scope>test</scope>
       </dependency>
   </dependencies>


 

如何在Playwright中啟動瀏覽器
Playwright 允許您建立特定型別的瀏覽器物件。選項包括Chromium（基於Chrome和Edge），Firefox和WebKit（基於Safari引擎）。使用此Browser 物件，可以使用launch（）方法啟動瀏覽器例項。

package base;

import com.microsoft.playwright.*;
import org.testng.annotations.BeforeClass;

public class BaseTests {

    private Browser browser;

    @BeforeClass
    public void setUp(){
        browser = Playwright
                .create()
                .chromium()
                .launch();
    }
}

預設情況下，Playwright以無頭模式啟動瀏覽器，這意味著您實際上不會看到測試執行。如果您希望瀏覽器開啟，則可以透過傳入LaunchOption禁用無頭模式：

.launch(new BrowserType.LaunchOptions().withHeadless(false));


除了設定無頭模式外，LaunchOptions還提供了其他幾種方法，包括設定環境變數和開啟Chromium開發工具的方法。
 

如何在Playwright中啟動網站
現在我們有了瀏覽器，可以載入測試中的應用程式– Automation Bookstore。為此，我們需要一個Page物件–與Selenium中的WebDriver物件相似。要建立Page物件，請在第8行上呼叫browser.newPage（）。它表示瀏覽器視窗中的單個選項卡。有了這個物件，我們就可以導航到我們的URL（第9行）。

  @BeforeClass
    public void setUp(){
        browser = Playwright
                .create()
                .chromium()
                .launch(new BrowserType.LaunchOptions().withHeadless(false));

        Page page = browser.newPage();
        page.navigate("https://automationbookstore.dev/");
    }

 

如何在Playwright中建立頁面物件
 我們已經在瀏覽器中載入了應用程式，現在我們想使用Page Object Model設計模式來建立一個Java類，該Java類代表應用程式的Search頁面。
為了與Web元素進行互動，Page Object類將需要訪問我們在上面建立的Playwright Page物件。同樣，這與我們將Selenium WebDriver物件傳遞給Page Object類以便它們可以執行瀏覽器互動方法的方式類似。

Page page = browser.newPage();
        page.navigate("https://automationbookstore.dev/");
        SearchPage searchPage = new SearchPage(page);
package pages;

import com.microsoft.playwright.Page;

public class SearchPage {

    private Page page;
  
    public SearchPage(Page page){
        this.page = page;
    }
}


我要新增到此類的第一個方法是search（），它將接收文字並將其輸入到文字欄位中。這樣做的方法是fill（），它使用一個定位符和您想要輸入的文字到欄位中。您可以在第11行看到呼叫。

public class SearchPage {

    private Page page;
    private String locator_searchBar = "searchBar";

    public SearchPage(Page page){
        this.page = page;
    }

    public void search(String query) {
        page.fill(locator_searchBar, query);
    }
}


更多點選標題見原文

 

相關文章