2026-01-26

Playwright測(cè)試結(jié)果驗(yàn)證：智能斷言與軟斷言使用

自動(dòng)化測(cè)試的核心在于驗(yàn)證——確認(rèn)應(yīng)用的行為是否符合預(yù)期。在Playwright測(cè)試中，斷言是這一驗(yàn)證過程的基石。然而，許多測(cè)試工程師在使用斷言時(shí)，往往只停留在基礎(chǔ)層面，未能充分利用Playwright提供的強(qiáng)大驗(yàn)證機(jī)制。本文將深入探討智能斷言與軟斷言的使用技巧，幫助你編寫更健壯、更易維護(hù)的測(cè)試腳本。

傳統(tǒng)斷言的局限性

在討論高級(jí)斷言技術(shù)之前，我們先看看傳統(tǒng)方法的問題。典型測(cè)試中，你可能寫過這樣的代碼：

<pre data-tool="mdnice編輯器" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left; visibility: visible;">// 傳統(tǒng)斷言方式 await page.goto('https://example.com'); const title = await page.textContent('h1'); expect(title).toBe('Welcome to Our Site'); const button = await page.locator('button.submit'); expect(await button.isVisible()).toBe(true); </pre>

這種方式雖然有效，但存在幾個(gè)問題：

  1. 每個(gè)斷言都需要明確提取值再驗(yàn)證
  2. 一個(gè)斷言失敗會(huì)立即停止測(cè)試執(zhí)行
  3. 錯(cuò)誤信息不夠直觀，需要額外調(diào)試

智能斷言：讓驗(yàn)證更簡(jiǎn)潔

Playwright的智能斷言（Smart Assertions）通過自動(dòng)等待和重試機(jī)制，顯著簡(jiǎn)化了測(cè)試代碼。

1. 內(nèi)置的expect自動(dòng)等待

Playwright對(duì)expect進(jìn)行了擴(kuò)展，使其能夠自動(dòng)等待條件成立：

<pre data-tool="mdnice編輯器" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">// 智能斷言示例 await expect(page.locator('h1')).toHaveText('Welcome to Our Site'); await expect(page.locator('button.submit')).toBeVisible(); </pre>

這里的toHaveText和toBeVisible都會(huì)自動(dòng)等待，直到元素滿足條件或超時(shí)。這消除了顯式等待的需要，使代碼更簡(jiǎn)潔。

2. 常用智能斷言方法

<pre data-tool="mdnice編輯器" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">// 文本內(nèi)容驗(yàn)證 await expect(page.locator('.status')).toHaveText('Success'); await expect(page.locator('.status')).toContainText('Success'); // 屬性驗(yàn)證 await expect(page.locator('input[#email](javascript:;)')).toHaveAttribute('type', 'email'); await expect(page.locator('img.logo')).toHaveAttribute('src', /logo\.png$/); // CSS類驗(yàn)證 await expect(page.locator('button')).toHaveClass('btn btn-primary'); await expect(page.locator('alert')).toHaveClass(/success/); // 元素狀態(tài)驗(yàn)證 await expect(page.locator('checkbox')).toBeChecked(); await expect(page.locator('input')).toBeEmpty(); await expect(page.locator('select')).toBeEnabled(); // 可見性與存在性 await expect(page.locator('.modal')).toBeVisible(); await expect(page.locator('.modal')).toBeHidden(); await expect(page.locator('non-existent')).toHaveCount(0); </pre>

3. 自定義等待選項(xiàng)

智能斷言允許配置等待行為：

<pre data-tool="mdnice編輯器" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">// 自定義超時(shí)和間隔 await expect(page.locator('.loader')).toBeHidden({ timeout: 10000, // 10秒超時(shí) }); // 帶自定義錯(cuò)誤信息 await expect(page.locator('h1'), '頁面標(biāo)題不正確') .toHaveText('Dashboard'); </pre>

軟斷言：收集而非中斷

在復(fù)雜測(cè)試場(chǎng)景中，我們經(jīng)常需要驗(yàn)證多個(gè)條件，但又不希望第一個(gè)失敗就終止測(cè)試。這時(shí)軟斷言（Soft Assertions）就派上用場(chǎng)了。

1. 為什么需要軟斷言？

