Question

在我的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找到它，我最终将要在量角器中对其进行测试。

更新

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

Answer 1

const label = document.querySelector('label'); // "normal";

console.log(label);


const labelAfter = getComputedStyle(label, ':after').content;

console.log(labelAfter == "normal");

label::after {
  content: " *"
}

<label> I'm mandatory</label>

Answer 2

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 Pseudo-Elements Module Level 4

Answer 3

由于我的问题是专门针对量角器的，因此我将发布我正在使用的解决方案。谈到我最初遇到的问题-为什么我得到“正常”而不是“ *”

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

因此，我之前并不知道::after在label元素内创建了一个伪子元素。

在Chrome中检查<label>元素会显示以下HTML

<label>
    I'm mandatory
    ::after
</label>

如果我单击<label>元素并选中“计算”选项卡，则可以看到content属性的值为normal。

但是，如果我单击::after伪元素，则可以在“计算”选项卡中看到content属性的值为" *"。

如其他答案getComputedStyle()中所述，将伪元素作为第二个参数，这是获取“ ::after”的CSS属性值的唯一方法。问题的症结在于量角器没有getComputedStyle()的等价物，因此我们必须依靠browser.executeScript()，如下所示：

let labelHeader = 'I'm mandatory *';
// Passing label element separately as in the real test case, it would be extracted from parent
// enclosing element and need to be able to pass it as a parameter to browser.executeScript().

let label = element(by.css('label'));
browser.executeScript("return window.getComputedStyle(arguments[0], ':after').content",
                       label)
    .then ((suffixData: string) => {
     // suffixData comes out to be '" *"', double quotes as part of the string.
     // So get rid of the first and last double quote character

         suffixData = suffixData.slice(1, suffixData.length - 1);
         labelText += suffixData;
         expect(labelText).toBe(labelHeader);
     });

在量角器中测试CSS选择器之后的内容

更新

3 个答案:

Window.getComputedStyle（）

与伪元素一起使用

参考