通过 Selenium 和 Java 使用 CssSelector 识别新添加的元素答案

【问题标题】：Identifying the newly added element using CssSelector through Selenium and Java通过 Selenium 和 Java 使用 CssSelector 识别新添加的元素
【发布时间】：2019-09-01 19:08:12
【问题描述】：

我有一个元素在添加其各自的项目后会获得不同的新 css 选择器，所以每次我在页面上添加一个项目时，该项目都会被添加为最后一条记录，那么我如何检测并捕获它的 css 选择器？

WebElement changingselec = driver.findElement(By.cssSelector("body > app > div > manage-corr-app > div > div.flex-5.work-area-large > manage-user-recipient-groups > div > div:nth-child(10)"));

changingselec.click();

注意div:nth-child(10) 表示当前最后一条记录是第十条记录，如果我添加一个新记录，那么它的选择器会将这部分呈现为div:nth-child(11)，因此我无法预测目标项目的正确选择器。

【问题讨论】：

标签： java selenium selenium-webdriver css-selectors katalon-studio

【解决方案1】：

CSS 中有一个 :last-child 选择器。试试这个

WebElement changingselec = driver.findElement(By.cssSelector("body > app > div > manage-corr-app > div > div.flex-5.work-area-large > manage-user-recipient-groups > div > div:last-child"));

【讨论】：

【解决方案2】：

如果新添加的<div> 是其父级的最后一个子级，那么@MateMrše 解决方案就是完美的。

使用div:last-child：选择每个div 元素，它是其父元素的最后一个子元素：

WebElement changingselec = driver.findElement(By.cssSelector("body > app > div > manage-corr-app > div > div.flex-5.work-area-large > manage-user-recipient-groups > div > div:last-child"));

如果新添加的<div> 是其父级<div> 类型的last child，那么您需要：

使用div:last-of-type：选择作为其父元素的最后一个<div> 元素的每个<div> 元素：

WebElement changingselec = driver.findElement(By.cssSelector("body > app > div > manage-corr-app > div > div.flex-5.work-area-large > manage-user-recipient-groups > div > div:last-of-type"));

【讨论】：

【解决方案3】：

我在工作中的年长同事那里找到了我的问题的答案，如下所示：

String changingselec = "";

int lastChildIndex = driver.findElements(By.cssSelector("body > app > div > manage-corr-app > div > div.flex-5.work-area-large > manage-user-recipient-groups > div > div.panel")).size(); 

//I replaced the last section in the selector above > div:nth-child(10) by > div.panel because all elements share the same parent panel

changingselec = driver.findElement(By.cssSelector("body > app > div > manage-corr-app > div > div.flex-5.work-area-large > manage-user-recipient-groups > div > div.panel:nth-child(" + Integer.toString(lastChildIndex) + ")")).click();

我希望这会有所帮助。

【讨论】：