如何使用Selenium Webdriver自動測試Angular JS

因此，我正面臨與下面的HTML交互問題。我無法打開彈出窗口並使用不同的Selenium Webdriver命令將其關閉。雖然我在這裏尋找一個特定的解決方案，但是我們也會讚賞任何有關處理Angular JS的一般技巧。我認爲問題的根本原因是我不知道使用Selenium Webdriver自動化Angular的好方法。我使用C＃，但是我會從任何編程語言中獲取任何有用的信息，因爲我總是可以改進解決方案。如何使用Selenium Webdriver自動測試Angular JS

我想這個彈出按鈕，不成功互動： UIB-酥料餅的模板= 「 '/程序/學生/評估/指令/模板/ shortTextPopupTemplate.html'」

<div class="line ttsBorder">「<span style="font-style:italic;">And be it further enacted</span><span style="display: inline;">, That in all that territory ceded</span><span short-text-popup="" accession-number="VH209006" class="ng-isolate-scope" ng-non-bindable=""><a uib-popover-template="'/app/student/assessment/directives/templates/shortTextPopupTemplate.html'" popover-is-open="ctrl.isVisible" popover-trigger="none" popover-placement="auto top" tabindex="0" title="Shows more information." ng-click="buttonOnClick($event)" ng-keydown="buttonOnKeydown($event)" ng-class="['stpu-button', {disabled: ctrl.isDisabled, active: ctrl.isVisible}]" class="ng-scope stpu-button" style="z-index: 3;"></a></span> by France to the United States&nbsp;.&nbsp;.&nbsp;.&nbsp;which lies north of thirty‑six degrees and thirty minutes north latitude&nbsp;.&nbsp;.&nbsp;.&nbsp;slavery&nbsp;.&nbsp;.&nbsp;.&nbsp;shall be, and is hereby, forever prohibited.」</div>

這是我曾嘗試：

//attempt 1 
var elements = Driver.FindElements(By.XPath("//*[@class='line ttsBorder']")); 

//attempt 2 - UserInteractions = new Actions(Driver); 
UserInteractions.MoveToElement(PopUpButton).Click().Perform(); 


//attempt 3  
    Driver.FindElement(By.XPath("//[@title='Shows more information.']")).Click(); 

//attempt 4 
//Driver.FindElement(By.XPath("//a[@uib-popover-template]")); 
    PopUpButton.Click(); 

//attempt 5 
//Working, but seems dirty - JavaExecutor.ExecuteScript("arguments[0].click();", PopUpButton);

我不得不產生tab鍵通過UI找到我想要的元素。我真的不滿意這樣一個脆弱的解決方案，並希望你能提供一些建議。

在此先感謝！

來源

2016-07-26 Nikolay Advolodkin

快速的解決辦法是建立一個CssSelector訪問你的元素是這樣的：Driver.FindElement(By.CssSelector("a[ng-click='buttonOnClick($event)']")); 一個很好的解決方法是爲正在測試每個頁面的一類，達到自己的頁面，像這樣的內容：

class LoginPageObject 
    { 
     public LoginPageObject() 
     { 
      PageFactory.InitElements(TestBase.driver, this); 
     } 

     [FindsBy(How = How.Id, Using = "UserName")] 
     public IWebElement TxtUsername { get; set; } 

     [FindsBy(How = How.Id, Using = "Password")] 
     public IWebElement TxtPassword { get; set; } 

     [FindsBy(How = How.Id, Using = "submit")] 
     public IWebElement BtnLogin { get; set; } 
    }

對於使用納克屬性訪問角元素，它最好使用Protractor-Net暴露NgBy類探討在DOM角元件是這樣的：

 var ngDriver = new NgWebDriver(driver); 
     ngDriver.Navigate().GoToUrl("http://www.angularjs.org"); 
     var elements = ngDriver.FindElements(NgBy.Repeater("todo in todoList.todos"));

上面的代碼片段的完整源代碼可以在here找到。此外，您還可以創建自己的自定義裝飾從量角器API角元素是這樣的：

public class NgByRepeaterFinder : By 
    { 
     public NgByRepeaterFinder(string locator) 
     { 
      FindElementsMethod = context => context.FindElements(NgBy.Repeater(locator)); 
     } 
    } 

    internal class NgByModelFinder : By 
    { 
     public NgByModelFinder(string locator) 
     { 
      FindElementMethod = context => context.FindElement(NgBy.Model(locator)); 
     } 
    }

然後在你的頁面類使用它們像這樣：

class YourPageObject 
{ 
    public YourPageObject() 
    { 
     PageFactory.InitElements(TestBase.ngWebDriver, this); 
    } 

    [FindsBy(How = How.CssSelector, Using = "a[ng-click='addNewTrack()']")] 
    public IWebElement BtnAddNewTrack { get; set; } 

    [FindsBy(How = How.Custom, CustomFinderType = typeof(NgByModelFinder), Using = "trackSearch")] 
    public IWebElement TxtSearchTrack { get; set; } 

    [FindsBy(How = How.Custom, CustomFinderType = typeof(NgByRepeaterFinder), Using = "track in models.tracks | filter: trackSearch")] 
    public IList<IWebElement> BtnListTracks { get; set; } 
}

完全指南如何創建您可以在here中找到您爲angularjs定製的查找器註釋器。

來源

2017-03-04 00:42:19

如何使用Selenium Webdriver自動測試Angular JS

回答

相關問題