自動化視覺測試提供了一種強(qiáng)大的，儘管有時無法預(yù)測的軟件質(zhì)量保證方法。劇作家簡化了網(wǎng)站的過程，儘管可能需要微調(diào)。

最近的系統(tǒng)停機(jī)時間激發(fā)了我解決一個長期存在的問題：由於不斷增加的功能，我維護(hù)的網(wǎng)站的CSS變得笨拙。有了更清楚的了解，現(xiàn)在是內(nèi)部CSS重構(gòu)來減少技術(shù)債務(wù)並利用現(xiàn)代CSS功能的時候了（例如嵌套的選擇器以改善結(jié)構(gòu)）。清潔器代碼庫還將促進(jìn)急需的黑暗模式，從而通過尊重首選配色方案來增強(qiáng)用戶體驗(yàn)。

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

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

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

幸運(yùn)的是，我回想起了以前的研究，並很快發(fā)現(xiàn)了劇作家的內(nèi)置視覺比較功能。欣賞劇作家的最小外部依賴關(guān)係，我繼續(xù)實(shí)施。

設(shè)置環(huán)境

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

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

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

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

從“@playwright/test”中導(dǎo)入{decteConfig，devices};

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

讓IS_CI = !! process.env.ci;

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

該配置在dist目錄中假定一個靜態(tài)網(wǎng)站，該網(wǎng)站在本地localhost:8000 （使用Python的http.server ）?？梢哉{(diào)整瀏覽器的數(shù)量以進(jìn)行性能。對於此特定的非CI場景，省略了IS_CI邏輯。

捕獲和比較視覺效果

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

從“@playwright/test”中導(dǎo)入{test，Expect};

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

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

自動測試生成

為了避免為每個頁面的手動測試創(chuàng)建，我實(shí)現(xiàn)了一個簡單的Web爬網(wǎng)，以動態(tài)生成測試。

站點(diǎn)地圖創(chuàng)建

playwright.config.js文件已擴(kuò)展到包含globalSetup和導(dǎo)出相關(guān)配置值：

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

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

導(dǎo)出默認(rèn)decteConfig（{
  // ...其餘的配置...
  GlobalsEtup：require.sroove（“ ./ setup.js”）
}）;

setup.js文件使用無頭瀏覽器來爬網(wǎng)站並創(chuàng)建一個站點(diǎn)地圖：

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

導(dǎo)出默認(rèn)異步函數(shù)globalsetup（config）{
  //僅創(chuàng)建站點(diǎn)地圖，如果它尚不存在
  嘗試 {
    readSiteMap（）;
    返回;
  } catch（err）{}

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

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

導(dǎo)入{readfilesync，writefilesync}來自“ node：fs”;
從“ node：path”導(dǎo)入{join};

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

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

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

函數(shù)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在瀏覽器上下文中提取鏈接。

動態(tài)測試生成

viz.test.js文件基於站點(diǎn)地圖動態(tài)生成測試：

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

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

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

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

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

處理異常和片狀

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

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

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

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

解決視口限制

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

導(dǎo)出讓寬度= 800;
導(dǎo)出LET Height = width;

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

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

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

從“ ./playwright.config.js”導(dǎo)入{width，height};

// ...其餘的進(jìn)口...

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

異步函數(shù)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）;
}

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

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

結(jié)論

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

以上是與劇作家的自動視覺回歸測試的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！