代码之家  ›  专栏  ›  技术社区  ›  ajcw

CSS和HTML前端编码的自动化测试

  •  22
  • ajcw  · 技术社区  · 15 年前

    我是一个前端开发人员,编码CSS、HTML和Javascript(按顺序),我做的大部分工作是设计领导。同时 设计

    我的问题可以分成两部分

    1. 技术或建议 尤其是关于 跨浏览器兼容性?

    2. 到控制布局的属性中 自动化测试仅适用于 布局 自动和有价值的测试 一 是正确的,例如)?如果是,怎么办 CSS值的排序可能是合适的

    这里是我的布尔布局值的初始示例,可以测试-肯定还有其他的?

    • 弹出窗口是否出现在其他内容的上方(z索引)

    谢谢你的帮助。问题的第三部分当然是“我在这条路上浪费时间吗?”。

    我发现这篇文章问的问题和我问的一样,但更深入,也许更雄辩一些。

    http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/

    接下来,我试图从我的工作中分离出一些例子,其中CSS本身就导致了功能性错误,但是到目前为止我发现的都是JS的bug CSS组合。我仍然想自动测试这些类型的错误,但感谢javascript的使用超出了我最初的问题的范围。

    *****编辑2*****

    http://blog.ajcw.com/2010/12/automated-css-testing-or-how-one-css-coder-is-now-responsible-for-breaking-%E2%80%93-and-fixing-%E2%80%93-the-build/

    5 回复  |  直到 11 年前
        1
  •  8
  •   Spudley Pat    15 年前

    看看 Selenium

    它适用于所有浏览器(它在Firefox中有一个用于创建测试脚本的IDE,但是脚本本身可以在任何浏览器中运行)

    它允许您在脚本执行期间的任何时候根据预期的输出测试DOM等的内容。

        2
  •  4
  •   Kevin Smith    14 年前

    https://github.com/bfirsh/needle

    它基本上是截取你选择的部分的截图(检查它们的例子)并进行比较。如果它们之间的差异太大,测试就会失败。它使用的是Selenium,所以您可以检查其他断言,比如z-indizes、字体大小等。

        3
  •  3
  •   obotezat    9 年前

    Nighwatch.js

    夜视.js是一个易于使用的节点.js基于端到端(E2E)的基于浏览器的应用和网站测试解决方案。它使用强大的w3cwebdriver API对DOM元素执行命令和断言。

        4
  •  1
  •   user490227 user490227    15 年前

    Adobe Browser Labs 是我能为这个问题提供的最好的解决方案。当我做UI布局和设计(read=cutupmonkey)的时候,他们是我最好的两个朋友。

    好消息是,许多浏览器共享渲染引擎。所以,如果你在Chrome上测试正确,你可以打赌你在Safari中会很好。Firefox和IE中90%的问题都解决了。然后,确定你(或你的老板)想要有多挑剔,并进行相应的测试。

        5
  •  0
  •   codeAline    10 年前

    这些工具可能在OP发布时并不存在,但值得一提:

    CasperJS,它使用PhantomJS https://ghostinspector.com/ https://github.com/BBC-News/wraith (用于截图比较)