CSS 和 HTML 前端编码的自动化测试
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4043706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automated testing of CSS and HTML front-end coding
提问by ajcw
I'm a front-end developer coding CSS, HTML and Javascript (in that order) and most of the work I do is design-lead. Whilst the quality of the designsI create with CSS is subjective, much of the coding is purely functional / layout and I am interested in any way to automate the testing of my page.
我是一名前端开发人员，编写 CSS、HTML 和 Javascript（按此顺序），我所做的大部分工作都是设计主管。虽然我用 CSS 创建的设计质量是主观的，但大部分编码都是纯粹的功能/布局，我对任何自动化页面测试的方式都很感兴趣。
My question can be split into two parts
我的问题可以分为两部分
Does anyone have any existing techniques or suggestions for automatically testing CSS or HTML, particularly with regard cross-browser compatibility?
As CSS can be roughly divided into properties that control layout and those that control design, is automated testing only viable for layout(it can't be possible to automatically and valuably test that a colouris correct, for example)? If so, what sort of CSS values might be suitable for boolean acceptance tests?
有没有人有任何现有的技术或建议来自动测试 CSS 或 HTML，特别是在跨浏览器兼容性方面？
由于 CSS 大致可以分为控制布局的属性和控制设计的属性，因此自动化测试是否仅适用于 布局（例如，无法自动且有价值地测试颜色是否正确）？如果是这样，什么样的 CSS 值可能适合布尔验收测试？
Here are my initial examples of boolean layout values that could be tested - there must be others?
这是我可以测试的布尔布局值的初始示例 - 一定还有其他的吗？
- Does a pop-up appear above other content (z-index)
- Does a footer clear all other content (float)
- 弹出窗口是否出现在其他内容上方（z-index）
- 页脚是否清除所有其他内容（浮动）
Thanks for your help. Part three of the question is of course "Am I wasting my time going down this route?".
谢谢你的帮助。问题的第三部分当然是“我是否在浪费时间沿着这条路线走下去？”。
***** edit *****
***** 编辑 *****
I have found this article that asks the same questions I've asked, but more in depth and perhaps a little more eloquently.
我发现这篇文章提出了与我问过的相同的问题，但更深入，也许更有说服力。
http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/
http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/
Moving forward I am trying to isolate some examples from my work where CSS alone has caused functional errors however those that I've found so far are bugs with JS andCSS combined. I would still like to automatically test these sorts of errors, but appreciate that with javascript used it is beyond the scope of my original question.
向前迈进，我试图从我的工作中分离出一些示例，其中仅 CSS 就导致了功能错误，但到目前为止我发现的那些是 JS和CSS 结合的错误。我仍然想自动测试这些类型的错误，但感谢使用 javascript 超出了我原来问题的范围。
***** edit 2 *****
***** 编辑 2 *****
I've since blogged about how I set about solving this problem, available here:
我已经写了关于我如何着手解决这个问题的博客，可在此处获得：
回答by Spudley
Have a look into Selenium- it's a browser-based automated testing tool. I think it's what you're looking for.
看看Selenium- 它是一个基于浏览器的自动化测试工具。我想这就是你要找的。
It works with all browsers (it has an IDE in Firefox for creating your test scripts, but the scripts themselves can be run in any browser)
它适用于所有浏览器（它在 Firefox 中有一个用于创建测试脚本的 IDE，但脚本本身可以在任何浏览器中运行）
It allows you to test the contents of the DOM, etc against the expected output at any point during the script.
它允许您在脚本期间的任何时候针对预期输出测试 DOM 的内容等。
回答by Kevin Smith
If you're looking for a tool that's built for regression testing check out:
如果您正在寻找为回归测试构建的工具，请查看：
https://github.com/bfirsh/needle
https://github.com/bfirsh/needle
It basically takes screenshots of the parts you select (check their example) and compares them. If they're too different from each other, the test will fail. It's using Selenium, so you might as well check for other assertions, like z-indizes, font-sizes, etc.
它基本上会截取您选择的零件（检查它们的示例）并进行比较。如果它们彼此相差太大，则测试将失败。它使用 Selenium，因此您不妨检查其他断言，例如 z-indizes、字体大小等。
回答by obotezat
You can also check Nighwatch.js
您还可以查看Nightwatch.js
Nightwatch.js is an easy to use Node.js based End-to-End (E2E) testing solution for browser based apps and websites. It uses the powerful W3C WebDriver API to perform commands and assertions on DOM elements.
Nightwatch.js 是一种易于使用的基于 Node.js 的端到端 (E2E) 测试解决方案，适用于基于浏览器的应用程序和网站。它使用强大的 W3C WebDriver API 对 DOM 元素执行命令和断言。
回答by obotezat
w3 validation and Adobe Browser Labsare the best solution I can provide to this problem. Back when I was doing UI layout and design (read=cutup monkey) those were my two best friends.
w3 验证和Adobe 浏览器实验室是我可以为这个问题提供的最佳解决方案。回到我做 UI 布局和设计（read=cutup monkey）的时候，他们是我最好的两个朋友。
There's really no way to automate testing how something looks. So, you're back to either visually inspecting everything yourself or crowdsourcing (or insourcing) a tester to do the same thing for you. It ain't fun, but it keeps us Front-end guys in business.
真的没有办法自动化测试事物的外观。所以，你要么自己目视检查一切，要么众包（或内包）测试人员为你做同样的事情。这并不有趣，但它让我们的前端人员继续工作。
The good news is, many browsers share rendering engines. So, if you test correctly on Chrome, you can bet you're going to be fine in Safari. Check in Firefox and IE and you've got 90% of your problems solved. Then, determine how picky you (or your boss) wants to be and test accordingly.
好消息是，许多浏览器共享渲染引擎。所以，如果你在 Chrome 上测试正确，你可以打赌你在 Safari 中会很好。检查 Firefox 和 IE，你已经解决了 90% 的问题。然后，确定您（或您的老板）想变得多么挑剔，并进行相应的测试。
回答by codeAline
These tools may not have existed when the OP posted but they are worth a mention:
这些工具在 OP 发布时可能还不存在，但值得一提：
CasperJS, which uses PhantomJS https://ghostinspector.com/(for automating journeys) https://github.com/BBC-News/wraith(for screenshot comparisons)
CasperJS，它使用 PhantomJS https://ghostinspector.com/（用于自动化旅程） https://github.com/BBC-News/wraith（用于屏幕截图比较）
