フレームありサイトの縦長スクショをかんたんに撮る方法
リアルブラウザのWebDriverのスクリーンショット取得では、ブラウザ種別によって挙動が大きく異なる事はすごく有名な話ですよね。
フレームありサイトではIEでもFirefoxでもスクロール範囲全体のスクリーンショットが撮りにくい、これも有名な話だと思います。
エビデンス画像取得の地獄でサバイブする者としてはこれはたいへん困ります。そこで色々と試したいたら、ちょっと強引ですが抜け道っぽいのみつけました。
ダミーサイトを作ってお試し
真ん中フレームのスクロール可能な範囲をすべて取得したいけど、撮れていません。
ここで、seleniumのDimensionクラスを使って、WebDriverのウインドウサイズを実際の画面サイズより、かなり縦長にしてみます。
Dimension winSize = new Dimension(1282,2000); // かなり縦長に・・・
driver.manage().window().setSize(winSize);
すると
おお。ちょっと縦長すぎだけど撮れました！
ちなみにこれFirefoxだけで有効のようです。残念ながらIE、Chromeではウインドウサイズをバカでかくしても「そんなの無理。」って実画面サイズにしかなりません。
なんとも夢のないやつらです。
これでフレーム内のスクショ取得が少し楽になると良いですね。
さらなるリサーチを続けましょう。
Safaridriverが早過ぎる
Mac OSのブラウザテストにSafariは外せません。ということで導入してみたのですが、そこには長い長い道のりがありました。
まず
- seleniumでSafariを動かすにはSafaridriverが必要。
- SafaridriverにはSafari機能拡張が必要。
- Safari機能拡張（エクステンション）にはAppleが発行する証明書が必要。
- 証明書の発行には、Appleデベロッパープログラムで課金が必要。
- あわせてキーンチェーンアクセスで証明書署名要求も必要です。
下記のパイセンのサイトを参考に頑張りました。
僕がMacユーザーでないのもありますが、もうロールプレイングゲームかってレベル。
そして晴れて、Selenium GridからMac/Safariを動かしてみるとおどきました。
物凄く早いんですね。クリックやら画面遷移がとにかく早いです。
これは捗るなぁ。嬉しいなぁ～。
と喜んでいるのも束の間でした。
ちょっと早すぎ。職場のWebアプリだとセッションエラーになってしまいました。
テストツールのラッパークラスではWebElementの色々な属性チェックとかやっていて、他のブラウザだとなかなか重かったりするのに、うむむ。これでは使用に耐えません。
却下の雲行きです。Safariは手作業地獄に舞い戻るかも。。。
その日、肩を落とした帰りの電車でもしかすると「implicit wait」が効かないのかもと思い立ちます。検証してみる価値ありですね。
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
WebDriver: Advanced Usage — Selenium Documentation
結果がわかったら追記します！
「SIToolKit」 先日の勉強会にて #seleniumjp
どうも。エビデンス地獄からこんにちは。
今日は休みで今から早めの朝飯兼昼食です。
先日の第3回 日本Seleniumユーザーコミュニティ勉強会できになるお話があったので帰ってみてみました。
「エビデンス取るのも自動化したい！」桑原雄一 (Monocrea)
こちらのSIToolkitの中の一つ「SIT-WT」というやつが、自分がつくっている業務ツールとよく似ていまして、Excelでマトリクスなテストスクリプトを書いて動かして、レポート自動生成なんてもよく似ています。
みんな考えることは同じなのだなぁ。
（こちらのほうが機能もセンスも遥かに上でございますが。。。）
もっとお話が聴きたいなと思い、当日のメモを見ると新宿で2/21にイベントがあると桑原さんが仰ってっぽいですが、ググっても出てこない。
替わりにこれが。
おぉ昨日では無いですか。しかも新宿じゃなくて渋谷。
こちらも気になるお題なので行けなくて残念。
【追記】
今日の朝ごはん
ロケーター探しのお供に エレメント情報を可視化するJSブックマークレット
対象のエレメントのロケータを上手に指定するのはseleniumerの日々の悩みです。
開発者が自由に作ったUI画面と格闘しています。
そんなときのちょっと便利ツールを作ってみました。
ボタン一つでエレメントのName、ID、Value属性を、可視化してくれます。
なつかしのブックマークレットでつくってみました。
こちらを改行無しで適当なブックマークのURLに入れて使います。
javascript:d=document;b=d.body;g=new Array("input","textarea","select","button");for(j=0;j<g.length;++j){t=b.getElementsByTagName(g[j]);for (i=0;i<t.length;++i){v=t[i];if(v.type!="hidden"){c=d.createElement('span');c.style.fontSize = '11px';c.style.padding = '5px';c.style.display = 'block';c.style.border = '1px solid red';c.innerHTML="name:" + v.name +"/"+"id:"+v.id+"/val:"+v.value; v.parentNode.appendChild(c);}}}
さっそくためしてみました。
某婚活系のサイトのレジスト画面です。
あらかじめブックマークバーに登録しておいたブックマックレットののボタンをクリック。
すると
各エレメントの下にName/ID/Valueが表示されます。
これはロケーターの検証時に良さそうですね。
テストスクリプトを書くのが少しだけ捗りそうです。
おしまい。
第3回 日本Seleniumユーザーコミュニティ勉強会 に参加してきました #seleniumjp
第3回 日本Seleniumユーザーコミュニティ勉強会に参加してきました。
どのテーマもとてもためになりました。
次回があれば是非参加させていただきたいです。
エビデンス取るのも自動化したい！ | 桑原雄一 (Monocrea)
とても気になる内容でした。
エビデンス画像をExcelにペタペタ手で貼り付けている現場なんて今時無いんですね。
うちの現場はいまだに「テストは１００％手動＋Excelにエビ貼り付け」という文化なので、まるで石器時代から参加しているような悲しい気分になりました。
スクショによるエビデンス文化よく分かってないけど、取得したエビデンスはその後どう使ってるんだろう。 #seleniumjp
— miyata (@miyajan) 2016, 2月 6
本当にそう思います。
あのファイルサーバを圧迫する大量のエビデンスを誰がちゃんと見ているのだろうか。
#seleniumjp エビデンスってテスト目的とテスト結果、期待動作と実際動作の一覧があればいいんじゃないかな？？必要になるのって、バグが発生した場合って文脈で、エビデンスってなんだろうか？
— ふじさわゆうき (@ffggss) 2016, 2月 6
おっしゃるとおりで悲しくなります。（涙）
そしてアンチパターンのお話
Seleniumアンチパターン | 宮田淳平 (サイボウズ株式会社)
こちらもメチャンコためになりました。
”組織にテスティングツールを取り入れると、 人々の働き方を変えることになるということ を肝に銘じておくことが重要である。” 「システムテスト自動化標準ガイド」より引用
テスト自動化推進役は文化の啓蒙者である、ですね。
肝に銘じて、明日から戦いたいと思います。
運営のみなさま、ありがとうございました。
フレーム内にJavascriptExecuterしたいとき
selenium2はフレームも扱えるのが嬉しいところ。
ですがJavascriptExecuterでscriptを実行するには少々気をつけないとダメらしいです。
driver.executeScript("window.document.getElementById('target')なんとか")
では動いてくれません。
driver.executeScript("window.hoge.document.getElementById('target')なんとか")
とします。反対に今現在アクティブなフレームがhogeの場合は前者でも動きます。後者だと動かない？（だったと思う。）なので、フレームにscriptExecuteするときはdriver.switchTo()で、親フレームにスイッチしとおくとか前処理があったほうがより確実ってことにしています。
私はこれで散々ハマりました。今度生まれ変わったらフレームのないwebの世界に生きたいです。
参考にしたページ：
参考にしたページ：
プルダウンをクリックしてもビローンとリストが出なくて困った
プルダウンリストをクリック、ピローンとなったところをスクショでパチリ。なんてのは手動のブラウザテストのオーダーでよくあると思います。
ピローンとなって下端に表示しきれなかったOption要素は良いのか？エビデンスとして大丈夫なのか？って思ってしまいますが手動家の皆さんはピローンでだいたい満足してくださります。
さて我らがseleniumでは、Selectエレメントをクリックしてスクショを撮ってもピローンとはなりません。
よくやる手はSelectクラスを使ってオプションの中身を展開して文字列化してログに出力
Select select = new Select(element);for(Object option:select.getOptions()){System.out.println(((WebElement)option).getText());}
って感じです。もっと心配性だと全部のオプションを選択したときのスクショを確保とかになるのでしょうね。(遠い目)
