作者：京東保險 宋陽

1背景

在車險系統中，對接保司的數量眾多。每當系統有新功能迭代后，基本上各個保司的報價流程都需要進行回歸測試。由于保司數量多，回歸測試的場景也會變得重復而繁瑣，給測試團隊帶來了巨大的工作壓力。

車險投保流程主要通過H5頁面進行，核心功能集中在投保、報價、核保等階段。這些功能的UI自動化測試具有很高的可行性和必要性。通過自動化測試，我們可以完全覆蓋這些核心功能的測試場景，有效地降低手動測試的工作量和錯誤率。

在這種情況下，Playwright自動化測試工具因其跨瀏覽器和平臺的支持、簡潔直觀的API設計以及強大的異步處理能力而成為首選。使用Playwright進行UI自動化測試不僅可以提高測試效率和準確性，還可以幫助測試團隊更好地應對頻繁的功能迭代和回歸測試的挑戰。

?

?

?

圖1.車險自動化測試需解決問題

2工具

Playwright是一個強大的UI自動化測試工具，能夠錄制并自動生成代碼，支持多種主流瀏覽器，包括Chrome、Firefox和Safari，并且適用于Windows、Linux和macOS操作系統，能夠實現跨平臺的自動化測試。同時，Playwright采用Python、C#、Java等編程語言編寫腳本，易于學習和使用。它還提供了豐富的API，可以實現復雜的用戶交互操作，如鍵盤輸入、鼠標操作等，讓自動化測試更加貼近真實用戶行為。

此外，Playwright具備自動等待功能，能夠智能地處理元素加載，提高測試的穩定性和效率。總的來說，Playwright在UI自動化測試領域具有很高的靈活性和實用性。

2.1安裝

安裝Playwright只需要一條pip3安裝命令，如下:

复制    pip3 install playwright

Playwright可以安裝支持的瀏覽器，運行不帶參數的命令將安裝默認瀏覽器，默認會下載chromium內核，firefox以及webkit驅動。

复制    playwright install

3實踐

3.1車險系統

車險系統流程如圖2，其核心功能在于人車信息錄入、線上報價和核保，這些功能的測試點都可以通過PlaywrightUI自動化覆蓋。

?

?

?

圖2.車險系統流程圖

3.2錄制

使用Playwright的錄制功能生成測試用例的代碼。運行"npx playwright codegen --device='iPhone 13'"命令啟動playwright，默認會開啟兩個窗口，左圖為指定的iPhone 13機型瀏覽器，右圖為playwright inspector界面，在瀏覽器頁面進行系統測試，playwright inspector會自動生成記錄瀏覽器操作的代碼，圖3為打開車險首頁的playwright界面。

?

?

?

圖3.playwright界面

在Target選擇生成的代碼語言，默認生成Python，可以換選Java等，如圖4。

?

?

?

圖4.選擇生成語言

選擇好生成的語言后，就可以在瀏覽器中執行測試用例了，圖5中playwright inspector會自動生成在瀏覽器測試用例對應代碼。

?

?

?

圖5.錄制Case

測試完成之后就可以把playwright inspector中生成的代碼拷貝到Idea，添加日志斷言等，進行執行和完善。

复制    import com.microsoft.playwright.*;
    import com.microsoft.playwright.options.*;
    import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
    import java.util.*;

    public class Example {
      public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
          Browser browser = playwright.webkit().launch(new BrowserType.LaunchOptions()
            .setHeadless(false));
          BrowserContext context = browser.newContext(new Browser.NewContextOptions()
            .setDeviceScaleFactor(3)
            .setHasTouch(true)
            .setIsMobile(true)
            .setUserAgent("Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1")
            .setViewportSize(390, 664));
          Page page = context.newPage();
          page.navigate("http://test***");//注入pin
          page.navigate("http://testcar***");//訪問車險測試環境地址
          page.getByText("更換車輛").click();
          page.navigate("http://testcar***");
          page.getByText("更換車輛").click();
          page.getByText("京AL3UVJ").click();
          page.getByText("更換車輛").click();
          page.locator("p").filter(new Locator.FilterOptions().setHasText("晉L613A4")).click();
          page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("查看報價")).click();
          page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("同意").setExact(true)).click();
          page.getByText("知道了").click();
          page.getByText("查看該方案報價").click();
        }
      }
    }

3.3頁面接口響應驗證

Playwright的強大在于支持UI錄制的同時，也提供了接口操作的功能。我們可以結合UI用例執行，對重要接口參數進行獲取和校驗，也可以作為UI用例的參數使用。接口校驗主要用到兩個方法：expect_request和expect_response。expect_request方法會等待匹配的請求并返回，expect_response方法會返回匹配的響應。在車險的一個使用場景為例：代碼在執行點擊更換車輛文本之后，會監聽queryCarHomePage接口的返回，獲取當前用戶所有的車。

