[C#.NET] 使用 Page Object Pattern 重構測試程式碼

2014-12-16

3617
0
Selenium
2015-12-28

測試程式碼也是產品的一部份，可維護性、閱讀性也應該要維持一定的水準

上篇，http://www.dotblogs.com.tw/yc421206/archive/2014/12/15/147658.aspx 使用 Fluent Automation API for Selenium 已經將測程式碼變得更容易閱讀

在 Martin Fowler 大師的 blog，提到 Page Object ，它把 html 的標籤處理搬到 Page Object 裡，讓測試程式碼專注在處理流程

http://martinfowler.com/bliki/PageObject.html

本篇會引用上篇的案例 http://www.dotblogs.com.tw/yc421206/archive/2014/12/15/147658.aspx

還會用到 FluentAutomation.PageObject，一看就知道它是從 Fluent Automation API for Selenium 來的

測試案例如下

http://www.dotblogs.com.tw/yc421206/archive/2014/12/15/147643.aspx#%E6%B8%AC%E8%A9%A6%E6%A1%88%E4%BE%8B

我做了兩個動作

Test Calss 實作 FluentTest

Page Object 實作 FluentAutomation.PageObject<T>

好!!!開始搬家

@GmailLoginPage.cs

使用案例
前往 https://mail.google.com

輸入帳號、密碼
按下登入
處理紅框處

把紅框處移到 GmailLoginPage.cs，GmailLoginPage 類別實作 FluentAutomation.PageObject<GmailLoginPage>

Submit 方法用來登入
{ 
    public GmailLoginPage(FluentTest test, string url) 
        : base(test) 
    { 
        this.Url = url; 
    }

    public void Submit(string userId, string password) 
    { 
        I.Open(this.Url) 
           .Enter(userId).In("#Email") 
           .Enter(password).In("#Passwd") 
           .Click("#signIn"); 
    } 
}
https://dotblogsamples.codeplex.com/SourceControl/latest#Simple.SeleniumGmailTest/Simple.SeleniumGmailTest/GmailLoginPage.cs

調用端，改完一小段就馬上跑測試

@GmailLoginResultPage.cs

使用案例

驗証登入成功後的網址 https://mail.google.com /mail/u/0/#inbox

驗証右上角顯示登入名為"+小章"，hyper link為 https://plus.google.com/u/0/?tab=mX

處理紅框處

將這兩個驗証動作搬到 GmailLoninResultPage
{ 
    private const string s_linkContainer = "a[href='{0}']";

    public GmailLoninResultPage(FluentTest test) 
        : base(test) 
    { 
    }

    public void VerifyRedirectLink(string url) 
    { 
        I.Assert.Url(this.Url);

    }

    public void VerifyHyperLink(string name, string url) 
    { 
        I.Assert.Text(name).In(string.Format(s_linkContainer, url)); 
    } 
}
https://dotblogsamples.codeplex.com/SourceControl/latest#Simple.SeleniumGmailTest/Simple.SeleniumGmailTest/GmailLoninResultPage.cs

調用端，如下圖：

@GmailLogoutPage.cs

使用案例

按下右上角的登出

處理紅框處

登入動作搬到這裡
{ 
    public GmailLogoutPage(FluentTest test) 
        : base(test) 
    { 
    }

    public void Submit() 
    { 
        //logout 
        I.Click("span.gb_6.gbii"); 
        I.Click("#gb_71"); 
    } 
}
https://dotblogsamples.codeplex.com/SourceControl/latest#Simple.SeleniumGmailTest/Simple.SeleniumGmailTest/GmailLogoutPage.cs

調用端，如下圖：

@GmailLogoutResultPage .cs

使用案例

驗証Email

剩下最後一個地方

驗証 Email 搬到 GmailLogoutResultPage.cs
{ 
    public GmailLogoutResultPage(FluentTest test) 
        : base(test) 
    { 
    }

    public void VerifyEmail(string email) 
    { 
        I.Assert.Text(email).In("#reauthEmail"); 
    } 
}
https://dotblogsamples.codeplex.com/SourceControl/latest#Simple.SeleniumGmailTest/Simple.SeleniumGmailTest/GmailLogoutResultPage.cs

完成，調用端，如下圖：