如何使用SeleniumWebdriver自动测试Angular JS
本文关键字:Angular JS 自动测试 SeleniumWebdriver 何使用 | 更新日期: 2023-09-27 17:58:45
所以我在与下面的HTML交互时遇到了一个问题。我无法使用不同的SeleniumWebdriver命令打开和关闭弹出窗口。尽管我在这里寻找一个特定的解决方案,但任何关于处理Angular JS的一般提示也将不胜感激。我认为问题的根本原因是我不知道使用SeleniumWebdriver实现Angular自动化的好方法。
我使用的是C#,但我会从任何编程语言中获得任何有用的信息,因为我总是可以改进解决方案。
我正在尝试与此弹出按钮进行交互,但未成功:uib popover template="'/app/student/aestination/directives/templates/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 . . . which lies north of thirty‑six degrees and thirty minutes north latitude . . . slavery . . . 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中进行选项卡式切换,以找到我想要的元素。我真的对这样一个脆弱的解决方案感到不满,希望你能提供一些建议。
提前感谢!
快速修复方法是创建一个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; }
}
对于使用ng属性访问Angular元素,最好使用Protractor Net,它公开了NgBy类来探索DOM中的Angular元素如下:
var ngDriver = new NgWebDriver(driver);
ngDriver.Navigate().GoToUrl("http://www.angularjs.org");
var elements = ngDriver.FindElements(NgBy.Repeater("todo in todoList.todos"));
上面代码片段的完整源代码可以在这里找到。此外,您还可以从量角器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; }
}
关于如何为angularjs创建和自定义finder注释器的完整指南可以在这里找到。