[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

查詢書籍的 scenario

Step Definitions 如何使用 Page Object

step definitions使用page object

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

Page Object 的內容

page object assertion 實作

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

結論

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

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