考慮一個(gè)用戶注冊(cè)表單的測(cè)試，我們需要驗(yàn)證：

  • 表單標(biāo)題正確
  • 所有必填字段存在
  • 提交按鈕可用
  • 錯(cuò)誤提示初始隱藏

如果使用傳統(tǒng)斷言，第一個(gè)失敗就會(huì)阻止后續(xù)驗(yàn)證，你無法知道其他檢查點(diǎn)是否通過。

2. 實(shí)現(xiàn)軟斷言的幾種方式

方式一：使用try-catch收集錯(cuò)誤

<pre data-tool="mdnice編輯器" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">async function softAssert(testInfo, assertions) { const errors = []; for (const assertion of assertions) { try { await assertion(); } catch (error) { errors.push(error.message); } } if (errors.length > 0) { thrownewError(軟斷言失敗：\n{errors.join('\n')}`); } } // 使用示例 await test.step('驗(yàn)證注冊(cè)表單', async () => { const errors = []; try { await expect(page.locator('h1')).toHaveText('用戶注冊(cè)'); } catch (e) { errors.push(`標(biāo)題錯(cuò)誤:{e.message}); } try { await expect(page.locator('input[name="email"]')).toBeVisible(); } catch (e) { errors.push(郵箱字段缺失: {e.message}`); } // ... 更多斷言 if (errors.length > 0) { thrownewError(`表單驗(yàn)證失?。篭n{errors.join('\n')}); } }); </pre>

方式二：使用第三方庫

<pre data-tool="mdnice編輯器" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">// 使用chai-soft斷言庫 import { softAssertions } from'chai-soft'; // 配置軟斷言 softAssertions.configure({ failOnFirstError: false, timeout: 5000 }); // 使用軟斷言 await softAssertions.expect(page.locator('h1')).toHaveText('正確標(biāo)題'); await softAssertions.expect(page.locator('.content')).toBeVisible(); // 所有斷言執(zhí)行完畢后檢查結(jié)果 softAssertions.verify(); </pre>

方式三：使用Playwright Test的expect.soft()（新版本特性）

<pre data-tool="mdnice編輯器" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">// Playwright 1.20+ 支持軟斷言 test('驗(yàn)證用戶儀表板', async ({ page }) => { await page.goto('/dashboard'); // 使用軟斷言 - 所有都會(huì)執(zhí)行 await expect.soft(page.locator('h1')).toHaveText('用戶儀表板'); await expect.soft(page.locator('.welcome-msg')).toContainText('歡迎回來'); await expect.soft(page.locator('.stats-card')).toHaveCount(4); await expect.soft(page.locator('.notification')).toBeVisible(); // 所有軟斷言執(zhí)行后，如果有失敗會(huì)匯總報(bào)告 // 測(cè)試會(huì)繼續(xù)執(zhí)行到這里 // 可以混合使用硬斷言 await expect(page.locator('body')).not.toHaveClass('error-mode'); }); </pre>

3. 軟斷言的最佳實(shí)踐

<pre data-tool="mdnice編輯器" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">test('完整的用戶配置驗(yàn)證', async ({ page }) => { await page.goto('/user/profile'); // 第一組：基本信息驗(yàn)證 const basicInfoErrors = []; try { await expect.soft(page.locator('[#username](javascript:;)')).toHaveValue('testuser'); } catch (e) { basicInfoErrors.push('用戶名不匹配'); } try { await expect.soft(page.locator('[#email](javascript:;)')).toHaveValue('user@example.com'); } catch (e) { basicInfoErrors.push('郵箱不匹配'); } // 第二組：偏好設(shè)置驗(yàn)證 const preferenceErrors = []; try { await expect.soft(page.locator('[#theme](javascript:;)-dark')).toBeChecked(); } catch (e) { preferenceErrors.push('主題設(shè)置錯(cuò)誤'); } try { await expect.soft(page.locator('[#notifications](javascript:;)-on')).toBeChecked(); } catch (e) { preferenceErrors.push('通知設(shè)置錯(cuò)誤'); } // 生成詳細(xì)報(bào)告 if (basicInfoErrors.length > 0 || preferenceErrors.length > 0) { const report = []; if (basicInfoErrors.length) report.push(基本信息: {basicInfoErrors.join(', ')}`); if (preferenceErrors.length) report.push(`偏好設(shè)置:{preferenceErrors.join(', ')}); testInfo.annotations.push({ type: 'soft-assert-failures', description: report.join(' | ') }); // 根據(jù)失敗嚴(yán)重程度決定是否繼續(xù) if (basicInfoErrors.length > 2) { thrownewError(關(guān)鍵信息驗(yàn)證失敗: ${report.join('; ')}); } } });</pre>

