有没有好的工具或方法可以自动测试CSS选择器？
我正在开发一个SCSS框架，并希望在其中包含自动化测试。具体来说，我想要测试以确保CSS选择器正常工作。
例如，假设我有以下HTML：
<input class="btn" disabled id="test"></input>
以及 CSS
.btn {
color: red;
...
}
.btn:disabled {
color: green;
...
}
// 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>if -> Element.ComputedStyle.color = green
then -> test passed
else -> test failed (you have CSS structure errors)
显然，浏览器会正确解释特异性。因此，您真正测试的是通过添加/覆盖CSS所做的更改是否导致了意外的视觉后果。
这似乎是一个相当手动的问题，需要您决定每个正确状态是什么，然后维护测试。如果您选择这条路线，我建议看看Backstop.js之类的东西。尽管CSS视觉回归测试非常复杂，所以请注意不要期望太多。
你能否通过创建一个通常为 transparent 的 SCSS 变量来手动解决问题？然后在添加/更改代码时添加该变量并将颜色更改为像 pink 这样非常明显的颜色？此时，当你渲染页面时，你应该能够看到哪些东西被覆盖。
如果你正在制作 CSS 框架，我建议根据文档进行测试，因为这应该展示了之前可能会被覆盖的示例。
您可能还想了解CSS Blocks API。它不会是一个“测试”，但该API提供了作用域和编译错误，可以帮助您尽早发现其中的一些问题。
以下是相关部分：
使用CSS Blocks的新解析系统，层叠冲突将在您知道其存在之前就被捕获，您将永远不必再与优先级战斗。
根据文档，优先级是浏览器决定哪些 CSS 属性值对于一个元素最相关的逻辑，在存在两个或更多指向同一元素的冲突 CSS 规则时应用哪些规则。优先级是根据不同CSS 选择器组成的匹配规则计算得出的。
根据以下规则，可以基于点数计算特异性：
style属性：1000id属性：100class或pseudo-class：1让我们计算两个CSS的特异性。
示例 A：
.btn {
color: red;
}
btn。因此，特异性为 1。示例 B:
.btn:disabled {
color: green;
...
}
btn，以及一个 pseudo-class，即 disabled。因此，特异性为 2。CSS 特异性也可以通过 特异性计算器 进行视觉验证：
由于CSS样例B具有更高的特异性，因此CSS样例B将应用于该元素：
<input class="btn" disabled id="test"></input>
然而，在 CSS 的特殊性规则中还有一些更精细的规则：
您可以在CSS Specificity中找到详细的文档。
正如你所说，你可以通过Selenium实现这个功能。就方法论而言，如果你想长期维护这个功能，我建议使用Page Object模型。官方文档可以在这里找到，在其他语言中也有一些文章这里，这里和这里。
本质上，这意味着为页面（或者是有多个控件的表单之类的页面部分/组件）创建类或者模型。这个类将会为每个需要与其交互的页面元素添加属性或字段。这种方法的优点包括：
这是一个示例（因为您没有指定语言，我将使用C#）：
public class LoginPage
{
// FindBy attributes should decorate each property to specify the selector
public WebElement UsernameInput { get; set; }
public WebElement PasswordInput { get; set; }
public WebElement LoginButton { get; set; }
public LoginPage()
{
...
}
public LoginPage Load(this LoginPage page)
{
// code to navigate to the login page
}
public LoginPage EnterCredentials(this LoginPage page, string username, string password)
{
// code to fill out inputs
}
public HomePage Login(this LoginPage page)
{
// code to click login button
}
// Other methods
}
使用时它是这样的：
HomePage homePage =
new LoginPage()
.Load()
.EnterCredentials("user", "pass")
.Login();
// Now you can perform operations on the HomePage