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

【问题标题】：Testing contents of after CSS selector in protractor在量角器中测试 CSS 选择器后的内容
【发布时间】：2019-06-29 16:45:21
【问题描述】：

在我的 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 找到了答案。现在的问题仍然是我将如何在量角器上进行测试。

【问题讨论】：

来自哪里的字normal？会不会是你弄错了元素？
我添加了一个小的 HTML sn-p 以及 querySelector() 的结果。标签元素被正确选择，但我想还有一些工作要为 ::after 获得正确的值

标签： css selenium css-selectors protractor pseudo-element

【解决方案1】：

const label = document.querySelector('label'); // "normal";

console.log(label);


const labelAfter = getComputedStyle(label, ':after').content;

console.log(labelAfter == "normal");

label::after {
  content: " *"
}

&lt;label&gt; I'm mandatory&lt;/label&gt;

【讨论】：

【解决方案2】：

Window.getComputedStyle()

Window.getComputedStyle() 方法在应用活动样式表并解决这些值可能包含的任何基本计算后，返回一个包含元素所有 CSS 属性值的对象。单个 CSS 属性值可通过对象提供的 API 或通过 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

【讨论】：

【解决方案3】：

由于我的问题是专门针对量角器的，所以我发布了我正在工作的解决方案。来到我最初被卡住的部分 - 为什么我得到“正常”而不是“*”

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

所以早些时候我不知道::after 在标签元素内创建了一个伪子元素。

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

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

如果我单击<label> 元素并检查计算选项卡，我可以看到content 属性的值是normal。

但是，如果我点击 ::after 伪元素，我可以在 Computed 选项卡中看到 content 属性的值是 " *"。

正如其他答案getComputedStyle() 中提到的，以伪元素作为第二个参数，是获取“::after”的 CSS 属性值的唯一方法。问题的症结在于protractor没有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);
     });

【讨论】：