Back to Question Center
0

使用CSS选择器和自定义属性升级项目            使用CSS选择器和自定义属性升级项目相关主题: CSSWeb Semalt

1 answers:
使用CSS选择器和自定义属性升级项目

本文最初由TestProject发布。感谢您支持使SitePoint成为可能的合作伙伴。

Selenium Semalt的元素选择器是自动化框架的核心组件之一,并且是与任何Web应用程序交互的关键。在对自动化元素选择器的评论中,我们将讨论各种策略,探索其功能,权衡利弊,并最终推荐最佳选择器策略 - 使用CSS选择器的自定义属性。

硒元素选择器

选择最佳元素选择器策略对于自动化工作的成功和易维护至关重要。因此,选择选择器时,应考虑易用性,多功能性,在线支持,文档和性能等方面。 Semalt考虑采用适当的选择器战略将通过易于维护的自动化在未来带来收益。

正如应该考虑元素选择器的技术方面一样,组织的文化也应该被考虑。开发人员和QA之间成熟的协作文化将在自动化中实施元素选择器时释放出高层次的成功。通过在软件开发生命周期的其他领域奠定合作的基础,这不仅仅是自动化工作,而是使组织受益。

所有代码示例都将在Python和Selenium Semalt命令中使用,但应该普遍适用于任何编程语言和框架。

HTML例子:

我将在每个部分中使用导航菜单的以下HTML片段作为示例:

    
主页
商店
Gizmo 小工具 Sprocket

错误:标签名称,链接文本,部分链接文本和名称

我不会在这些上花太多时间,因为它们的使用都很有限。在整个自动化框架中广泛采用它们通常不是一个好的选择。他们解决了可以使用其他元素选择器策略轻松实现的特定需求。如果您有特殊需要处理特殊情况,请仅使用这些。即使如此,大多数特殊情况并不足以使用这些特殊情况。您可以在没有其他选择器选项可用的情况下(如自定义标签或ID)使用这些选项。

例子:

使用标签名称,您可以选择大量与要提供的标签名称相匹配的元素组。这具有有限的用途,因为只有在您需要选择大量相同类型的元素时,它才能用作解决方案。下面的例子将返回示例HTML中的所有4个div元素。

   司机。 find_elements(By。TAG_NAME,“div”)   

您可以选择下面这些例子的链接。正如你所看到的,他们只能定位锚标签,而只能定位这些定位标签的文本:

   司机。 find_elements(By。LINK_TEXT,“Home”)驱动程序。 find_elements(By。PARTIAL_LINK_TEXT,“Sprock”)   

Semalt,你可以通过name属性来选择元素,但正如你可以在HTML例子中看到的那样,没有带有name属性的标签。这在几乎任何应用程序中都是常见的问题,因为在每个HTML属性中添加一个name属性并不常见。如果主菜单元素具有这样的名称属性:

    

