如何在angularJS前端使用selenium自动化测试

Question

我正在测试一个用.NET后端和AngularJS前端编写的应用程序。使用带有specflow集成的Selenium (C#)编写一些自动化测试。

我已经完成了初始设置，但我面临的最大困难之一是检测动态web元素。由于应用程序使用的是Angular，所以除非我尝试使用XPath，否则我无法轻松识别大多数元素。Selenium不支持复合类名，如"class="ng-pristine ng-valid ng-touched"“，并且ID不断变化。

有没有更好的方法来做这件事？或者一个我可以用来让我的生活更轻松的图书馆？

感谢您提供的任何输入:)

Answer 1

为了测试AngularJS应用程序，我建议您使用Protractor。它是用于AngularJS应用程序的端到端测试框架。当你使用任何自动化工具来自动化Angular应用程序时，你面临的问题是非常常见的，这就是为什么Google提出了Protractor。

对于复合类使用：

driver.findElement(By.cssSelector(".ng-pristine.ng-valid.ng-touched");

Answer 2

我同意Shubhasmit Gupta的观点。唯一的问题是，原来的量角器是基于JavaScript的，它可能是挑战开始使用它。我推荐使用Protractor.NET，它也允许你在SpecFlow中使用它。

量角器的主要优点是它允许使用特定的角度定位器: NgBy.Model，NgBy.Repeater，NgBy.Binding等，并提供良好的同步机制。

因为Protractor是selenium的包装器，所以您可以使用所有Selenium函数。

Answer 3

Shubhasmit Gupta关于在AngularJS应用中使用Protractor的看法是正确的。但是，如果您还没有准备好走上这条路，那么使用xpath有什么错呢

使用您的示例，您可以很容易地使用class参数标识您的对象，如果您确定不会再有任何动态加载的类：

//*[@class='ng-pristine ng-valid ng-touched']

或者像这样，如果有可能有更多的类被动态加载到该元素上：

//*[contains(@class='ng-pristine ng-valid ng-touched')]

或者，如果您的类的顺序也可能发生变化：

//*[contains(@class='ng-pristine') and contains(@class='ng-valid') and contains(@class='ng-touched')]

当然，这种方法假设您的元素可以通过这个类属性的组合来唯一地标识，或者您正在搜索一组对象，或者您将使用其他属性来使标识惟一。

使用cssSelector的Shubhasmit Guptas方法通常被认为是更快、更精确的方法，如果您能够仅通过这些类的组合来识别对象的话。如果您不仅需要类，还可能需要更多的属性，那么最好使用xpath。