Is there a way to compare the appearance and/or source HTML of 2 browser tabs?
I'm working on a web based application, and in order to test my changes, I'd like to be able to compare the visual rendering (perhaps by way of overlaying) and the source HTML (diff style) of 2 browser tabs (deve开发者_Python百科lopment vs production). I'm happy to use any browser to do this.
I've already got a couple of scripts that pull the HTML from 2 sites and compares them, but it's tedious outside of a browser and doesn't easily handle the situation where there are session based clickstreams to get to the pages that I'd like to compare. I've also copied and pasted the source into a comparison tool manually, but again this is quite tedious.
Any tips?
The Firefox PageDiff plugin looks like it might be of some help. It shows you the diff of the source of two tabs. Install the plugin, right click on the first page and select "Start DIFF", and right click on the second and select "Show DIFF". The diff is shown in a separate popup, and gives you a side-by-side of the generated source and a summary of line differences at the top.
Comparing page rendering seems like a useful enough task to warrant its own Firefox plugin. I'll keep an eye out for any that might be of service. If you're just worried about layout, the GridFox tool might be handy, but I haven't seen anything that does this automatically.
Would it be worth it to try some sort of GUI automation scripting?
Weird idea- I'm not a web guru, but if you need an overlay of two different pages on the same browser, why not create an HTML file with two overlaid iframes in divs, src attributes set to your two different pages, and lower the opacity of the top div? Put it on a local web server and you can have your favorite server-side tech give it to you in response to GET data containing the URLs. Heck, if anyone interested knows about writing Firefox extensions, it doesn't seem like it would be too difficult...
In fact, I just finished a demo of said overlaid iframes here. Just change the GET data and you can compare any pages you'd like. The PHP is painfully simple, though figuring out iframe opacity took some googling.
<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>
While this seems pretty handy for layout, if you're worried about color differences- or, obviously, inter-browser differences- you'll have to try something else.
One cheap workaround, if you're using linux, is to use a window manager that lets you easily adjust the transparency of windows with a keyboard/mouse shortcut. Then overlay two windows, one with each version of your page open, and use the transparency adjustment shortcut to fade between them.
Of course, this doesn't address the html code comparison issue.
Sounds like your looking for Microsoft SuperPreview. http://expression.microsoft.com/en-us/dd819431.aspx
I believe that it only a Beta/Preview but it looks really promising.
For code I think you can save the files on your local disk and use WinMerge tool to compare them.
For comparing the UI,
1. Please check Expression Web Super Preview. It is a standalone tool available for free download.
2. You can also use http://browsershots.org/ for the same purpose
I hope this helps. :-)
By using QtWebKit you can:
- Load any page.
- Navigate it from code or by evaluating some JavaScript in it. So you can fill-in login form and post it.
- Access source and DOM of the page, including modifications done from JavaScript.
- Take screenshot and save it as image.
- See this blog post if you'd like to avoid real GUI running.
- No need to code in low-level C++ since Qt has excellent Python binding - PyQt.
I've adapted Matt Luongo's accepted answer regarding the visual comparison of browser rendering into a static overlay page using jquery. It doesn't work in IE7, but works in firefox. It's pretty flexible, but I imagine it will need minor tweaks for use (start by pointing to your own jquery include)...
<html>
<head>
<script src="/javascripts/jquery/jquery-1.3.1.min.js" type="text/javascript" ></script>
<script>
$(window).load(function() {
$('#go').click(function() {
$('#f1').attr('src',$('#p1').val() + "/" + $('#url').val());
$('#f2').attr('src',$('#p2').val() + "/" + $('#url').val());
});
$('#opa').toggle(function() {
$('#transdiv').css("opacity","0.75");
},
function() {
$('#transdiv').css("opacity","0.25");
});
});
</script>
</head>
<body style="opacity:1;">
Prefix 1: <input id="p1" value="http://testsite.foo.com"/>
Prefix 2: <input id="p2" value="http://comparisonsite.foo.com"/>
URL: <input id="url" value="mypage.html" /> <button id="go">Go</button>
<button id="opa">Toggle opacity</button>
<div id="transdiv" style="opacity: 0.5;">
<iframe id="f1" src="about:blank" style="position: absolute; width:95%; height:95%; background-color:transparent;" allowtransparency="true" scrolling="yes"></iframe>
</div>
<iframe id="f2" src="about:blank" style="position: absolute; z-index: -1; width:95%; height:95%; background-color:transparent;" allowtransparency="true" scrolling="yes"></iframe>
</body>
</html>
加载中,请稍侯......
精彩评论