CSS特异性测试

Question

有没有什么好的工具或方法可以自动测试CSS选择器？

我正在开发一个SCSS框架，并希望在其中包括自动化测试。具体来说，我想进行测试以确保css选择器正常工作。

举例来说，我有html：

<input class="btn" disabled id="test"></input>

和CSS

.btn {
 color: red;
 ...
}

.btn:disabled {
 color: green;
 ...
}

我想进行一次测试，确保上面id = test的元素具有.btn：disabled作为具有最高优先级的css类（具有最高特异性的最后一类），而.btn作为第二高优先级。换句话说，我想确保.btn：disabled和.btn css样式应用于元素，并且.btn：disabled中的样式将覆盖.btn中的样式。

我正在考虑在硒中这样做。有什么好的方法吗？我不想将css值硬编码到测试中。

Answer 1

我解决的方法是使用 getCompulatedStyle 来获取“最高优先级”的样式。在 css 中，我向 content 属性添加了一个“标签”。在 jasmine 中，我然后检查所需的标签是否是compatedStyle。（我将在 scss 中扩展它，以便如果使用测试模式而不是在生产中设置，则内容属性由 mixin 设置。）这只会对最高优先级的类进行单元测试，但不会对第二高优先级等进行单元测试。

下面是一个测试来说明该示例（只有第一个和最后一个应该通过）。

// specs code
describe("CSS", function() {
  it("Div element of class test should be handled by .test", () => {
    const testdiv = document.getElementById("testdiv")
    m = window.getComputedStyle(testdiv).getPropertyValue("content"); 
   
    expect(m).toEqual('".test"');
  });

 it("Div element of class test should be handled by div", () => {
    const testdiv = document.getElementById("testdiv")
    m = window.getComputedStyle(testdiv).getPropertyValue("content"); 
   
    expect(m).toEqual('"div"');
  });

 it("Div element should be handled by .test", () => {
    const testdiv = document.getElementById("testdiv2")
    m = window.getComputedStyle(testdiv).getPropertyValue("content"); 
   
    expect(m).toEqual('".test"');
  });

 it("Div element of class test should be handled by div", () => {
    const testdiv = document.getElementById("testdiv2")
    m = window.getComputedStyle(testdiv).getPropertyValue("content"); 
   
    expect(m).toEqual('"div"');
  });

});


// load jasmine htmlReporter
(function() {
  var env = jasmine.getEnv();
  env.addReporter(new jasmine.HtmlReporter());
  env.execute();
}());

.test {
    content: '.test';
}

div {
  content: 'div';
}

<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
<link href="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" rel="stylesheet"/>
<div class="test" id="testdiv">TestDiv</div>
<div id="testdiv2">TestDiv</div>