量角器中 after CSS 选择器的测试内容

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() 方法 returns 包含元素所有 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

因为我的问题具体是 w.r.t 量角器，所以我发布了我得到的解决方案。来到我最初被卡住的部分 - 为什么我得到 "normal" 而不是 " *"

>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);
     });

量角器中 after CSS 选择器的测试内容

Testing contents of after CSS selector in protractor

css

selenium

css-selectors

pseudo-element

protractor

更新

Window.getComputedStyle()

使用伪元素

参考