复制     page.getByText("更換車輛").click();

     // 監聽響應
     page.onResponse(response -> {
         if (response.url().contains("queryCarHomePage")) {
             String result = new String(response.body(), StandardCharsets.UTF_8);
             JSONObject res = new JSONObject(result);
         
             ObjectMapper mapper = new ObjectMapper();
             JsonNode rootNode = null;
             try {
                 rootNode = mapper.readTree(result);
             } catch (JsonProcessingException e) {
                 throw new RuntimeException(e);
             }

             JsonNode carInfoListNode = rootNode.get("resultData").get("carInfoListDto");
             for (JsonNode carInfo : carInfoListNode) {
                 JsonNode licenseNoNode = carInfo.get("licenseNo");
                 if (licenseNoNode == null) {
                     throw new IllegalArgumentException("licenseNo field not found in carInfoListDto for car " + carInfo);
                 }
                 String licenseNo = licenseNoNode.asText();
                 System.out.println(licenseNo);
             }
         }
         });

3.4基于Playwright的UI自動化測試系統

可見Playwright的自動錄制功能能夠大幅降低生成測試用例的復雜度，UI的自動執行也能夠節省大量回歸測試的時間。當然我們不僅僅滿足于case的錄制和本地手動執行，而更希望能夠在生成case之后，可以定期執行、自動執行錄制的case，并生成能夠直觀反映case執行結果的報告，這樣就可以實現從用例錄制、收集、定期執行到測試效果反饋的完整自動化測試鏈路，實現系統的測試和監控的同時，顯著提升測試的效率，極大節省時間人力成本。所以未來我們預期實現的自動化系統結構如圖6所示，本地錄制case并上傳到數據庫，Playwright定時任務執行case并生成用例執行報告。

?

?

圖6.基于playwright的UI自動化測試系統流程圖

3.5測試Demo

以下擷取Case為Playwright錄制生成代碼和接口相關擴展方法相結合，實現車險首頁切換車輛后報價，并通過獲取該用戶pin下車列表的Demo實例。

复制    public class Example {
        public static void main(String[] args) {
            try (Playwright playwright = Playwright.create()) {
                Browser browser = playwright.webkit().launch(new BrowserType.LaunchOptions()
                        .setHeadless(false));
                BrowserContext context = browser.newContext(new Browser.NewContextOptions()
                        .setDeviceScaleFactor(3)
                        .setHasTouch(true)
                        .setIsMobile(true)
                        .setUserAgent("Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1")
                        .setViewportSize(390, 664));
                Page page = context.newPage();
                page.navigate("http://test***");
                page.navigate("http://testcar***");

                // 監聽響應
                page.onResponse(response -> {
                    if (response.url().contains("queryCarHomePage")) {
                        String result = new String(response.body(), StandardCharsets.UTF_8);
                        JSONObject res = new JSONObject(result);
                        System.out.println(result);

                        ObjectMapper mapper = new ObjectMapper();
                        JsonNode rootNode = null;
                        try {
                            rootNode = mapper.readTree(result);
                        } catch (JsonProcessingException e) {
                            throw new RuntimeException(e);
                        }

                        JsonNode carInfoListNode = rootNode.get("resultData").get("carInfoListDto");
                        for (JsonNode carInfo : carInfoListNode) {
                            JsonNode licenseNoNode = carInfo.get("licenseNo");
                            if (licenseNoNode == null) {
                                throw new IllegalArgumentException("licenseNo field not found in carInfoListDto for car " + carInfo);
                            }
                            String licenseNo = licenseNoNode.asText();
                            System.out.println(licenseNo);
                        }
                    }
                });

                page.getByText("更換車輛").click();
                page.getByText("晉L613A4").click();
                page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("查看報價")).click();
                page.getByText("查看該方案報價").click();

    }

執行效果如圖7，可以靈活在此基礎上擴展其他Case。

?

4總結與展望

利用Playwright，我們可以輕松地編寫可靠、快速和可維護的自動化測試腳本。這些腳本可以模擬真實用戶的交互行為，覆蓋各種可能的測試場景，從而確保車險的UI在不同環境和配置下的穩定性和正確性。通過playwright實現用例自動生成，定時執行并產出報告的車險UI自動化測試系統，能夠幫助我們顯著提高測試效率，節省大量的測試時間。展望未來，我們期待將車險UI自動化測試技術繼續發展和完善，為目前的測試工作提升效率，未來帶來更多的創新和改進。

審核編輯 黃宇

?