[Web Testing]驗證 table 內的多筆資料

當碰到查詢的功能,需要驗證查出的多筆結果是否符合預期時,在撰寫 web testing 時,往往很麻煩。本文針對確定查詢結果順序的情況,寫一段 sample code 給各位參考。

這篇 sample code 使用了 specflow, page object 與 FluentAutomation,不清楚這些東西的朋友,可以自行搜尋本 blog 的文章。

功能與頁面描述

有一個查詢頁面,可以查出符合條件的 ISBN 與書名的資訊。而自動測試,需要驗證如下圖所示:

查詢結果的 HTML 如下所示:

<div>
	<table class="table">
		<tr>
			<th>
				ISBN
			</th>
			<th>
				Name
			</th>
		</tr>
		<tr>
			<td class="isbn">
				9789869094481
			</td>
			<td class="name">
				玩出好創意
			</td>
		</tr>
	</table>
</div>

ASP.NET View 的部分,如下所示:

    if (Model != null && Model.Books.Any())
    {
        <div>
            <table class="table">
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.ISBN)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Name)
                    </th>
                </tr>

                @foreach (var item in Model.Books)
                {
                    <tr>
                        <td class="isbn">
                            @Html.DisplayFor(modelItem => item.ISBN)
                        </td>
                        <td class="name">
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                    </tr>
                }
            </table>
        </div>
    }

查詢的 Scenario

Step Definitions 如何使用 Page Object

Page object 美妙之處就在於,叫它做事就好,而不用管它是怎麼做的。(某種程度跟使用 interface 類似)

Page Object 的內容

CSS selector 使用 nth-child() 是重點

結論

在 web testing 做驗證時,其實是需要做些取捨的,因為驗證地越細,測試程式就越不穩定。只要達到驗證的目的,越輕量越好。例如幾種驗證方式:

  1. 從 UI 上取值,轉成物件跟 specflow 的 table 做 compare。
  2. 從 specflow 的 table 上取得資訊,做 UI 完整的驗證。
  3. 從 specflow 的 table 上取得資訊,做剛好的驗證。例如驗證筆數、驗證畫面上有出現關鍵字即可。類似 mock 的驗證,驗得越死越細,需求異動時壞掉的機率就越高。

對敏捷開發有興趣的朋友,可以參考我的粉絲專頁:91敏捷開發之路

若需要聯絡我,可以透過粉絲專頁私訊或是側欄的關於我。