就 selenium webdriver 中元素定位器的层次结构提供建议

Question

虽然我知道如何在 Selenium Webdriver 中搜索页面上的不同元素以供 usr 进行测试，例如通过 xpath、id、css 等，但我在获得一些关于使用哪个层次结构以及为什么的建议？例如。我们应该在恢复搜索 id 之前使用 xpath 定位器吗？

了解这一点将使我能够以正确的方式构建我的测试，以便它们尽快运行。

Answer 1

根据我对 selenium 的经验，我认为以下是最好的层次结构：

1. 身份证

2. 姓名

3. 链接文本

4. 部分链接文本

5. 标签名称

6. 类名

7. CSS

8. xpath

1 - 按 ID 每个元素都是唯一的，因此我们很容易访问，对于网络驱动程序来说也很快。大多数情况下，我们应该优先考虑 Id 来查找元素。

2 - 如果 By ID 不正确，那么我们应该查看“名称”。但是很多时候会发生多个名称，所以如果相同的名称属性出现多次，则需要注意这一点。

3 - “通过链接文本”和“通过部分链接文本”如果站点中的所有链接都有唯一的链接文本，也是查找元素的好方法。

4 - 如果您的网站或页面有下拉菜单、复选框等组元素，那么您可以使用属性“按标记名” 来查找元素。

5 - 通过“类名” 是一种罕见的查找元素的方法，因为大多数网站使用相同的类名来为多个项目应用 css。但请确保您可以将其用于唯一的类名。

6 - 如果您需要快速定位复杂元素，请使用属性 “Css 选择器” 来查找元素。

7 - 主要使用 "Xpath" 属性来导航 xml 文档。您仍然可以将其用于网页或网站。

注意：元素定位器的选择基本上取决于您的页面，即页面包含的内容类型太多，例如太多的下拉菜单、复选框、文本框等等。但是我给定的步骤是通用的，您可以按照任何站点来查找元素并顺利执行程序。

希望以上内容对您有很大帮助。

其他参考link。

Answer 2

其实是主观的。

在大多数 Web 应用程序的情况下，必须将 Id 和 Name 作为首选。

ID

我见过使用 EXT-JS 在运行时动态分配 ID 的 Web 应用程序。在这里，使用 ID 是不行的。

CSS

在 Safari 上使用 FF 和 IE 的 CSS 有时会失败。

非常有必要了解 AUT，然后选择最好的。对于标准 Web 应用程序，层次结构可以是

1) 身份证

2) 名称

3) 标记名

4) 类名

5) CSS

6) XPath

7) LinkTtext/PartialLinkTest

Answer 3

更有效的 XPath 可能是

By.xpath("//div[@class='1']//div[@class='4']")

在这里，假设 Class=4 的 Div 在 2 类子元素中是唯一的。 另外，你应该避免使用 .在元素的开头使遍历更快

Answer 4

假设这里是层次结构：

<div class="1">............  (suppose it's div 1 open)
  <div class="2">........    (div 2 open)
     <div class="3">.......  (div 3 open)
     </div>.....             (div 3 closed)  
     <div class="4">......   (div 4 open)  
     </div>.....             (div 4 closed)
   </div>.........           (div 2 closed)
</div>.........              (div 1 closed)

现在，我们要访问 div 4

注意：div 3 和 div 4 是同级的，这两个是 div 2 的子级，div 2 的父级是 div 1

我们要访问 4 类

我们使用 xpath 来做，但是 div 4 的类不是唯一的，而类 1 是唯一的，所以你可以这样遍历它：

By.xpath(".//div[@class='1']/div/div[2]")

解释：div[2] 表示它将访问具有 3 类 div 的类 1，其子类具有 3 类和 4 类的两个 div，但我想访问第二个 div 有 4 类所以，div[2]。

cssSelector

有时我们无法访问路径，所以我们可以使用 css 选择器来访问它，假设我们有这样的场景

<div class="1">
    <rect class="2">
         <text class="3">
         </text>
    </rect>
</div>

访问文本类

我们使用By.cssSelector 作为：

By.cssSelector("text[class='3']");