gpt4 book ai didi

css - 在 Protractor 中测试CSS选择器后的内容

转载 作者:太空宇宙 更新时间:2023-11-04 00:56:43 24 4
gpt4 key购买 nike

在我的 HTML 中,我有如下元素

HTML:

<hmtl>
<head>
<style>
label::after {
content: " *"
}
</style>
</head>
<body>
<label> I'm mandatory</label>
</body>
</hmtl>

那么在浏览器上显示的是:

I'm mandatory *

查询选择器

>getComputedStyle(document.querySelector('label')).content
<"normal"

所以我看到的是 normal 而不是 *

我看不到 normal 从何而来。这是测试 ::after CSS 选择器内容的正确方法吗?

我想测试标签后面有一个“*”,但似乎无法正确获取“content”属性的值。一旦我能够使用浏览器 DOM API 找到它,我最终想在 Protractor 中测试它。

更新

我在 - Selenium WebDriver get text from CSS property "content" on a ::before pseudo element 找到了答案.现在的问题是如何在 Protractor 上对此进行测试。

最佳答案

Window.getComputedStyle()

Window.getComputedStyle()在应用事件样式表并解析这些值可能包含的任何基本计算之后,方法返回一个包含元素所有 CSS 属性值的对象。通过对象提供的 API 或通过使用 CSS 属性名称进行索引来访问各个 CSS 属性值。

  • 语法:

    var style = window.getComputedStyle(element [, pseudoElt]);

    element
    The Element for which to get the computed style.
    pseudoElt (Optional)
    A string specifying the pseudo-element to match. Omitted (or null) for real elements.

    The returned style is a live CSSStyleDeclaration object, which updates automatically when the element's styles are changed.
  • 您可以在 WebDriver select element that has ::before 中找到相关讨论


使用伪元素

getComputedStyle()可以从伪元素中提取样式信息(例如 ::after::before::marker::line-marker

根据 HTML,<style>如下:

<style>
label::after {
content: " *"
}
</style>

实现为:

<label> I'm mandatory</label>

要检索您需要:

var label = document.querySelector('label'); 
var result = getComputedStyle(label, ':after').content;

console.log('the generated content is: ', result); // returns ' *'

引用

关于css - 在 Protractor 中测试CSS选择器后的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54541630/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com