フレーム分割画面でスクロールがある場合のスクリーンショットについて

[nakashima]

お世話になります。

中島と申します。

Pitaliumについて、掲題の件について質問させてください。

フレーム分割された画面にスクロールがある場合で、フレーム全体が収まるようにスクリーンショットを撮影するようなPitaliumの機能はありますでしょうか？

イメージとしては、添付画像①の状態で表示された画面を、画像②のようにスクロールで隠れている部分が無いような形でキャプチャしたいと考えております。

[画像①]

[画像②]

scrollTargetによるキャプチャはターゲットが絞り込まれるため、出来るとすればウィンドウサイズの調整ぐらいと考えておりますが、もしフレームがある場合でも全体をキャプチャするような方法がありましたら、ご教授いただければ幸いです。

[ishikawa....@jp.nssol.nssmc.com]

中島様

石川です。

お世話になっております。

>出来るとすればウィンドウサイズの調整ぐらい

はい。現状ではウインドウサイズ調整で対処する形になります。

一例ですが、コードは下記のようになります。

// フレームの高さをスクロールが無くなるまで伸ばす

function expandFrameHeight() {

var iframes = document.getElementsByTagName('iframe');

Array.prototype.slice.call(iframes).forEach(function(iframe) {

var frameDocument = iframe.contentWindow.document;

// iframe内のスクロールできる分を含めた高さを取得

var scrollHeight = frameDocument.documentElement.scrollHeight;

// 閉じるときのために現在値を保持

iframe.setAttribute('data-pita-originalheight', iframe.style.height);

// ボーダー幅の高さを考慮しないとスクロールバーが消える高さにならないので、ボーダー幅を取得

var borderWidth = Number($(iframe).css('border-width').replace('px', ''));

// 高さ変更

iframe.style.height = (scrollHeight + borderWidth * 2) + 'px';

});

};

// フレームの高さを元に戻す

function resetFrameHeight() {

var iframes = document.getElementsByTagName('iframe');

Array.prototype.slice.call(iframes).forEach(function(iframe) {

var frameDocument = iframe.contentWindow.document;

// 閉じる前の値取得

var height = iframe.getAttribute('data-pita-originalheight');

if (height == null) {

return;

}

// 高さ変更

iframe.style.height = height;

// 閉じた後はデータ属性を削除しておく

iframe.removeAttribute('data-pita-originalheight');

});

};

Pitalium（Selenium）には任意のJavaScriptを現在のページで実行する機能があるので、

スクリーンショット取得の前後に必要に応じて上記の処理を実行することで

全体のキャプチャが可能となるはずです。

ご不明点等ありましたらお知らせ下さいませ。

2017年8月23日水曜日 13時26分38秒 UTC+9 nakashima:

[nakashima]

石川様

中島です。

ご回答ありがとうございます。

ご提示頂いたサンプルコードについて、恐れ入りますが

使用方法について確認させて下さい。

現在、GitHubのhifive-pitalium-samplesをベースに

framesetタグで分割された画面をターゲットに

スクロールが出ないようウィンドウを拡大し

スクリーンショットを取るコードを作成しています。

サンプルコードの処理を、PtlWebDriverクラスの

executeJavaScriptで1ステップずつ実行する形になると

考えておりましたが、認識違いはないでしょうか？

お手数ですが、ご教授いただければ幸いです。

以上、宜しくお願いいたします。

2017年8月25日金曜日 18時06分19秒 UTC+9 ishikawa....@jp.nssol.nssmc.com:

[ishikawa....@jp.nssol.nssmc.com]

中島様

石川です。

お世話になっております。

>PtlWebDriverクラスの

>executeJavaScriptで1ステップずつ実行する形になると

ご認識のとおりPtlWebDriver#executeJavaScriptを使います。

ただし、executeJavaScript1回の呼び出しで複数ステップのJSをまとめて実行可能です。

例えば先のスクリプトをPitaliumのテストから実行する場合は、下記のようになります。

public class PtlSampleTest extends PtlTestBase {

    private static final DomSelector GOTOTOP_DOM_ELEMENT = new DomSelector(SelectorType.CLASS_NAME, "gototop");

    private static final String EXPAND_FRAME_HEIGHT_SCRIPT = "var iframes = document.getElementsByTagName('iframe');"

            + "Array.prototype.slice.call(iframes).forEach(function(iframe) {"

            + "var frameDocument = iframe.contentWindow.document;"

            + "var scrollHeight = frameDocument.documentElement.scrollHeight;"

            + "iframe.setAttribute('data-pita-originalheight', iframe.style.height);"

            + "var borderWidth = Number($(iframe).css('border-width').replace('px', ''));"

            + "iframe.style.height = (scrollHeight + borderWidth * 2) + 'px';});";

    private static final String RESET_FRAME_HEIGHT_SCRIPT = "var iframes = document.getElementsByTagName('iframe');"

            + "Array.prototype.slice.call(iframes).forEach(function(iframe) {"

            + "var frameDocument = iframe.contentWindow.document;"

            + "var height = iframe.getAttribute('data-pita-originalheight');" + "if (height == null) { return; }"

            + "iframe.style.height = height;" + "iframe.removeAttribute('data-pita-originalheight');});";

    @Test

    public void testFramePage() throws Exception {

        driver.get("frame-page");

        driver.executeScript(EXPAND_FRAME_HEIGHT_SCRIPT);

        assertionView.assertView("expanded");

        driver.executeScript(RESET_FRAME_HEIGHT_SCRIPT);

        assertionView.assertView("reset");

    }

}

以上、よろしくお願いいたします。

2017年8月29日火曜日 18時58分02秒 UTC+9 nakashima:

[nakashima]

石川様

中島です。

サンプルコードの方、有難うございました。

頂いたコードにて、ウィンドウサイズ調整を試したいと思います。

ご対応頂き有難うございました。

以上です。

2017年8月30日水曜日 15時20分19秒 UTC+9 ishikawa....@jp.nssol.nssmc.com: