有没有一种方法可以测试CSS和HTML呢？例如：有时候某些通知会受到一些CSS更改的影响。我不想每次进行更改时都手动测试所有通知。
谢谢
5个回答
10
自动化测试布局非常困难。但是，将涉及的时间和精力大幅削减以便您可以手动快速完成并不太困难。
您可以尝试Blink Testing。
我听说过它被用于像这样的网站。
- 编写一个脚本，遍历您的网站，访问尽可能多的页面。
- 在每个页面上，拍摄屏幕截图。
- 将所有屏幕截图组合成一个“电影”，每个截图只有一两秒钟。
- 现在，每天您都可以'播放'电影并观察是否存在任何问题。
您甚至可以扩展bcarlso的方法，但用视觉检查替换MD5检查。每个页面显示1秒钟 - 首先是已知良好的，然后是新的。您可以交替几次，以便任何明显的错误都会出现为闪烁。
一个拥有数百个页面的网站可以在几分钟内完成此类检查。您可能认为这不提供足够的时间来查找问题，但在识别网站明显问题方面效率非常高。
任何具有重大布局问题的页面都将突出显示，因为它们与所有其他页面的相同模式不匹配。
- Mark Irvine
2
有没有这样的服务？例如SaaS？谢谢 - donald
不确定2011年的情况如何，但今天有数十种工具可以自动完成这项任务。 - David Souther
3
我假设您要测试的问题是：CSS 与布局产生不兼容的变化，导致文本被截断或出现其他视觉方面的问题。如果是这种情况，那么我认为目前没有很好的方法来测试页面的美观性。TDD 和 CI 的主要优点之一是快速反馈，以便在它进入生产之前就知道某些东西已经出了问题。由于不了解您的环境和这些更改如何应用到您的应用程序中，因此很难提出解决方案，但这里是一个潜在的非传统选项示例：
在您的存储库中放置提交钩子，让团队中的每个人都可以通过电子邮件得知某人更改了某些 CSS。最好附带 CSS 的差异。这将提醒团队留意布局问题。
我们开始尝试使用 WATIR 遍历应用程序中的一些主要屏幕，并使用 ImageMagik（基本上是屏幕截图）拍照并将其存储在“ Last Known Good”文件夹中。每天在干净的应用程序和数据安装上重新运行脚本，并将图像放置在“ Current”文件夹中。在每次运行结束时，使用 MD5 比较图像并在更改时发出警报。让 QA 团队查看标记为问题截图的列表，如果更改是可接受的（例如，作为功能的一部分添加了一个字段），则将“ Current”复制到“ Last Known Good”。不幸的是，我们没有完成实验，因此我不知道它是否有效。我担心屏幕截图作为“断言”的脆弱性。
希望这有所帮助！
在您的存储库中放置提交钩子，让团队中的每个人都可以通过电子邮件得知某人更改了某些 CSS。最好附带 CSS 的差异。这将提醒团队留意布局问题。
我们开始尝试使用 WATIR 遍历应用程序中的一些主要屏幕，并使用 ImageMagik（基本上是屏幕截图）拍照并将其存储在“ Last Known Good”文件夹中。每天在干净的应用程序和数据安装上重新运行脚本，并将图像放置在“ Current”文件夹中。在每次运行结束时，使用 MD5 比较图像并在更改时发出警报。让 QA 团队查看标记为问题截图的列表，如果更改是可接受的（例如，作为功能的一部分添加了一个字段），则将“ Current”复制到“ Last Known Good”。不幸的是，我们没有完成实验，因此我不知道它是否有效。我担心屏幕截图作为“断言”的脆弱性。
希望这有所帮助！
- bcarlso
0
如果您只是想确保您的内容在正确的内容等等中，您可以创建一个简单的测试套件，该套件将向您的网站发出GET请求。当您收到所有内容时，您可以通过像xslt这样的验证模板运行它。格式良好的HTML通常可以与xslt或xsd匹配。虽然不是理想的方法，但如果您只关心您的网站结构而不是样式，您可以通过这种方式实现。
- Maciej
1
1测试 CSS 的问题与这有什么关联？ - user7294900
-1
CSS的更改不应影响页面的行为，只会影响外观，因此我不确定Selenium是否有很大帮助。
我猜测您正在尝试避免诸如元素错位而无法阅读等问题。如果是这样，您可能需要一些基于OCR的工具，但我不知道有什么可以建议的。
然而，最好投入精力在首先防止这种问题上。如果您的布局容易破坏，也许需要将CSS重构为更简单的东西。
- Andy Waite
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接