Html 如何在automation testwith:：中编写css选择器以查找元素

如何使用：：before选择器为复选框创建css选择器。我想创建一个单选按钮的css选择器。 我正在firepath中使用标签选择器，例如：

[data model cid=“c279”]>label

，它向我显示元素。但是在测试脚本中，它无法获取元素。在google控制台中，当我尝试通过

$（“[data model cid=“c279”]>label”获取元素时

它无法获取元素。因此我认为需要在选择器中添加：：before选择器来搜索元素。下面给出了Html。如何使用：：before编写选择器

    <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>

：：之前
：：之前
4年
（+39美元）

据我所知，您不能这样做，主要是因为

输入是一个空标记（自动关闭），基本上没有内容

在
元素中，如果您查看以下示例

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

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

到


：：之前
：：之后

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

从

：before和：after伪元素与其他元素交互
盒子…就好像它们是插在盒子里的真实元素一样
关联元素。”

正确的
标记如下所示：

<input type="radio" />



由于没有任何空间来放置
：：before
和
：：after
，因此它将不起作用。不幸的是，您必须找到另一种解决方案。
：对于javascript来说，before
元素不存在，因为它们不是实际的元素。但是，
[data model cid=“c279”]>标签应该可以工作。它的可能副本不起作用。在google控制台中，
$（'[data model cid=“c279”]>label'）。text（）
给出“”和
$（'[data model cid=“c279”]>label'）
给出[]它无法获取元素可能有很多原因-无论您将JS放在何处，无论您是否等待
DOMContentLoaded
。。。但是查询字符串对于您发布的代码是正确的，应该选择正确的元素。
<input type="radio"></input>

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

<input type="radio" />