如何消除頁面對象模型中的重複Web元素

我正在使用POM框架爲我的應用程序頁面創建頁面類。假設我的應用程序中有2頁。事件2.時間軸。所以，我必須創建2個頁面類如何消除頁面對象模型中的重複Web元素

EventPage.java

public class RCON_D_EventPage 
{ 

    @FindBy(xpath="//input[@placeholder='Search for entered records']") 
    public WebElement eventSearchBox; 

    @FindBy(xpath="//button[@class='btn rc-gray-bg rc-dashboard-contact-btn ng-scope']") 
    public WebElement eventSearchButton; 


    @FindBy(xpath="//p[@ class='rc-found-record no-padding ng-binding ng-scope']") 
    public WebElement eventSearchResult; 

    @FindBy(xpath="//div/span[@class='ng-scope']") 
    public WebElement searchResultNotFound; 

    @FindBy(xpath="//li/button[@ng-click='goToFirstPage()']") 
    public WebElement nextPageButton; 

    @FindBy(xpath="//button[@ng-click='clearFilters()'][1]") 
    public WebElement clearFilterButton; 


    WebDriver driver; 

    public RCON_D_EventPage(WebDriver driver) 
    { 

     PageFactory.initElements(new AjaxElementLocatorFactory(driver, 10), this); 
     this.driver=driver; 
    } 
    public void enterTextInEventSearchBox(String text) 
    { 
     eventSearchBox.clear(); 
     eventSearchBox.sendKeys(text); 
    } 

    public void clickEventSearchButton() 
    { 
     eventSearchButton.click(); 
    } 

    public String getEventSearchResult() 
    { 
     return eventSearchResult.getText(); 
    } 

    public String getNoRecordFoundMessage() 
    { 
     return searchResultNotFound.getText(); 
    } 
    public void clickNextPageButton() 
    { 
     nextPageButton.click(); 
    } 
    public void clickClearFilterButton() 
    { 
     clearFilterButton.click(); 
    } 
}

TimeLinePage.java

public class RCON_D_TimelinePage 
{ 

    @FindBy(xpath="//input[@placeholder='Search for entered records']") 
    public WebElement timelineSearchBox; 

    @FindBy(xpath="//button[@class='btn rc-gray-bg rc-dashboard-contact-btn ng-scope']") 
    public WebElement searchButton; 

    @FindBy(xpath="//p[@class='rc-found-record no-padding ng-binding ng-scope']") 
    public WebElement searchResult; 

    @FindBy(xpath="//div[@class='row ng-scope']") 
    public List<WebElement> totalFoundRecords; 

    @FindBy(xpath="//span[text()='No data found']") 
    public WebElement noResultMessage; 

    @FindBy(xpath="//button[@ng-click='clearFilters()'][1]") 
    public WebElement clearFilterButton; 

    public RCON_D_TimelinePage(WebDriver driver) 
    { 

     PageFactory.initElements(new AjaxElementLocatorFactory(driver, 10), this); 
     this.driver=driver; 
    } 

    public void enterTextInSearchBox(String text) 
    { 
     timelineSearchBox.sendKeys(text); 
    } 
    public void clickSearchButton() 
    { 
     searchButton.click(); 
    } 
    public String getSearchResult() 
    { 
     return searchResult.getText(); 
    } 
    public int getFoundRecordCount() 
    { 
     return totalFoundRecords.size(); 
    } 

    public String getNoResultFoundMessage() 
    { 
     return noResultMessage.getText(); 
    } 

    public void clickClearFilterButton() 
    { 
     clearFilterButton.click(); 
    } 
}

因此在這裏兩個頁面有一些共同的WebElement例如//input[@placeholder='Search for entered records']或//button[@class='btn rc-gray-bg rc-dashboard-contact-btn ng-scope']等。那麼有沒有什麼辦法可以在頁面對象模型中管理這種冗餘？

來源

2017-10-04 NarendraR

您可以將常用的webelements成的基類。儘管我不得不說兩個搜索類在字段和方法上看起來非常相似。當你需要使用其他頁面對象的搜索功能時，可能會考慮將邏輯重構爲一個類並使用該類的委派。 – Grasshopper

根據您當前的模型，這應該根據頁面級別保持分開，這樣可以很容易地確定和定位。將來，如果在其他頁面中可能保持相同的元素屬性更改可能會產生問題。 –

在這種情況下，您可以使用組合（is-A，has-A關係）。

有-A的關係

您可以創建一個搜索頁面類和複製所有這個類裏面的方法。而所有其他擁有這個元素的頁面類，你可以創建這個頁面的對象。

以下示例顯示has-A的關係。

class SearchPage{ 
    @FindBy(xpath="//input[@placeholder='Search for entered records']") 
    public WebElement timelineSearchBox; 

    @FindBy(xpath="//button[@class='btn rc-gray-bg rc-dashboard-contact-btn ng-scope']") 
    public WebElement searchButton; 

    public SearchPage(WebDriver driver){ 
     PageFactory.initElements(new AjaxElementLocatorFactory(driver, 10), this); 
     this.driver = driver; 
    } 
    public void enterTextInSearchBox(String text){ 
     timelineSearchBox.sendKeys(text); 
    } 
    public void clickSearchButton(){ 
     searchButton.click(); 
    } 
} 


public class RCON_D_EventPage{ 
    SearchPage searchPage; 
    public RCON_D_EventPage(WebDriver driver){ 

     PageFactory.initElements(new AjaxElementLocatorFactory(driver, 10), this); 
     this.driver=driver; 
     searchPage = new SearchPage(driver); 
    } 
}

是-A的關係

可以實現使用is-A關係以及同樣的事情。我的意思是你可以用SearchPage類擴展每個需要搜索功能的類。

就個人而言，我會建議使用has-A關係，因爲它在編程方面更有意義，而不是如下所述的is-A。

public class RCON_D_EventPage extends SearchPage{ 

    public RCON_D_EventPage(WebDriver driver){ 
     super(driver); 
     PageFactory.initElements(new AjaxElementLocatorFactory(driver, 10), this); 
     this.driver=driver; 

    } 
}

來源

2017-10-04 13:32:02

謝謝，這似乎是可行的。我會執行相同的 – NarendraR

這聽起來像你有一個共同的標題或可能只是在兩個頁面上的搜索框。在這種情況下你會做的是隻爲頭/搜索框區域創建一個頁面對象。它將包含元素

@FindBy(xpath="//input[@placeholder='Search for entered records']") 
public WebElement eventSearchBox; 

@FindBy(xpath="//button[@class='btn rc-gray-bg rc-dashboard-contact-btn ng-scope']") 
public WebElement eventSearchButton;

然後可以從兩個現有的頁面對象中刪除。無論您在哪個頁面上，都可以在需要時實例化頁眉頁面對象。

請勿將頁面對象視爲表示整頁。把它們想象成一個小部件對象，其中一個小部件可以是一個完整的頁面，或者只是頁面的一部分，其功能在不同的頁面上重複。

來源

2017-10-04 14:43:44 JeffC

@downvoter解釋嗎？ – JeffC

如何消除頁面對象模型中的重複Web元素

回答

相關問題