Selenium Webdriverを使用してAngular JSのテストを自動化する方法

Question

このHTMLと対話する際に問題が発生しています。私はポップアップを開いて、別のSelenium Webdriverコマンドを使って閉じることができません。私はここで具体的な解決策を探していますが、Angular JSを扱う際の一般的なヒントもありがとうと思います。この問題の根本的な原因は、Selenium Webdriverを使ってAngularを自動化する良い方法がわからないということです。

私はC＃を使用していますが、私はいつでもソリューションを改造することができるため、プログラミング言語から役立つ情報を取ります。 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); 

私はタブ移動になる必要がありました私が望む要素を見つけるためにUIを通して。私は本当にそのような脆弱な解決策に不満であり、あなたがいくつかのアドバイスを提供できることを期待していました。

ありがとうございます！

Answer 1

クイックフィックスは、このようなあなたの要素にアクセスするためのCssSelectorを作成することです：Driver.FindElement(By.CssSelector("a[ng-click='buttonOnClick($event)']")); 良い修正プログラムは、あなたがテストしている各ページのクラスを作成し、そのようなあなたのページの要素に到達することです：

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

：NGのプロパティを使用して角度の要素にアクセスするために

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; } 
    } 

が、このようなDOMの角の要素を探索するNgByクラスを公開Protractor-Netを使用することをお勧めします

上記のコードスニペットの完全なソースコードは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; } 
} 

作成する方法についての完全なガイドをanglejsのカスタムファインダ注釈はhereにあります。