如何为涉及 ::before 标记的元素编写 xpath答案

【问题标题】：How to write the xpath for an element where ::before tag is involved如何为涉及 ::before 标记的元素编写 xpath
【发布时间】：2020-12-29 21:31:08
【问题描述】：

我正在尝试单击后跟::before 标记的选择元素。谁能帮我为下面的 HTML 编写 XPath 或 CSSselector 路径

下面是我写的点击月份的XPath

driver.findElement(By.xpath("//div[contains(@class,'pika-single is-bound left-aligned bottom-aligned')]/div[contains(@class,'pika-lendar')]/div[contains(@class,'pika-title']/div[1]/select[contains(@class,'pika-select pika-select-month')]"));

【问题讨论】：

::before tag 并不会真正影响您的选择器。只需尝试使用 Select 类处理 select 节点并通过 CSS 选择器搜索 "select.pika-select-month"

标签： java selenium xpath css-selectors webdriverwait

【解决方案1】：

Pseudo Elements

CSS pseudo-element 用于设置元素的指定部分的样式。它可以用于：

为元素的第一个字母或行设置样式
在元素内容之前或之后插入内容

::之前

::before 是一个伪元素，它允许您从 CSS 将内容插入页面（无需在 HTML 中）。虽然最终结果实际上并不在 DOM 中，但它在页面上就好像它在。

您可以在以下位置找到一些相关的详细讨论：

这个用例

由于日期选择器是html-select 菜单，您必须使用Select Class。此外，由于您必须与drop-down-menu 交互，因此您必须为elementToBeClickable() 诱导WebDriverWait。

要从dropdown 中选择文本为January 的<option>，您可以使用以下Locator Strategies：

使用cssSelector：

WebElement elem = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("select.pika-select.pika-select-month")));
Select mySelect = new Select(elem);
//selecting the item January by value
mySelect.selectByValue("0");

使用 xpath 并在一行中：

//selecting the item January by visible text
new Select(new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//select[@class='pika-select pika-select-month']")))).selectByVisibleText("January");

您可以在以下位置找到一些相关的详细讨论：

【讨论】：