Windows XPにwatir-webdriverをインストールする
gem installするだけで簡単だろうと思って始めてみたら意外と面倒だったのでメモ。RubyはRubyInstallerのDownloadページから「Ruby 1.8.7-p358」をダウンロードしてインストールしました。
塵が積もって山とならないメモのログ
gem installするだけで簡単だろうと思って始めてみたら意外と面倒だったのでメモ。RubyはRubyInstallerのDownloadページから「Ruby 1.8.7-p358」をダウンロードしてインストールしました。
Responsive.isというサイトで 自分のサイトがiPhoneやiPadなどでどのように表示されるかを疑似体験することができます(via Responsive.is: Display and present responsive web designs | Konigi)。実際には解像度の違いがあるのでiPhone4以降や最新のiPadでは画像の解像感に違いはありますけど、手元にiPhoneやiPadがない場合に、レスポンシブデザインに対応した自分のサイトがどのように見えるかを確認するには十分かなと思います。
CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctorで紹介されているForm関連の疑似クラスを試してみるというだけの内容。W3Cの定義はこのあたり。required/optionalの疑似クラスは最新のブラウザでは対応しているみたい(上のリンクの記事によると)ですけど、それ以外はぼちぼち。現状では視覚的な補助という域を脱しない感はあります。
デザインを変更してみました。前回の変更はこちら。今回はコンテンツ部分はほとんど変えずに、ヘッダー/フッター周りとかを中心に。
メインの変更としましては、今年流行のresponsive web design的な対応をしてみました。Breakpoints.jsというjqueryのpluginを使用すると、bodyに「breakpoint-1024」みたいなclassを表示サイズにあわせて追加してくれるので、そこでCSSを追加しただけというシンプルな方法で。あとviewpointの設定をに変更しました。まあとりあえず動作するところまで作りたかったので、もろもろ随時改善はしていきたいなあと思っています(思っているだけ)。
watir-webdriverでは広範囲のHTMLタグ(ほとんど全部)をサポートしているけれど、svgやcircleなど一部のタグは現在のところサポートしていません(参考:Does watir support svg - Watir General | Google グループ)。
たとえば、画像ファイルが上書きされているかどうかを確認したい場合などで、画像のsrcなどには差分がなく画像データを比較しないとその動作の正否が分からないとか、そういうときはやはり画像データを評価して差を見るしかない。
FirefoxでCSVファイルにアクセスすると、ダウンロードのダイアログが表示されるのですが、webdriver上でダイアログが出てくるとハンドリングできない(たぶん)ので困る。ので、profileを設定してダイアログを表示しないようにする。そしてダウンロードするフォルダも一緒に設定する、という話。詳しくはFirefox 4 with watir webdriver: Need help using helperApps.neverAsk to save CSV without prompting - Stack OverflowとBrowser Downloads | Watir WebDriverなどを参照