在量角器中测试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从:: before伪元素上的CSS属性“ content”获取文本 。 现在的问题仍然是我如何在量角器上进行测试。

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. 

• 您可以在具有:: before的WebDriver select元素中找到相关的讨论

---

伪元素的用法

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

按照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伪元素模块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()的等效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);
     });