作者：京東保險(xiǎn) 宋陽(yáng)

1背景

在車(chē)險(xiǎn)系統(tǒng)中，對(duì)接保司的數(shù)量眾多。每當(dāng)系統(tǒng)有新功能迭代后，基本上各個(gè)保司的報(bào)價(jià)流程都需要進(jìn)行回歸測(cè)試。由于保司數(shù)量多，回歸測(cè)試的場(chǎng)景也會(huì)變得重復(fù)而繁瑣，給測(cè)試團(tuán)隊(duì)帶來(lái)了巨大的工作壓力。

車(chē)險(xiǎn)投保流程主要通過(guò)H5頁(yè)面進(jìn)行，核心功能集中在投保、報(bào)價(jià)、核保等階段。這些功能的UI自動(dòng)化測(cè)試具有很高的可行性和必要性。通過(guò)自動(dòng)化測(cè)試，我們可以完全覆蓋這些核心功能的測(cè)試場(chǎng)景，有效地降低手動(dòng)測(cè)試的工作量和錯(cuò)誤率。

在這種情況下，Playwright自動(dòng)化測(cè)試工具因其跨瀏覽器和平臺(tái)的支持、簡(jiǎn)潔直觀的API設(shè)計(jì)以及強(qiáng)大的異步處理能力而成為首選。使用Playwright進(jìn)行UI自動(dòng)化測(cè)試不僅可以提高測(cè)試效率和準(zhǔn)確性，還可以幫助測(cè)試團(tuán)隊(duì)更好地應(yīng)對(duì)頻繁的功能迭代和回歸測(cè)試的挑戰(zhàn)。

?

?

?

圖1.車(chē)險(xiǎn)自動(dòng)化測(cè)試需解決問(wèn)題

2工具

Playwright是一個(gè)強(qiáng)大的UI自動(dòng)化測(cè)試工具，能夠錄制并自動(dòng)生成代碼，支持多種主流瀏覽器，包括Chrome、Firefox和Safari，并且適用于Windows、Linux和macOS操作系統(tǒng)，能夠?qū)崿F(xiàn)跨平臺(tái)的自動(dòng)化測(cè)試。同時(shí)，Playwright采用Python、C#、Java等編程語(yǔ)言編寫(xiě)腳本，易于學(xué)習(xí)和使用。它還提供了豐富的API，可以實(shí)現(xiàn)復(fù)雜的用戶(hù)交互操作，如鍵盤(pán)輸入、鼠標(biāo)操作等，讓自動(dòng)化測(cè)試更加貼近真實(shí)用戶(hù)行為。

此外，Playwright具備自動(dòng)等待功能，能夠智能地處理元素加載，提高測(cè)試的穩(wěn)定性和效率。總的來(lái)說(shuō)，Playwright在UI自動(dòng)化測(cè)試領(lǐng)域具有很高的靈活性和實(shí)用性。

2.1安裝

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

    pip3 install playwright

Playwright可以安裝支持的瀏覽器，運(yùn)行不帶參數(shù)的命令將安裝默認(rèn)瀏覽器，默認(rèn)會(huì)下載chromium內(nèi)核，firefox以及webkit驅(qū)動(dòng)。

    playwright install

3實(shí)踐

3.1車(chē)險(xiǎn)系統(tǒng)

車(chē)險(xiǎn)系統(tǒng)流程如圖2，其核心功能在于人車(chē)信息錄入、線上報(bào)價(jià)和核保，這些功能的測(cè)試點(diǎn)都可以通過(guò)PlaywrightUI自動(dòng)化覆蓋。

?

?

?

圖2.車(chē)險(xiǎn)系統(tǒng)流程圖

3.2錄制

使用Playwright的錄制功能生成測(cè)試用例的代碼。運(yùn)行"npx playwright codegen --device='iPhone 13'"命令啟動(dòng)playwright，默認(rèn)會(huì)開(kāi)啟兩個(gè)窗口，左圖為指定的iPhone 13機(jī)型瀏覽器，右圖為playwright inspector界面，在瀏覽器頁(yè)面進(jìn)行系統(tǒng)測(cè)試，playwright inspector會(huì)自動(dòng)生成記錄瀏覽器操作的代碼，圖3為打開(kāi)車(chē)險(xiǎn)首頁(yè)的playwright界面。

?

?

?

圖3.playwright界面

在Target選擇生成的代碼語(yǔ)言，默認(rèn)生成Python，可以換選Java等，如圖4。

?

?

?

圖4.選擇生成語(yǔ)言

選擇好生成的語(yǔ)言后，就可以在瀏覽器中執(zhí)行測(cè)試用例了，圖5中playwright inspector會(huì)自動(dòng)生成在瀏覽器測(cè)試用例對(duì)應(yīng)代碼。

?

?

?

圖5.錄制Case

