Selenium IDEで複数ページの画面キャプチャをワンクリックで自動回遊して取得するようにする #Selenium

表記崩れがどこかで起きていないか、複数のページをまとめて毎度確認するのは大変なので、
Selenium IDE に一度覚えさせてしまって、ワンクリックで自動で、回遊してキャプチャをのこしていってくれる設定メモ。
終わったら、キャプチャをまとめてさらーっと見ればいいだけ。また、エラーで進めないと止まるので、ざっくりした動作確認時にも。

方法ステップ

画像保存ファイルパスを変数に保存
クリックで辿って、キャプチャを残したいページまで遷移もしくは open でurlを開く
javascript{ storedVars["ファイルパスを保存した変数"]+"画像ファイル名.png"; } でキャプチャ取得
あとは、2.3をすきなだけ繰り返すだけ

要素をクリックしてたどるパターン

▼ seleniumテストケース設定画面

▼ ファイルコード(下記を書換えて、インポートしても使える)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://ここに対象テストサイトurl" />
<title>画面キャフチャ取得</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">画面キャフチャ取得</td></tr>
</thead><tbody>
  <tr>
    <td>store</td>
    <td>/画像保存フォルダパス</td>
    <td>captcha_dir</td>
  </tr>
  <tr>
    <td>open</td>
    <td>/最初に開きたいurl ex./top</td>
    <td></td>
  </tr>
  <tr>
    <td>click</td>
    <td>link=クリックリンクテキスト名</td>
    <td></td>
  </tr>
  <tr>
    <td>clickAndWait</td>
    <td>link=クリックリンクテキスト名</td>
    <td></td>
  </tr>
  <tr>
    <td>clickAndWait</td>
    <td>link=クリックリンクテキスト名</td>
    <td></td>
  </tr>
  <tr>
    <td>captureEntirePageScreenshot</td>
    <td>javascript{ storedVars[&quot;captcha_dir&quot;]+&quot;保存画像名.png&quot;; }</td>
    <td></td>
  </tr>
</tbody></table>
</body>
</html>

補足：
描画が終わって遷移しないとキレイなキャプチャがとれないので click をclickAndWaitにする

順にurlをひらいていくパターン

要素をクリックして遷移していくのが、構造上難しい場合は、urlを開いていくのがいいかもしれない

▼ seleniumテストケース設定画面

▼ ファイルコード(下記を書換えて、インポートしても使える)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://ここに対象テストサイトurl" />
<title>画面キャフチャ取得</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">画面キャフチャ取得</td></tr>
</thead><tbody>
  <tr>
    <td>store</td>
    <td>/画像保存フォルダパス</td>
    <td>captcha_dir</td>
  </tr>
  <tr>
    <td>open</td>
    <td>/</td>
    <td></td>
  </tr>
  <tr>
    <td>pause</td>
    <td></td>
    <td>2000</td>
  </tr>
  <tr>
    <td>captureEntirePageScreenshot</td>
    <td>javascript{ storedVars[&quot;captcha_dir&quot;]+&quot;TOP.png&quot;; }</td>
    <td></td>
  </tr>
  <tr>
    <td>open</td>
    <td>/articles</td>
    <td></td>
  </tr>
  <tr>
    <td>pause</td>
    <td></td>
    <td>2000</td>
  </tr>
  <tr>
    <td>captureEntirePageScreenshot</td>
    <td>javascript{ storedVars[&quot;captcha_dir&quot;]+&quot;新着.png&quot;; }</td>
    <td></td>
  </tr>
</tbody></table>
</body>
</html>

おまけ

上記をrubyでループ作成


# LINK_DATA には、urlと識別用のテキスト名がはいっていると想定
LINK_DATA.each{|link| html = html + test_html(link['url'], link['txt'])}

# captcha_dir には、selenium の変数に画像保存パスが入っている想定
def test_html url, txt

html = <<"EOS"
<tr>
  <td>open</td>
  <td>#{url}</td>
  <td></td>
</tr>
<tr>
  <td>pause</td>
  <td></td>
  <td>2000</td>
</tr>
<tr>
  <td>captureEntirePageScreenshot</td>
  <td>javascript{ storedVars[&quot;captcha_dir&quot;]+&quot;#{txt}.png&quot;; }</td>
  <td></td>
</tr>
EOS

  html
end

補足：
描画が終わって遷移しないとキレイなキャプチャがとれないので pause で余裕をもたせている

RSpec ☓ Capybara ☓ Poltergeist でもできるのだけど、UI変更が起きる度に書き換えて、レビューに通すのが面倒なので、ラフな気持ちで、個人動作確認用に