Web testing

I have been stuck doing a lot of front-end web work lately and haven’t had a chance to do much perl coding (I am planning on releasing an Mason based renderer for Email::MIME::Kit soon though). I’m very impressed with the power of CSS in modern browsers. The last time I looked at it, browser incompatibilities really made it difficult to use. It is much better still, I find most of the work to be trial and error, so I have a couple of tips that have saved me some time going back and forth…

Quick Browser Refresh

I do all of my coding in vim and have ton of mappings (maybe I’ll share some in future). One I really like right now it ,u which saves the current file then runs my xrefresh perl script which finds my Firefox window and refreshes the current page. It is a simple script that is based on X11::GUITest. It works particularly well when I am using two monitors and can have the browser on in one of them. Here is the mapping, along with the ,U mapping which saves all files:

nmap <silent> ,u :w<cr>:! xrefresh 'Gran Paradiso'<cr>
nmap <silent> ,U :wa<cr>:! xrefresh 'Gran Paradiso'<cr>

It would probably be easy to extend this script to do things like refresh multiple browsers, refresh without using the cache, etc.

IE Testing with VBox

Next up is some fun with IE. (Oh, the hours wasted on you. Damn you IE!) Microsoft has actually been very helpful and provided disk images that you can use to test web pages in a virtual machine on different versions of their browser. They expire periodically and they are designed for Microsoft Virtual PC so it take a bit of work to set them up on linux using VirtualBox, so I created a bash script (create-ie-vbox) to do the heavy lifting.

Once you download the images run create-ie-vbox <path-to-image-.exe> and wait a while. The script uses perl and File::Spec to find the absolute path to the .exe file

exe_file=`echo $exe_file | perl -MFile::Spec -e'print File::Spec->rel2abs(<>)'`

then the unrar command (and perl) to find the .vhd file and unpack it

vhd_file=`unrar l $exe_file | perl -ne'/(\w[\s\w-]*\.vhd)/ && print $1'`
nice unrar e "$exe_file" "$vhd_file" >> $log 2>&1 \
   || die "Couldn't extract $vhd_file from $exe_file"

Then the big trick is to convert the .vhd file to a .vdi file. While VBox can work with .vhd files, Microsoft uses the same UUID for all of these disk images which VBox doesn’t like. There is a command in VBoxManage to change the UUID (VBoxManage internalcommands setvdiuuid "$vhd") but there is an acknowledged bug that prevents it from being useful here. Instead we have to use qemu to convert it to a raw disk and then VBoxManage to convert that to a .vdi:

nice qemu-img convert -O raw -f vpc "$vhd" "$raw" || die "Error converting to raw"
nice VBoxManage convertdd "$raw" "$vdi" || die "Error converting to vdi"

Finally there are a number of VBoxManage commands to create and register the image and disk.

Once this is done, there is a bit more work that needs to be done within the vm to deal with some bugs and annoyances. The script prints out the remaining steps. Much thanks to George Ornbo who pointed the way on his blog. Note that this script only works on the XP disks at this point; I haven’t bothered to test the Vista versions yet.

BTW, most of my bash scripts use the die() function (stolen from perl) which is very simple but handy:

function die() {
 echo $@
 exit 1
}

Browser Resize

Lastly, I like to check my pages in browsers at various widths. Most importantly (or is that annoyingly) 800px. Rather than change my screen resolution, I use this simple bash script to resize Firefox to the desire width (defaulting to 800 if nothing is supplied on the command line):

#!/bin/bash

SIZE=${1:-800}
echo Resize to $SIZE width
wmctrl -r "Firefox" -e 0,-1,-1,$SIZE,-1

Simple, but gets the job done quickly!

Hope these are helpful.