Rog*_*Rog 4 html browser testing comparison
我正在开发一个基于Web的应用程序,为了测试我的更改,我希望能够比较两个浏览器选项卡的视觉呈现(可能通过重叠)和源HTML(差异样式)(发展与生产).我很高兴使用任何浏览器来执行此操作.
我已经有两个脚本从两个站点中提取HTML并对它们进行比较,但它在浏览器之外很乏味,并且不能轻易处理基于会话的点击流来到我所在的页面的情况喜欢比较.我还手动将源复制并粘贴到比较工具中,但这又是非常繁琐的.
有小费吗？
Firefox PageDiff插件看起来可能会有所帮助.它显示了两个选项卡源的差异.安装插件,右键单击第一页并选择"Start DIFF",然后右键单击第二页并选择"Show DIFF".差异显示在单独的弹出窗口中,并为您提供生成的源的并排和顶部的线差异摘要.
比较页面渲染似乎是一个非常有用的任务,以保证自己的Firefox插件.我会留意任何可能有用的东西.如果您只是担心布局,GridFox工具可能会很方便,但我没有看到任何自动执行此操作的内容.
尝试某种GUI自动化脚本是否值得？
奇怪的想法 - 我不是网络大师,但如果你需要在同一个浏览器上覆盖两个不同的页面,为什么不创建一个HTML文件,其中包含div中的两个重叠iframe,src属性设置为两个不同的页面,并且更低顶级div的不透明度？将它放在本地Web服务器上,您可以让自己喜欢的服务器端技术为您提供响应包含URL的GET数据.哎呀,如果有兴趣的人都知道如何编写Firefox扩展,它似乎并不像它会是太困难......
事实上,我刚刚在这里完成了所述叠加iframe的演示.只需更改GET数据,您就可以比较任何您想要的页面.PHP很简单,虽然弄清楚iframe不透明度需要一些谷歌搜索.
<html>
<body style="opacity:.5;">
<div style="opacity: 0.5;">
<iframe src="http://<?php echo $_GET["site1"];?>" style="position: absolute; width:100%; height:100%;" allowtransparency="true" scrolling="yes"></iframe>
</div>
<iframe src="http://<?php echo $_GET["site2"];?>" style="position: absolute; z-index: -1; width:100%; height:100%" allowtransparency="true" scrolling="yes"></iframe>
</body>
</html>
虽然这对于布局看起来非常方便,但如果您担心颜色差异 - 或者显然是浏览器间的差异 - 您将不得不尝试别的东西.
一个廉价的解决方法,如果你使用的是linux,就是使用一个窗口管理器,它可以让你用键盘/鼠标快捷键轻松调整窗口的透明度.然后覆盖两个窗口,每个窗口打开一个版本,并使用透明度调整快捷方式在它们之间淡入淡出.
当然,这并没有解决html代码比较问题.