具有 ::before 的 WebDriver 选择元素

Posted 2023-03-06

【中文标题】具有 ::before 的 WebDriver 选择元素

【英文标题】：WebDriver select element that has ::before

【发布时间】：2015-06-28 15:05:39

【问题描述】：

我有 2 个元素具有相同的属性，但在页面上一次显示一个（显示一个时，另一个消失）。两者之间的唯一区别是显示的元素将具有 ': :before' 选择器。是否可以使用 xpath 或 css 选择器根据元素的 id 以及它是否有 ::before 来检索元素

【问题讨论】：

元素没有 id。为什么不直接使用类名选择它？

因为两个元素具有相同的类名

您如何在 CSS 中区分它们，以便将 :before 伪元素应用于正确的元素？

查看这个答案 - ***.com/a/28265738/4720017

Selenium WebDriver get text from CSS property "content" on a ::before pseudo element的可能重复

【参考方案1】：

我打赌也会尝试使用上面的 javascript 解决方案。

因为 ::after 和 ::before 是一个伪元素，它允许您从 CSS 将内容插入页面（无需在 html 中）。虽然最终结果实际上并不存在于 DOM 中，但它在页面上显示就好像它存在一样 - 您可以看到它，但无法通过 xpath 真正找到它（https://css-tricks.com/almanac/selectors/a/after-and-before/）。

我还可以建议是否可以使用不同的 ID，或者如果它们在 DOM 中的不同位置使用上方/下方元素生成更复杂的 xpath，并查看它是否显示。

【参考方案2】：

String script = "return window.getComputedStyle(document.querySelector('.analyzer_search_inner.tooltipstered'),':after').getPropertyValue('content')";
                        Thread.sleep(3000);
                        JavascriptExecutor js = (JavascriptExecutor) driver;
                        String content = (String) js.executeScript(script);
                        System.out.println(content);