與劇作家的自動視覺回歸測試

自動化視覺測試提供了一種強大的，儘管有時無法預測的軟件質量保證方法。劇作家簡化了網站的過程，儘管可能需要微調。

最近的系統停機時間激發了我解決一個長期存在的問題：由於不斷增加的功能，我維護的網站的CSS變得笨拙。有了更清楚的了解，現在是內部CSS重構來減少技術債務並利用現代CSS功能的時候了（例如嵌套的選擇器以改善結構）。清潔器代碼庫還將促進急需的黑暗模式，從而通過尊重首選配色方案來增強用戶體驗。

但是，猶豫不決地通過重大更改引入錯誤，我需要一個強大的視覺回歸測試解決方案。傳統的快照測試證明太慢和脆弱。

在這種情況下，快照測試涉及捕獲屏幕截圖，以建立與未來結果進行比較的基線。但是，這些屏幕截圖容易受到各種無法控制的因素（例如，時機問題，變化的硬件資源或動態內容）。在測試運行之間管理狀態（保存屏幕截圖）會增加複雜性，並使僅測試代碼很難完全定義期望。

長時間的拖延後，我終於實施了一個解決方案，最初期望快速解決問題。這不會成為主要測試套件的一部分；只是該重構任務的臨時工具。

幸運的是，我回想起了以前的研究，並很快發現了劇作家的內置視覺比較功能。欣賞劇作家的最小外部依賴關係，我繼續實施。

設置環境

雖然npm init playwright@latest提供了一個很好的起點，但我選擇了手動設置來更好地了解組件。考慮到快照測試的使用很少使用，我創建了一個專用的子目錄， test/visual作為我們的工作目錄。 package.json文件聲明依賴項和輔助腳本：

 {
  “腳本”：{
    “測試”：“劇作家測試”，
    “報告”：“劇作家表演報告”，
    “ Update”：“劇作家測試 -  update-snapshots”，
    “ reset”：“ rm -r ./playwright-report ./test-results ./viz.test.js-snapshots || true”
  }，，
  “ devDectiencies”：{
    “@playwright/test”：“^1.49.1”
  }
}

為了避免使用這種很少使用的依賴性使主項目混亂，請考慮在需要時在根目錄中直接在根目錄中運行npm install --no-save @playwright/test 。

安裝必要的軟件包（ npm install然後是npx playwright install ）後，我們使用playwright.config.js配置測試環境：

從“@playwright/test”中導入{decteConfig，devices};

令瀏覽器= [“桌面firefox”，“桌面chrome”，“桌面Safari”];
令base_url =“ http：// localhost：8000”;
令server =“ cd ../../dist && python3 -m http.server”;

讓IS_CI = !! process.env.ci;