智能斷言與軟斷言的結(jié)合使用

在實(shí)際項(xiàng)目中，我們經(jīng)常需要混合使用兩種斷言策略：

<pre data-tool="mdnice編輯器" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">test('電子商務(wù)下單流程', async ({ page }) => { // 硬斷言：關(guān)鍵路徑必須通過 await page.goto('/product/123'); await expect(page.locator('.product-title')).toBeVisible(); // 添加到購物車 await page.click('button.add-to-cart'); await expect(page.locator('.cart-count')).toHaveText('1'); // 進(jìn)入結(jié)賬 - 硬斷言確保流程正確 await page.click('button.checkout'); await expect(page).toHaveURL(/\/checkout/); // 結(jié)賬頁面多個(gè)驗(yàn)證點(diǎn) - 使用軟斷言收集所有問題 const checkoutIssues = []; // 驗(yàn)證所有必填字段 const requiredFields = ['name', 'address', 'city', 'zip', 'card']; for (const field of requiredFields) { try { await expect.soft(page.locator([name="{field}"]`)).toBeVisible(); } catch (e) { checkoutIssues.push(`缺失字段:{field}); } } // 驗(yàn)證價(jià)格計(jì)算 try { await expect.soft(page.locator('.subtotal')).toContainText('$99.99'); } catch (e) { checkoutIssues.push('小計(jì)錯(cuò)誤'); } try { await expect.soft(page.locator('.tax')).toContainText('$8.00'); } catch (e) { checkoutIssues.push('稅金錯(cuò)誤'); } try { await expect.soft(page.locator('.total')).toContainText('$107.99'); } catch (e) { checkoutIssues.push('總計(jì)錯(cuò)誤'); } // 如果有驗(yàn)證問題但非致命，添加注釋繼續(xù) if (checkoutIssues.length > 0 && checkoutIssues.length < 3) { console.log('結(jié)賬頁面警告:', checkoutIssues); // 繼續(xù)執(zhí)行... } elseif (checkoutIssues.length >= 3) { thrownewError(結(jié)賬頁面嚴(yán)重問題: ${checkoutIssues.join(', ')}); } // 最終硬斷言：訂單提交成功 await page.click('button.place-order'); await expect(page.locator('.order-confirmation')).toBeVisible(); }); </pre>

斷言策略的最佳實(shí)踐

  1. 分層使用斷言策略：
  • 關(guān)鍵路徑使用硬斷言
  • 多條件驗(yàn)證使用軟斷言
  • 非關(guān)鍵檢查使用帶日志的軟斷言

  1. 合理配置超時(shí)：

    <pre style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">// 根據(jù)元素重要性設(shè)置不同超時(shí) await expect(page.locator('.login-form'), '登錄表單應(yīng)快速加載') .toBeVisible({ timeout: 5000 }); await expect(page.locator('.secondary-data'), '次要數(shù)據(jù)可稍慢') .toBeVisible({ timeout: 15000 }); </pre>

  2. 增強(qiáng)斷言可讀性：

    <pre style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">// 使用自定義消息 await expect( page.locator('.user-avatar'), '用戶應(yīng)已登錄并顯示頭像' ).toBeVisible(); // 使用測(cè)試步驟封裝 await test.step('驗(yàn)證購物車內(nèi)容', async () => { await expect.soft(page.locator('.cart-item')).toHaveCount(3); await expect.soft(page.locator('.cart-total')).toContainText('$299.97'); }); </pre>

  3. 創(chuàng)建自定義斷言助手：

    <pre style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">class TestAssertions { constructor(page) { this.page = page; this.softErrors = []; } async softVerify(assertionFn, description) { try { await assertionFn(); } catch (error) { this.softErrors.push({description}:{error.message}); } } async assertAll() { if (this.softErrors.length > 0) { thrownewError(驗(yàn)證失敗:\n${this.softErrors.join('\n')}); } } } // 使用自定義助手 test('綜合驗(yàn)證', async ({ page }) => { const assert = new TestAssertions(page); await assert.softVerify( () => expect(page.locator('h1')).toHaveText('Dashboard'), '頁面標(biāo)題' ); await assert.softVerify( () => expect(page.locator('.widget')).toHaveCount(5), '小組件數(shù)量' ); // 執(zhí)行所有斷言后檢查 await assert.assertAll(); }); </pre>