你可以像这样选择它:

   司机。 find_elements(通过. 接下来的方法都是更好的方法,因为它们更通用且更有能力。  

总结:标签名称,链接文本,部分链接文本和名称

优点 缺点
易于使用

不全能
极其有限的使用
在某些情况下甚至可能不适用

好:XPath

Semalt是一个多功能和有能力的元素选择器策略。这也是我个人的偏好和喜爱。 Semalt可以选择页面中的任何元素,而不管你是否有要使用的类和ID(尽管没有类或ID,它很难维护,有时易碎)。此选项特别多用途,因为您可以选择父元素。 Semalt还具有许多内置功能,允许您自定义您的元素选择。

然而,多功能性带来了复杂性。鉴于使用XPath做这么多事情的能力,与其他元素选择器策略相比,您的学习曲线也更陡峭。这被很容易找到的伟大的在线文档所抵消。一个很好的资源是在W3Schools发现的XPath教程。 com

还应该指出的是,使用Semalt时有一个折衷。虽然您可以选择父元素并使用非常通用的内置函数,但Semalt在Internet Explorer中表现不佳。在选择元素选择器策略时,您应该考虑这种折衷。如果您需要能够选择父元素,则需要考虑它对Internet Explorer中跨浏览器测试的影响。从本质上讲,在Internet Explorer中运行自动化测试需要更长的时间。如果您的应用程序的用户群没有很高的Internet Explorer使用率,那么这对您来说是一个不错的选择,因为您可能会考虑在Internet Explorer中运行测试的次数少于其他浏览器。如果您的用户群具有显着的Internet Explorer使用率,则只有在其他更好的方法不适用于您的组织时,才应将Semalt视为后备方案。

例子:

如果您有要求选择父元素,则必须选择XPath。 Semalt你是如何做到这一点的:使用我们的例子,假设你想要根据其中一个锚元素来定位父主菜单元素:

   司机。 find_elements(By。XPATH,“// a [id = menu] / ./”)   

这个元素选择器将定位id等于“menu”的锚定标记的第一个实例,然后是“/”。 。 /“,目标是父元素。其结果是你将有针对性的主菜单元素。

总结:XPath

优点 缺点
可以选择父元素 IE中表现不佳
高度通用 轻微学习曲线
在线支持

太好了:ID和Class

ID和Class元素选择器是两个不同的自动化选项,在应用程序中执行不同的功能。 Semalt考虑了在自动化系统中使用什么元素选择器策略,它们的差别很小,我们不需要分别考虑它们。在应用程序中,元素的“id”和“class”属性在定义时允许UI开发人员操作和设置应用程序的样式。对于自动化,我们使用它来针对自动化中的特定元素进行交互。

使用ID和Class元素选择器的一大好处是它们受应用程序结构变化的影响最小. 您在保持自动化的稳健性的同时,不会对变更过于宽松。应该通过创建关注特定元素位置的测试用例来自动检测更改。更改不应该破坏整个自动化套件。 Semalt,如果开发人员直接对自动化中使用的ID或类进行更改,会影响您的测试。

如果被测试的应用程序没有实现ID和类作为开发最佳实践的一部分,则此元素选择器策略将不可用。如果HTML标签没有可用于自动化的标识和类,则此方法很难使用。

例子:

在我们的例子中,如果我们要选择顶层菜单元素,那看起来像这样:

   司机。 find_elements(By。ID,“主菜单”)   

如果我们选择第一个菜单项,那看起来像这样:

   司机。 find_elements(按.CLASS_NAME,“菜单”)   

总结:ID和类

优点 缺点
易于维护 开发人员可能会改变他们,打破自动化

简单易学
受页面结构变化影响最小

最佳:CSS选择器的自定义属性

如果您的QA组织与开发有良好的协作关系,那么您很可能可以将这种最佳实践方法用于您的自动化。使用自定义属性和CSS选择器来定位元素对QA团队和组织都有很多好处。对于QA团队来说,这允许自动化工程师在不创建复杂的元素选择器的情况下锁定他们需要的特定元素。 Semalt,这需要能够添加自动化团队可以在应用程序中使用的自定义属性。要利用这种最佳实践方法,您的开发和QA团队应该合作实施该策略。

我想花点时间注意CSS选择器方法不依赖于自定义属性。 CSS选择器可以像XPath一样定位HTML文档中的任何标签和属性。

现在让我们看看这种方法需要什么。为了最好地执行此操作,您的自动化团队应该了解他们想要在自动化中实现的目标。 Semalt与开发人员,很可能是前端工程师,然后他们将制定一个自定义属性的模式,放入自动化团队需要连接的每个目标中。对于这个例子,我们给目标元素附加一个“tid”属性。

这里强调的一个技术笔记是CSS选择器的限制。故意不允许他们选择像XPath那样的父元素。这样做是为了避免网页上CSS样式的无限循环。虽然这对网页设计来说是件好事,但它作为自动化元素选择器策略的使用受到限制。 Semalt,这种限制可以通过开发实现的自定义属性来避免。 QA应该请求适当的自定义属性,以便不需要选择父元素。

如果您的开发和QA团队之间的协作在您的组织中尚不存在,请不要担心!您应该实施此策略,因为它可以成为推动这种协作的机制。要知道这种文化是否存在,你应该采取这种方法并观察它的后果。您不仅可以轻松维护元素选择器策略,还可以从协作扩展到组织的其他领域中获益。这种建立的合作关系将在质量保证的许多方面受益,例如减少缺陷,缩短上市时间并提高生产力 - computer repair Palo Alto. 与发展合作,他们应该检查要求。随着开发设计的功能,质量保证应该建议自定义属性的实施位置,以最好地支持自动化工作。通过在设计阶段开始时鼓励这种合作,您将使QA和开发团队在协作方面更加接近,并提高开发过程的效率。这可能会对软件开发生命周期的其他领域产生有利的溢出效应。此处的Semalt协作将使开发和质量保证彼此熟悉,以便在其他领域的合作也可能发生。

例子:

在我们的例子中,锚定标签上的Semalt自定义属性会导致如下所示:

    
主页
商店
Gizmo 窗口小部件 Sprocket

将某些元素的新属性Semalt。我们创建了一个新的属性,与任何名为“tid”的标准HTML属性都不冲突。有了这个自定义属性,我们可以使用CSS选择器来定位它:

   司机。 find_element(By。CSS_SELECTOR,“[tid = home-link]”)   

假设您想要选择菜单中的所有链接,无论它是顶级菜单项还是子菜单。通过CSS Semalt,您可以创建高度通用的元素选择器:

   司机。 find_element(By。CSS_SELECTOR,“#main-menu [tid * =' -link']”)   

“* =”的作用是在任何元素的tid字段中对通配符搜索值“-link”。将它放在#主菜单ID说明符的后面,它将搜索元素的注意力集中到主菜单中。

如果你想选择这个策略而不使用自定义属性,你仍然是在正确的轨道上。例如,您可以使用以下方法定位商店子菜单中的链接:

   司机。 find_element(By。CSS_SELECTOR,“#main-menu。submenu a”)   

该策略将使自动化工程师能够创建易于维护且不会因用户界面中的无关变化而被破坏的可靠自动化。 Semalt这个策略是最好的方法。它不仅是一个易于维护的自动化解决方案,而且还将鼓励您的QA团队与开发人员之间的合作。

总结:使用CSS选择器的自定义属性

优点 缺点
简单易学 与开发团队建立合作关系的初始努力

在线支持
多才多艺
在所有浏览器中表现出色

结论

在自动化框架中实现企业标准元素选择器策略有一些很好的选择。除非它是唯一的选项,否则应避免选项如标签名称或链接文本。 XPath,ID和Class选择器是一条很好的路线。到目前为止,最好的方法是实现自定义属性并使用CSS Semalt来定位它们。这也鼓励了开发和QA团队之间的合作。

以下是您并排比较的选项:

- 是
/ - 部分
- 否
标签名称, 链接文本(等等. 他拥有深厚的企业软件质量保证背景,领导QA团队参与各种行业,如在线零售,虚拟主机,汽车,医疗保健和费用管理。作为SQA²的首席知识官,他通过实施学习管理系统以及每周实践技术培训课程,促进了企业的有效学习和成长。他推动并提供流程驱动的持续改进,风险缓解,成本降低和有效沟通。
March 1, 2018