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 中的样式。

我正在考虑在 selenium 中执行此操作。有没有什么好的方法可以做到这一点？我不想将 css 值硬编码到测试中。

Answer 1

我确定的方法是使用 getComputedStyle 获取“最高优先级”的样式。在 css 中，我向内容属性添加了一个“标签”。在 jasmine 中，我然后检查所需的标签是否是 computedStyle。 (我将在 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>