为WebDriver识别基于Angular的站点上的元素

Question

有一个基于Angular的站点，它不使用唯一的名称/ ID作为元素。元素的XPATH在页面上不是永久性的，因此在每次网站修改后都必须更改基于WebDriver的测试。如何在不使用XPATH的情况下管理此页面上的元素？

Answer 1

首先，按照Page Object pattern至少在一个地方定义定位器 - 内部页面对象。这有助于解决不断变化的用户界面问题。

其他需要考虑的事项：

• 避免using XPaths altogether，为什么：

• 这是所有人中最慢和最脆弱的定位策略
• 标记非常容易更改，因此xpath定位器需要大量维护
• xpath表达式是不可读的，很难调试

• 不依赖于页面的结构或元素的相对位置
• 避免重复定位器或定位器的一部分 - 重复的次数越多，设计/ UI更改时需要更改的次数越多
• 记住像div或span这样的元素只是容器 - 在定位器中使用它们很少被证明是合理的
• 使您的定位器可读并基于数据 - 而不是设计或布局。例如，不要使用像col-md-4或col-xs-6这样的Bootstrap面向布局的类
• 请遵循这些文章中建议的一些常见最佳做法： Writing reliable locators for Selenium and WebDriver tests Using Locators

Answer 2

简单的问题，简单的答案：

如果您不能使用名称/ ID并且不想使用xpath，则在处理链接时，您仅限于css选择器，类名，标记名称和（部分）链接文本。

也许这个article helps。

Answer 3

不要依赖JUST一个选择器方法！

您可以使用任何其他findElement（）选项，例如cssSelector，name，tagName等。更重要的是，您不必单独使用它们。换句话说，尽可能通过一种方法然后切换到另一种方法。这是一个从XPath开始并使用css完成的Java示例：

private final String xGrid = "//div[contains(@class,'lists-grid')]/div[contains(@class,'ui-grid')]";
private final String xGridWrapper = "/div[contains(@class,'ui-grid-contents-wrapper')]";

@FindBy(xpath = xGridScopeSubscriptions + xGridWrapper)
private List<WebElement> gridRecordList;

public void clickGridSubscriptionActionEditByRow(int row) {
    int totalColumns = gridRecordList.size();
    int actionColumn = getColumnIdByHeader("Action");

    WebElement actionCell = gridRecordList.get((totalColumns * row) + actionColumn);
    WebElement editButton = actionCell.findElement(By.cssSelector("button.subscription-edit-btn"));

    editButton.click();
}

请注意，这是一种不同的大杂烩，但我希望你能得到这个想法。

从字符串开始，在代码中定义关键标记。连接字符串以为起始点分配WebElement变量。然后在方法中，使用起点，根据不同的选择器从那里做findElements（）。

您甚至可以一次性完成所有操作。

private WebElement deleteIcon driver.findElement(By.id("name-list")).findElement(By.cssSelector("div.grid-ui div.grid-cell")).findElement(By.xpath("./td[3]/i[contains(@class,'fa-trash')]"));

我知道你说ID不稳定，但我只想给你一个例子，将不同的查找元素的方法串联起来，以达到你的最终目标。