導出默認decteConfig（{
  testdir：“ ./”，
  完全比較：是的，
  禁止：is_ci，
  重試：2，
  工人：is_ci？ 1：未定義，
  記者：“ html”，
  WebServer：{
    命令：服務器，
    URL：base_url，
    reuseexisterserver：！ is_ci
  }，，
  使用： {
    baseurl：base_url，
    痕跡：“首先退休”
  }，，
  項目：browsers.map（ua =>（{{
    名稱：ua.tolowercase（）。替換（“”，“  - ”），
    使用：{...設備[ua]}
  }）））
}）;

該配置在dist目錄中假定一個靜態網站，該網站在本地localhost:8000 （使用Python的http.server ）。可以調整瀏覽器的數量以進行性能。對於此特定的非CI場景，省略了IS_CI邏輯。

捕獲和比較視覺效果

sample.test.js中的最小測試證明了核心功能：

從“@playwright/test”中導入{test，Expect};

test（“主頁”，async（{page}）=> {
  等待page.goto（“/”）;
  等待期望（page）.tohavescreenshot（）;
}）;

第一次運行會生成基線快照。隨後的運行與這些相比，如果檢測到視覺差異，則報告失敗。劇作家提供了視覺比較快照和檢查基線圖像的工具。

自動測試生成

為了避免為每個頁面的手動測試創建，我實現了一個簡單的Web爬網，以動態生成測試。

站點地圖創建

playwright.config.js文件已擴展到包含globalSetup和導出相關配置值：

導出讓瀏覽器= [“桌面firefox”，“桌面chrome”，“桌面Safari”];
導出令base_url =“ http：// localhost：8000”;

// ...其餘的配置...

導出默認decteConfig（{
  // ...其餘的配置...
  GlobalsEtup：require.sroove（“ ./ setup.js”）
}）;

setup.js文件使用無頭瀏覽器來爬網站並創建一個站點地圖：

導入{base_url，瀏覽器}來自“ ./playwright.config.js”;
導入{createSiteMap，readSiteMap}從“ ./sitemap.js”;
從“@playwright/test”中導入劇作家；

導出默認異步函數globalsetup（config）{
  //僅創建站點地圖，如果它尚不存在
  嘗試 {
    readSiteMap（）;
    返回;
  } catch（err）{}

  //啟動瀏覽器並啟動爬網
  令瀏覽器= playwright.devices [瀏覽器[0]]。 defaultBrowserType;
  瀏覽器=等待劇作家[瀏覽器] .launch（）;
  令page =等待瀏覽器.newpage（）;
  等待createSiteMap（base_url，page）;
  等待browser.close（）;
}

sitemap.js文件包含軌道邏輯：

導入{readfilesync，writefilesync}來自“ node：fs”;
從“ node：path”導入{join};

令Entry_point =“/topics”;
讓SiteMap = join（__ dirname，“ ./sitemap.json”）;

導出異步函數createSiteMap（baseurl，page）{
  等待頁面。
  令URL =等待頁面。
  令data = json.stringify（url，null，4）;
  writefilesync（sitemap，data，{engoding：“ utf-8”}）;
}

導出函數readsitemap（）{
  嘗試 {
    var data = readfilesync（sitemap，{engoding：“ utf-8”}）;
  } catch（err）{
    if（err.code ===“ enoent”）{
      投擲新錯誤（“缺少站點地圖”）;
    }
    投擲錯誤；
  }
  返回JSON.PARSE（數據）;
}

函數ExtractLocallinks（baseurl）{
  令URLS = new Set（）;
  let offset = baseurl.length;
  for（令document.links的{href}）{
    if（href.startswith（baseurl））{
      令路徑= href.slice（offset）;
      urls.add（路徑）;
    }
  }
  返回array.from（urls）;
}

這使用page.evaluate在瀏覽器上下文中提取鏈接。

動態測試生成

viz.test.js文件基於站點地圖動態生成測試：

從“ ./sitemap.js”導入{readSiteMap};
從“@playwright/test”中導入{test，Expect};
從“ node：path”導入{join};

讓選項= {
  stylepath：join（__ dirname，“ ./viz.tweaks.css”）
};

讓SiteMap = [];
嘗試 {
  siteMap = readSiteMap（）;
} catch（err）{
  測試（“站點地圖”，（{page}）=> {
    投擲新錯誤（“缺少站點地圖”）;
  }）;
}

for（讓站點地圖的URL）{
  test（`page at $ {url}`，async（{page}）=> {
    等待Page.goto（url）;
    等待期望（page）.tohavescreenshot（options）;
  }）;
}

由於劇作家當前對測試文件中的頂級await限制，因此需要同步readSiteMap 。 OPTIONS對象允許自定義CSS調整。

處理異常和片狀

視覺測試需要處理異常。 viz.tweaks.css中的自定義CSS可以抑制影響一致性的特定元素：

 / *抑制狀態 */
主a：訪問{
  顏色：var（ - 顏色鏈接）;
}

/ *抑制隨機性 */
iframe [src $ =“/articles/stignals-reactivity/demo.html”] {
  可見性：隱藏；
}

/ *抑製片狀 */
身體：h1 a [href =“/wip/unicode-symbols/“”] {
  主Tbody> TR：Last-Child> TD：First-Child {
    字體大小：0;
    可見性：隱藏；
  }
}

解決視口限制

最初，測試未能檢測到樣式的變化，因為.toHaveScreenshot僅捕獲視口。要捕獲完整頁面， playwright.config.js已修改：

導出讓寬度= 800;
導出LET Height = width;

// ...其餘的配置...

項目：browsers.map（ua =>（{{
  // ...其餘的配置...
  使用： {
    // ...其餘的配置...
    視口：{
      寬度：寬度，
      高度：高度
    }
  }
}）））

和viz.test.js已更新以確定和設置頁面高度：

從“ ./playwright.config.js”導入{width，height};

// ...其餘的進口...

for（讓站點地圖的URL）{
  test（`page at $ {url}`，async（{page}）=> {
    checksnapshot（url，page）;
  }）;
}

異步函數checksnapshot（url，page）{
  等待Page.setViewPortsize（{width：width：width，height：height}）;
  等待Page.goto（url）;
  等待頁面。
  讓高度=等待頁面。
  等待Page.setViewPortsize（{width：width：width，height：Math.ceil（height）}）;
  等待頁面。
  等待期望（page）.tohavescreenshot（options）;
}

函數getfullheight（）{
  返回document.documentElement.getBoundingClientRect（）。高度;
}

這確保了整個頁面的捕獲，儘管它增加了資源消耗，並且可能會由於佈局變化或超時而引起片狀。

結論

這種視覺回歸測試解決方案（雖然比最初預期的更為複雜，但都可以有效地解決該問題。仍然存在重構和隨後的黑暗模式實現。

以上是與劇作家的自動視覺回歸測試的詳細內容。更多資訊請關注PHP中文網其他相關文章！