CSS和HTML前端编码的自动化测试 [英] Automated testing of CSS and HTML front-end coding
问题描述
我是一个前端开发编码的CSS，HTML和Javascript（按顺序），大部分我做的工作是设计领先。虽然的设计质量的我用CSS创建是主观的，很多的编码是纯功能/布局，我感兴趣的任何方式来自动我的网页的测试。
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 designs I 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.
我的问题可以分成两个部分。
My question can be split into two parts
-
有没有人有任何现有
技术或建议
自动测试CSS或HTML，
特别是关于
跨浏览器兼容？
Does anyone have any existing techniques or suggestions for automatically testing CSS or HTML, particularly with regard cross-browser compatibility?
由于CSS大致可以划分
为控制布局属性
和那些控制设计，是
自动化测试只有可行的
布局（它是不可能的
自动有价值测试
一个的颜色的是正确的，例如）？那么，是什么
排序CSS值也可能是合适
布尔验收测试？
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 colour is correct, for example)? If so, what sort of CSS values might be suitable for boolean acceptance tests?
下面是我的，可以测试布尔布局值的初始例子 - 必须有其他人呢？
Here are my initial examples of boolean layout values that could be tested - there must be others?
- 是否弹出出现上述其他内容（的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.
<一个href=\"http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/\">http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/
展望未来我试图隔离我的工作，其中单独的CSS但是已经引起功能性错误的，我已经发现了一些例子，到目前为止与JS 和 CSS相结合的错误。我还是想自动测试这些类型的错误，但美联社preciate与JavaScript中使用它超出了我原来的问题的范围。
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 and CSS 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.
编辑***** ***** 2
***** edit 2 *****
因为我已经在博客我如何着手解决这个问题，可以在这里找到：
I've since blogged about how I set about solving this problem, available here:
<一个href=\"http://blog.ajcw.com/2010/12/automated-css-testing-or-how-one-css-$c$cr-is-now-responsible-for-breaking-%E2%80%93-and-fixing-%E2%80%93-the-build/\">http://blog.ajcw.com/2010/12/automated-css-testing-or-how-one-css-$c$cr-is-now-responsible-for-breaking-%E2%80%93-and-fixing-%E2%80%93-the-build/
推荐答案
看一看到硒 - 这是一个基于浏览器的自动化测试工具。我认为这是你在找什么。
Have a look into Selenium - it's a browser-based automated testing tool. I think it's what you're looking for.
它适用于所有的浏览器（它在Firefox创建您的测试脚本的IDE，但脚本本身可以在任何浏览器中运行）
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)
它可以让你在脚本中的任何时候测试DOM等与预期输出的内容。
It allows you to test the contents of the DOM, etc against the expected output at any point during the script.
这篇关于CSS和HTML前端编码的自动化测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