測(cè)試完成之后就可以把playwright inspector中生成的代碼拷貝到Idea，添加日志斷言等，進(jìn)行執(zhí)行和完善。

    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***");//訪問(wèn)車(chē)險(xiǎn)測(cè)試環(huán)境地址
          page.getByText("更換車(chē)輛").click();
          page.navigate("http://testcar***");
          page.getByText("更換車(chē)輛").click();
          page.getByText("京AL3UVJ").click();
          page.getByText("更換車(chē)輛").click();
          page.locator("p").filter(new Locator.FilterOptions().setHasText("晉L613A4")).click();
          page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("查看報(bào)價(jià)")).click();
          page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("同意").setExact(true)).click();
          page.getByText("知道了").click();
          page.getByText("查看該方案報(bào)價(jià)").click();
        }
      }
    }

3.3頁(yè)面接口響應(yīng)驗(yàn)證

Playwright的強(qiáng)大在于支持UI錄制的同時(shí)，也提供了接口操作的功能。我們可以結(jié)合UI用例執(zhí)行，對(duì)重要接口參數(shù)進(jìn)行獲取和校驗(yàn)，也可以作為UI用例的參數(shù)使用。接口校驗(yàn)主要用到兩個(gè)方法：expect_request和expect_response。expect_request方法會(huì)等待匹配的請(qǐng)求并返回，expect_response方法會(huì)返回匹配的響應(yīng)。在車(chē)險(xiǎn)的一個(gè)使用場(chǎng)景為例：代碼在執(zhí)行點(diǎn)擊更換車(chē)輛文本之后，會(huì)監(jiān)聽(tīng)queryCarHomePage接口的返回，獲取當(dāng)前用戶(hù)所有的車(chē)。

     page.getByText("更換車(chē)輛").click();

     // 監(jiān)聽(tīng)響應(yīng)
     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自動(dòng)化測(cè)試系統(tǒng)

可見(jiàn)Playwright的自動(dòng)錄制功能能夠大幅降低生成測(cè)試用例的復(fù)雜度，UI的自動(dòng)執(zhí)行也能夠節(jié)省大量回歸測(cè)試的時(shí)間。當(dāng)然我們不僅僅滿足于case的錄制和本地手動(dòng)執(zhí)行，而更希望能夠在生成case之后，可以定期執(zhí)行、自動(dòng)執(zhí)行錄制的case，并生成能夠直觀反映case執(zhí)行結(jié)果的報(bào)告，這樣就可以實(shí)現(xiàn)從用例錄制、收集、定期執(zhí)行到測(cè)試效果反饋的完整自動(dòng)化測(cè)試鏈路，實(shí)現(xiàn)系統(tǒng)的測(cè)試和監(jiān)控的同時(shí)，顯著提升測(cè)試的效率，極大節(jié)省時(shí)間人力成本。所以未來(lái)我們預(yù)期實(shí)現(xiàn)的自動(dòng)化系統(tǒng)結(jié)構(gòu)如圖6所示，本地錄制case并上傳到數(shù)據(jù)庫(kù)，Playwright定時(shí)任務(wù)執(zhí)行case并生成用例執(zhí)行報(bào)告。

?

?

圖6.基于playwright的UI自動(dòng)化測(cè)試系統(tǒng)流程圖

3.5測(cè)試Demo

以下擷取Case為Playwright錄制生成代碼和接口相關(guān)擴(kuò)展方法相結(jié)合，實(shí)現(xiàn)車(chē)險(xiǎn)首頁(yè)切換車(chē)輛后報(bào)價(jià)，并通過(guò)獲取該用戶(hù)pin下車(chē)列表的Demo實(shí)例。

    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***");

                // 監(jiān)聽(tīng)響應(yīng)
                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("更換車(chē)輛").click();
                page.getByText("晉L613A4").click();
                page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("查看報(bào)價(jià)")).click();
                page.getByText("查看該方案報(bào)價(jià)").click();

    }

執(zhí)行效果如圖7，可以靈活在此基礎(chǔ)上擴(kuò)展其他Case。

?

4總結(jié)與展望

利用Playwright，我們可以輕松地編寫(xiě)可靠、快速和可維護(hù)的自動(dòng)化測(cè)試腳本。這些腳本可以模擬真實(shí)用戶(hù)的交互行為，覆蓋各種可能的測(cè)試場(chǎng)景，從而確保車(chē)險(xiǎn)的UI在不同環(huán)境和配置下的穩(wěn)定性和正確性。通過(guò)playwright實(shí)現(xiàn)用例自動(dòng)生成，定時(shí)執(zhí)行并產(chǎn)出報(bào)告的車(chē)險(xiǎn)UI自動(dòng)化測(cè)試系統(tǒng)，能夠幫助我們顯著提高測(cè)試效率，節(jié)省大量的測(cè)試時(shí)間。展望未來(lái)，我們期待將車(chē)險(xiǎn)UI自動(dòng)化測(cè)試技術(shù)繼續(xù)發(fā)展和完善，為目前的測(cè)試工作提升效率，未來(lái)帶來(lái)更多的創(chuàng)新和改進(jìn)。

審核編輯 黃宇

?