如何检查Cypress中span节点内不存在伪元素(:：after)？
在Cypress中检查span节点内是否存在伪元素(:：after)，可以通过以下步骤进行：
- 使用Cypress的
get命令获取目标span节点，例如：
cy.get('span')- 使用
.should命令结合.not断言来判断span节点内是否存在伪元素(:：after)，例如：
cy.get('span').should('not.have.css', 'content', 'after')这里使用not.have.css来判断span节点的content属性是否为after，如果不是，则表示不存在伪元素。
完整的答案示例： 在Cypress中，要检查span节点内是否存在伪元素(:：after)，可以使用以下代码：
cy.get('span').should('not.have.css', 'content', 'after')这段代码会获取所有的span节点，并断言它们的content属性不为after，从而判断是否存在伪元素。
Cypress是一个基于JavaScript的前端端到端测试框架，它提供了丰富的API和工具，用于编写可靠的自动化测试。它的优势包括易于使用、强大的断言库、可靠的测试结果和丰富的插件生态系统。
在前端开发中，Cypress可以用于测试网页应用的各个方面，包括用户交互、页面渲染、表单验证等。它支持各种主流的前端框架和库，如React、Vue和Angular。
腾讯云提供了云计算相关的产品和服务，其中与Cypress相关的产品是腾讯云的云测（Cloud Test）服务。云测是一款全面的移动应用测试解决方案，支持自动化测试、性能测试、兼容性测试等多种测试类型。您可以通过以下链接了解更多关于腾讯云云测的信息：腾讯云云测产品介绍。
相关·内容
看看下面的代码，您可以看到在span元素的右侧有一个close图标。 span {
width: 100%;
display: inline-block;
}
span:after {
content: "\2715";
float: right;
position: absolute;
}
span:hover:after {
cursor: pointer;
} <span>Content</span> 我希望:after的行为像一个按钮。正如您所看到的，它使光标成为悬停时的指针。我怎样才
浏览 29提问于2019-10-07得票数 7
回答已采纳
我尝试在input字段上使用:after CSS伪元素，但它不起作用。如果我将它与span一起使用，它可以正常工作。
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
这行得通(把笑脸放在"buu!“后面在“更多”之前)
<span class="mystyle">buuu!</span>a some more
这不起作用-它只将someValue显示为红色，但没有
浏览 26提问于2010-04-07得票数 776
回答已采纳
例如，我有：
<span class="obfuscate oxy">abc</span>
<style>.oxy::after{content:"n";}</style>
<span class="obfuscate sin">text 1<span class="a">text in span</span>text 2</span>
<style>.sin::after{content:"h";}<
浏览 1提问于2013-06-10得票数 0
我得到了span和::after伪元素：
#someId {
font-family: Arial;
font-size: 36px;
color: red;
}
#someId::after {
content: 'B';
}
<span id="someId">A</span>
我希望使::after元素可见，同时隐藏主元素。我试着使用opacity、filter: opacity和visibility，但这行不通。如何在不操作color 属性的情况下实现所需的行为，同时保持文本可选择的
谢谢你的帮助。
浏览 4提问于2017-09-23得票数 7
回答已采纳
外面也有类似的问题，但显然和我没有发现的一样。所以问题是：
如何将样式设置在：：后伪元素悬停时：：在伪元素之前(不是宿主元素)？
代码示例：
.contact {
position: relative;
}
.contact::before {
content: '';
position: absolute;
top: 0;
right: -10px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: hotpink;
}
.contact::after {
浏览 0提问于2019-01-01得票数 0
1回答
在我的站点上设计组件时，我发现在span的末尾( h2中)添加空格会以一种奇怪的方式影响span:after的绝对定位。用作边框的after元素。边框在没有空白的内容之后定位，但是当有空白时，边框定位在内容上。。
关于为什么会呈现不同的想法吗？
html：
<h2>
<span>A test</span> <!-- the border appears 'after' the content -->
</h2>
<h2>
<span>A test </span> <!-- th
浏览 2提问于2016-10-21得票数 1
回答已采纳
.foo:before {
}
.foo:after {
}
结果：
<div class="foo">
:before
<div class="somecontent"></div>
:after
</div>
是否可以为.foo选择以下:before和:after
:before
<div class="foo">
</div>
:after
<div class="bar">
</div>
浏览 3提问于2015-07-21得票数 1
这是我的第一个问题，所以我希望我问对了。
Matthew Cain用html和css创建了一个很棒的单选按钮的例子，可以在上看到。在其中，他使用了以下代码：
body {
margin: 0;
padding: 0;
font-family: 'PT Sans', sans-serif;
font-size: 1.3em;
font-weight: bold;
color: #fff;
}
#first {
background-color: #4B4D65;
}
#second {
background-color: #FF8A66;
}
浏览 0提问于2018-11-07得票数 1
1回答
我的文字在html中用来显示图标字体的图标出现在谷歌搜索结果中。我怎么才能阻止这一切的发生？
我已经添加了area-hidden和role='img'，但它们似乎没有任何影响。
<span class="material-icons" aria-hidden="true" role="img">search</span>
我在网上环顾了一下，发现了很多关于如何提高可访问性的信息，而不是关于如何对googlebot隐藏它的信息。
解决方案
基于以下@jake的回答，我做了如下说明。
HTML
<span
浏览 0提问于2019-04-03得票数 0
回答已采纳
在以下情况下，如何使:after生成的文本位于跨度框之外？(它当前在内部呈现，即它使span元素更宽)
HTML
<span class="my">Boxtext</span>
CSS
span.my {
padding: 4px 8px;
background-color: red;
display: inline-block;
border-radius: 10px;
margin-left: 20px;
}
span.my:
浏览 1提问于2012-04-10得票数 16
回答已采纳
1回答
伪元素(如::before或::after )中的内容实际上不存在于DOM树中。所以，用选择器定位是不可能的。
问题是，我怎样才能提取其中的内容？例如：
<div>This is <span></span>n apple.</div>
...
span::before {
content : "a"
}
shows : This is an apple.
但是，如果我提取div的文本，我只会得到没有span::before内容的This is n apple.。
我该如何处理这个问题？
浏览 3提问于2017-04-05得票数 3
2回答
我可以让CSS通过使用生成的内容显示元素的ID，如下所示：
<style>
h2:hover:after {
color: grey;
content: "#" attr(id);
float: right;
font-size: smaller;
font-weight: normal;
}
</style>
<h2 id="my-id">My ID</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et
浏览 2提问于2013-11-11得票数 38
回答已采纳
1回答
单击伪类滚动到顶部
、、、
我有一个伪类元素(：after，具体地说)，当我点击它时，我想滚动到顶部。不知何故，这不起作用……
我试过这个：
$('.someclass:after').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
但它并不起作用。当我只使用普通类时，它工作得很好：
$('.someclass').click(function () {...});
因此，我假设代码可以工作，jquery可以
浏览 0提问于2015-11-21得票数 2
我想知道如何检查一个元素是否存在于Cypress网页的DOM中。
在Cypress中，Selenium中这段代码的等效性是什么？
Boolean Display = driver.findElement(By.xpath("locator")).isDisplayed();
浏览 6提问于2021-03-28得票数 5
回答已采纳
2回答
注释:据我所知，方法在DOM树中搜索与指定的CSS选择器匹配的最接近的元素。
当我单击两个margin元素之间的li空间时。返回为空..。但如果我用margin-bottom: 15px;代替padding-bottom..。一切都好..。
CSS代码
.amenities-filters-inner ul li{
margin-bottom: 15px;
}
图像如果我点击红色标记区域..。没有找到兄弟级的li元素。
示例代码
document.querySelectorAll(".amenities-filters-inner ").forEac
浏览 3提问于2020-12-07得票数 2
回答已采纳
我很难理解:after css标签在插入到HTML代码中时会做什么。例如,
<div class=foo>
<span>xyz</span>
::after
</div>
感谢您的帮助。
浏览 4提问于2015-06-06得票数 0
我只是想知道是否可以将CSS类分配给由:after伪元素添加的内容。如下所示：
span:after {
content: "after!"
class: red
}
我知道你可以指定几个样式属性，比如font-size等等，所以我可以想象应用一个类也是可能的。
实际上，我试图通过bootstrap CSS以这种方式附加一个字形图标。但是一个简单的
span:after {
class: icon-wrench
}
不是他干的。
浏览 0提问于2012-09-07得票数 1
回答已采纳
1回答
我需要检测严格相邻的元素。为此，我将使用中提供的示例，但我需要一个用于J汤- java的工作示例。
输入
<div id="container">
<span class="highlighted">Paragraph 1</span>
<span class="highlighted">Paragraph 2</span>
This is just loose text.
<p class="highlighted">Para
浏览 2提问于2020-09-22得票数 1
如何在Cypress.io中执行条件检查的问题已多次被问到，但我找到的解决方案不起作用：
使用Cypress.io，我希望有一个条件来检查以下元素，如果它存在，则执行一些操作：
<a data-cy="foo"><span>ABCDE</span></a>
我使用Cypress.io尝试了以下条件，如果存在'foo‘元素，它工作得很好：
cy.log('check if element foo exists');
cy.get('a[data-cy="foo"]')
浏览 5提问于2020-06-30得票数 1
回答已采纳
我正在尝试从cypress-social-logins 执行任务。
这里是我为此使用的自定义命令：
Cypress.Commands.add("userLoginWithGmail", () => {
const socialLoginOptions = {
username: "some_email",
password: "some_password",
loginUrl: "some url",
headless: false,
l
浏览 5提问于2022-09-20得票数 2
标记：
<h1 class="title">Hello World</h1>
CSS：
.title {
border-bottom: 3px solid #aaa;
position: relative;
}
.title:after {
content: "";
width: 100px;
border-bottom: 3px solid red;
display: block;
position: absolute;
}
演示：
我想根据文本的宽度更改.title:after的宽度，如何使用javascr
浏览 1提问于2013-09-09得票数 13
回答已采纳
如何使用常规同级选择相同的元素。这是我需要尝试的复选框:检查了将其用作开关的技术(一些实验)。
input:checked:after{
//I wanted two psuedo class to work together
//but this selector isnt valid
content:"text";
}
//so i tried below
input:checked ~ span ~ input:after{
content:"text";
//but above isnt working either
}
<
浏览 3提问于2016-07-15得票数 0
当用户将窗口调整为较小的宽度时，我正在尝试使用的菜单打开按钮:使跨度从水平线旋转为十字形。
HTML
<div class="navigation">
<a href="#"><span></span></a>
</div>
CSS
.navigation a > span,
.navigation a > span::before,
.navigation a > span::after {
width: 30px;
height: 5px;
浏览 0提问于2013-10-31得票数 1
我想知道是否可以在text为0的情况下将显示设置为none，仅使用没有JS的CSS
例如：
<span id='counter'>0</span> <!--hide since it is 0-->
<span id='counter'>1</span> <!--show since it is!=0-->
我知道当它是空的时候是可能的，带有伪:empty
浏览 0提问于2015-10-23得票数 0
我正在一个网页模板中的图片库工作，类似于这个。现在，当我单击图像时，它将显示在jquery滑块中。但是，我需要滑块内的图像来显示在标记<span><strong>Project name:</strong><em>villa2</em></span>中定义的<span><strong>Project name:</strong><em>villa2</em></span>，其中每个图像都有以下标记：
<li>
<
浏览 7提问于2015-09-08得票数 0
1回答
对于那些以前没有注意到它的人，他们在这里举着：
请不要使用JS框架。，甚至是小孩子。。
让我补充一句:没有库，对于那些想要提出jQuery的人来说，它是一个库，而不是一个框架。:P
我有带有图标的列表项目，通过：
li:after {
content: " : " url(ncheck.png) url(ntrash.png);
}
问题：点击我想要运行的JS代码的图标(垃圾和检查不同)。如何使用纯CSS /本机JS？意图：，我想知道通过::after插入的内容是否可以操作。
我正在努力通过img标记(图像按钮技术)来实现这一点，但是我想知道，我是否遗漏了什么，
浏览 1提问于2015-08-15得票数 0
回答已采纳
1回答
我正在尝试在一个最初设置为display: none;的部分中的元素之后插入一些html。我使用的是以下内容：
$(window).load(function(e) {
$(".tribe-tickets-meta-field-header").after('<span>Hello World</span>');
})
我可以让它在元素可见时工作，但不能在隐藏时工作。有没有办法在隐藏目标元素的同时插入html？
我不知道如何重现我正在处理的页面，因为它是由CMS生成的。下面是标记的屏幕截图。
浏览 1提问于2018-02-01得票数 0
我希望获得启用复选框的字符串列表。但是，当我使用isEnabled()时，即使是禁用的复选框，它也总是返回true。在输出中，我得到了该字段中所有字符串的列表。
以下是我为之编写的代码：
@FindBy(css = "[class *= 'CheckboxTextAligned']")
private List<WebElement> airportListCheckbox;
public void getEnabledValues() {
for (WebElement elements : airportListChec
浏览 1提问于2019-01-30得票数 3
回答已采纳
是否有可能使这些按钮收缩到它们的伪元素的大小？理想情况下使用当前标记。还有一个应该被考虑到方程中的span。
目前的结果：
预期结果：
body {
padding: 20px 0 0 50px;
}
.button, .button:after {
position: absolute;
}
.button {
border: 5px solid blue;
/* overflow: hidden; */
}
.button:after {
text-indent: -9999px;
background-image:
浏览 14提问于2014-10-23得票数 0
回答已采纳
我用的是柏树10。
我见过这样的代码：
Cypress.Commands.add(
'byTestId',
// Borrow the signature from cy.get
<E extends Node = HTMLElement>(
id: string,
options?: Partial<
Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow
>,
): Cypre
浏览 12提问于2022-11-07得票数 0
回答已采纳
2回答
是否有css方法来选择X类型的元素，这些元素是在元素Y类型之后包含Z型元素的？
给定以下html，我只能在Z类型之后，而不是在包含Z的Y类型之后。
.y .z:after {
color: green;
/* x is not green because it's after y, not z */
}
<span class="y">
y
<span class "z">
z
</span>
</span>
<span class="x">
浏览 0提问于2016-08-05得票数 0
回答已采纳
我试图使用CSS 作为边框颜色，使用:after内容生成CSS三角形。这在我尝试过的所有浏览器中都很有效，除了一个: Safari似乎是从它生成的第一个三角形中缓存currentColor，然后在任何地方使用它。
下面是我所看到的-- Chrome (以及Firefox和IE9+)的预期行为：
Safari8.0.4在Yosemite 10.10.2上的错误行为(在iOS 8.2上也是一样)-注意，所有三个三角形都是红色的，而不是元素的currentColor：
下面是演示这个问题的。相关的CSS：
span {
display: inline-block;
浏览 2提问于2015-04-01得票数 8
回答已采纳
2回答
学习柏树，在谷歌上找不到答案。下面是按钮及其周围元素的html。我相信这个页面是一个带有flex css的vue.js web应用程序。
<div class="row no-gutters align-center justify-center" data-v-11111111="">
<div class="v-card__actions" data-v-11111111="">
<button class="title v-btn--contained theme
浏览 12提问于2020-05-07得票数 0
5回答
我有一个扩展，我在其中存储/检索用户选择的DOM结构的一部分(总是屏幕上的文本选择)。当我存储一个选择时，我用SPAN标记将该部分括起来，并用黄色突出显示文本。这会导致所选文本周围的DOM结构拆分为不同的文本节点。这给我带来了一个问题，因为当我试图恢复这个选择时(不刷新页面)，它会导致问题，因为DOM结构已经被修改。
我的问题是，在插入SPAN之后，如何防止DOM结构分裂？如果不能做到这一点，在删除SPAN标记到其原始状态后，我如何重新组装DOM结构？
//Insert the span
var sel = restoreSelection(mootsOnPage[i].startXPath)
浏览 1提问于2012-03-24得票数 33
回答已采纳
我有bootstrap 3菜单。如果用户点击“插入符号”(父菜单项)，我想将class添加到"dropdown“菜单中。 <ul id="menu-testing-menu" class="nav navbar-nav sf-js-enabled" style="touch-action: pan-y;">
<li class="menu-item menu-item-has-children dropdown">
<a class="sf-with-ul&#
浏览 26提问于2017-05-26得票数 0
回答已采纳
4回答
是否有一种方法可以测试伪CSS类的content：使用Cypress对元素进行测试？
我见过一些链接记录：
但是我还没有找到任何使用::before伪类的CSS类。
想象一下代码：
.myClass:before {
content: "foo-";
}
<div>
<span class="myClass">Bar</span>
</div>
怎么会有一个测试“foo-”存在呢？
浏览 1提问于2019-04-04得票数 20
回答已采纳
我读过::before用于在您使用它的元素之前添加内容。
p::before {
content: "Read this: ";
}
但是我所见过的大多数时候(通过开发工具偷看网页)，他们使用它们时没有任何元素。
<div class="btn-toolbar" role="toolbar">
::before
<div class="btn-group">
<button type="button" class="btn bt
浏览 3提问于2014-10-17得票数 4
5回答
我想创建这样的按钮：
在现代浏览器中，使用内置框、阴影和过滤器来创建效果。
对于IE8，选择伪元素。
对于IE7，我使用包装在条件注释中的特殊标记。
演示： ()
/**
* Button w/o images
*/
html {
font-size: 62.5%;
}
body {
font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif;
}
/* layout */
.btn {
display: inline-block;
height: 28px;
bord
浏览 3提问于2012-05-01得票数 35
回答已采纳
1回答
以下是我的HTML结构：
p {
margin: 0;
border: 1px solid;
}
small {
display: block;
margin-top: 40px;
border: 1px solid #999;
}
small + span {
display: block;
border: 1px solid #ccc;
}
<p>content</p>
<small>tags</small>
<span>edit</span>
都很好。有时<small>
浏览 4提问于2016-04-18得票数 2
回答已采纳
3回答
我需要使用flexbox来集中导航，因此我想出了以下内容：
.navbar-brand > img {
width: 100px;
}
.navbar-default {
background-color: #fff;
border-color: #fff;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.navbar-default .navbar-nav > li > a {
color: #464646;
te
浏览 2提问于2016-03-01得票数 18
回答已采纳
1回答
这个问题的目的是调查是否有可能做以下事情：
.element:before {
content: 'before';
color: orange;
}
.element:after {
content: 'after';
color: green;
}
.element:after:hover + .element:before {
color: red;
}
<div class='element'> </div>
浏览 3提问于2017-06-13得票数 0
回答已采纳
看起来，前后选择器用于创建3个span元素。
令人困惑的是，html中只有一个实际的跨度。另外两个跨度是如何创建的呢？
这里是HTML/CSS。
<a class='mobile_menu_icon'>
<span></span>
</a>
CSS
.mobile_menu_icon span {
position: absolute;
display: block;
width: 32px;
height: 4px;
background-color: #000000;
}
.mob
浏览 4提问于2015-08-28得票数 1
回答已采纳
1回答
当我将元素悬停时，我遇到了一个问题:元素之后，应该出现的框不会出现。
HTML代码：
<div class="top_line_dropdown">
<span class="logged_in_user">
Admin@aaa.cc (Admin)
<div class="top_line_dropdown_content">
aaaa
</div>
&
浏览 2提问于2016-03-22得票数 1
我想知道是否有可能在选择时更改元素的文本。例如，如果我有
<span class=time>12:00</span>
是否可以使用CSS :before、:after和::selection伪元素将内容更改为[12:00]？
.time::selection:before {
content: '[';
}
.time::selection:after {
content: ']';
}
虽然我目前的项目需要一个CSS解决方案(而且也只需要在Opera中工作)，但如果CSS看起来不可能，我不会反对JavaScript解决方
浏览 1提问于2012-02-17得票数 2
例如，我有一个jQuery函数：
function example(){
var trigger = $('.image');
trigger.each(function(e){
// here I want to change the background color of the :after pseudo-element
$(this:after).css('background-color', 'red');
// ^ the above obviously doesn't work
});
浏览 5提问于2016-10-21得票数 0
1回答
好，拿着这个：
<div class="foo">
<p>Lorem
:after
</p>
</div>
这可以是这样的样式：
.foo p:after{
content: 'ipsum';
display: block;
}
现在，我使用javascript将表单动态添加到p中，如下所示：
<div class="foo">
<p>Lorem
<form action="POST"
浏览 3提问于2014-03-10得票数 1
回答已采纳
2回答
我想从本地存储库中导入JSON数据。
var fs = require('fs');
var data = fs.readFileSync('./profile.json', 'utf8');
console.log(data);
...
然而，Cypress出现以下错误：
这是我的柏树项目的package.json。
{
"name": "cypress_test",
"version": "1.0.0",
"description": &#
浏览 0提问于2020-08-01得票数 6
是否可以用javascript更改psuedo :after元素的样式，如下所示：
document.querySelector('#test:after').attr("style", "content:url('blabla.png')");
在单击1后，是否有任何变通方法来更改该图像：
var timesClicked = 0;
span = document.querySelector('.socialShare');
span.addEventListener('click', func
浏览 0提问于2018-04-26得票数 1
回答已采纳
每个测试我都有一个“afterEach”挂钩。这将为json带来一些价值。“TestDetails”的值在测试文件中是全局可用的。
afterEach(function () {
cy.readFile('cypress/dataFiles/data1.json').then(function (t1) {
t1["testDetails"] = testDetailsValue;
cy.
浏览 6提问于2022-03-21得票数 0
1回答
抓取:内容之后
、、
如果我有一个css文件做类似这样的#foo:after{content:"bar;}，有没有办法用javascript获取:after的内容？获取父元素的内容只返回#foo元素的内容，而不是:after位。
浏览 0提问于2012-02-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