調(diào)試技巧：當(dāng)斷言失敗時(shí)

  1. 利用豐富的錯(cuò)誤信息： Playwright的智能斷言提供了詳細(xì)的錯(cuò)誤信息，包括：
  • 期望值與實(shí)際值
  • 元素選擇器
  • 等待時(shí)長(zhǎng)
  • 頁面截圖（如果配置了）

  1. 失敗時(shí)自動(dòng)截圖：

    <pre style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">// 在配置文件中設(shè)置 // playwright.config.js module.exports = { use: { screenshot: 'only-on-failure', }, }; // 或針對(duì)特定測(cè)試 test('關(guān)鍵測(cè)試', async ({ page }) => { test.info().annotations.push({ type: 'test', description: '需要截圖' }); try { await expect(page.locator('.important')).toBeVisible(); } catch (error) { await page.screenshot({ path: 'assertion-failure.png' }); throw error; } });</pre>

Playwright的斷言系統(tǒng)提供了從基礎(chǔ)到高級(jí)的完整驗(yàn)證解決方案。智能斷言通過自動(dòng)等待簡(jiǎn)化了測(cè)試代碼，而軟斷言則通過收集而非中斷的機(jī)制，提高了復(fù)雜場(chǎng)景的測(cè)試效率。

有效的斷言策略應(yīng)該是分層的：對(duì)關(guān)鍵功能使用立即失敗的硬斷言，對(duì)多條件驗(yàn)證使用收集錯(cuò)誤的軟斷言。通過混合使用這兩種技術(shù)，并輔以自定義斷言助手和詳細(xì)的錯(cuò)誤報(bào)告，你可以構(gòu)建出既健壯又易于維護(hù)的測(cè)試套件。

記住，好的斷言不僅僅是驗(yàn)證正確性，更是提供清晰、可操作的錯(cuò)誤信息，幫助團(tuán)隊(duì)快速定位和解決問題?；〞r(shí)間優(yōu)化你的斷言策略，將在測(cè)試穩(wěn)定性和維護(hù)效率上獲得豐厚回報(bào)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Playwright數(shù)據(jù)庫斷言：測(cè)試前后數(shù)據(jù)驗(yàn)證 在自動(dòng)化測(cè)試中，我們常常會(huì)遇到這樣的場(chǎng)景：測(cè)試一個(gè)用戶注冊(cè)功能，...
    霍格沃茲測(cè)試開發(fā)學(xué)社閱讀 21評(píng)論 0贊 0
  • 使用Playwright進(jìn)行API測(cè)試：攔截與模擬網(wǎng)絡(luò)請(qǐng)求 你可能已經(jīng)熟悉用Playwright做端到端的UI測(cè)試...
    霍格沃茲測(cè)試開發(fā)學(xué)社閱讀 88評(píng)論 0贊 0
  • Playwright與Selenium對(duì)比：遷移策略與注意事項(xiàng) 去年，我們團(tuán)隊(duì)面臨一個(gè)艱難抉擇：繼續(xù)維護(hù)已經(jīng)使用了...
    霍格沃茲測(cè)試開發(fā)學(xué)社閱讀 41評(píng)論 0贊 0
  • Playwright錯(cuò)誤處理與重試機(jī)制實(shí)現(xiàn) 在實(shí)際的自動(dòng)化測(cè)試和網(wǎng)絡(luò)爬蟲開發(fā)中，穩(wěn)定性是衡量腳本質(zhì)量的重要指標(biāo)。即...
    霍格沃茲測(cè)試開發(fā)學(xué)社閱讀 43評(píng)論 0贊 0
  • Playwright MCP入門指南：從零開始構(gòu)建自動(dòng)化測(cè)試 在當(dāng)今快速迭代的軟件開發(fā)環(huán)境中，自動(dòng)化測(cè)試已成為保證...
    霍格沃茲測(cè)試開發(fā)學(xué)社閱讀 43評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容