html - 如何在自动化测试中编写 css 选择器::在查找元素之前

Question

如何使用::在选择器之前为复选框创建一个 css 选择器。我想创建单选按钮的 css 选择器。我在 firepath 中为例如 [data-model-cid="c279"]>label 使用选择器，它向我显示了元素。但是在测试脚本中它无法获取元素。在当我尝试通过 $('[data-model-cid="c279"]>label') 获取元素时，谷歌控制台无法获取元素。所以我认为::之前选择器中需要添加选择器来搜索元素。下面给出了Html。如何在::之前写一个选择器？

    <div class="radio" data-model-cid="c279">
      :: before
    <input id="pac-item-care-plan-4 years-45924345-view261" class="js-care-plan-update" type="radio" value="45924345" name="pac-item-care-plan-view261" data-analytics-id="cpradio" data-groupid="472AB3B8BDAD4A4AA78A7CF484FFA7E4" data-offerid="F259143E766145DF8F50DF46F9EC10B7" data-action="add" checked="checked"/>
    <label class="no-wrap" for="pac-item-care-plan-4 years-45924345-view261">
      :: before
      4 years 
    <strong>(+ $39)</strong>
    </label>
    </div>

Answer 1

据我所知你不能这样做，主要是因为 input是一个空标签(自闭)，基本上没有内容。

在 <div> 内元素，如果你看下面的例子

<style>
    .my-div::before {
        content: 'before';
    }

    .my-div::after {
        content: 'after';
    }
</style>
<div class="my-div"></div>

你会注意到在 chrome devtools 中你会得到这样的东西

<div class="my-class">
    ::before
    ::after
</div>

这是可能的，因为 ::before和 ::after伪元素存在于 inside div 标签中，如果您添加另一个具有高度和背景的子 div，您将看到 before 字样弹出在子 div 上方，并且 < em>after 在子 div 之后弹出 - 这是因为它们基本上是子元素，但以不同方式插入(通过 CSS)。

下面是你要浏览器做的事情

<input type="radio"></input>

到

<input type="radio">
    ::before
    ::after
</input>

但这已经是错误的了，因为输入标签中不应该有任何内容。大多数浏览器可能会忽略这一点，甚至会尝试为您修复标记，但您根本无法让它正常工作。

来自documentation on MDN

"The :before and :after pseudo-elements elements interact with other boxes... as if they were real elements inserted just inside their associated element."

一个正确的<input>标签看起来像这样:

<input type="radio" />

因为这没有任何空间来放置 ::before和 ::after在里面是行不通的。不幸的是，您将不得不寻找替代解决方案。