自動テストのエビデンス取得方法を模索した際に気付いた点

はじめに

Katalonで行う自動回帰テストで全画面のキャプチャを取りたいと考え、GoogleChromeのコマンドを使用して対応してみました。

Katalonとは

Webアプリケーションの自動化ツール。SeleniumIDEと同じようにGUIでテストシナリオの作成が可能で、コードで書く際にはGroovy言語を使用する。
SeleniumIDEと違い、要素をオブジェクトといったもので管理する為に作成の手間はかかりますが、レイアウトの変更があった場合に影響があるスクリプトの修正は楽になります。

キャプチャの取得方法

DevToolを開き、右上の「︙」を押下して「Run command」を選択するとコマンドメニューが表示される。
表示された選択肢でキャプチャを取得できるコマンドは4つあり、「capture full size screenshot」を選択することで全画面のキャプチャを取得することができる。

手順

1.全画面取得したい画面でDevToolsを開く
→ショートカットキー「Ctrl」+「Shift」+「I」
2.コマンドを実行
→ショートカットキー「Ctrl」+「Shift」+「P」
3.フルサイズのスクリーンショットをキャプチャを選択
→クリップボードに「capture full size screenshot」を保存して、ショートカットキー「Ctrl」+「V」で貼り付け
4.画像名を設定して保存
→クリップボードに画像名と格納先を保存して、ショートカットキー「Ctrl」+「V」で貼り付け

手順(コード)

//要追加
import java.awt.Robot
import java.awt.Toolkit
import java.awt.datatransfer.StringSelection
import java.awt.event.KeyEvent

public class screenshot {
	@Keyword
	def get_cap_ful (String filePath) {
		Robot robot = new Robot()
        //DevToolsを開く
		robot.keyPress(KeyEvent.VK_CONTROL)
		robot.keyPress(KeyEvent.VK_SHIFT)
		robot.keyPress(KeyEvent.VK_I)
		robot.keyRelease(KeyEvent.VK_I)
		WebUI.delay(2)
        //コマンドを実行
		robot.keyPress(KeyEvent.VK_P)
		robot.keyRelease(KeyEvent.VK_P)
		robot.keyRelease(KeyEvent.VK_SHIFT)
		robot.keyRelease(KeyEvent.VK_CONTROL)
		WebUI.delay(2)
        //クリップボードに「capture full size screenshot」を保存
		StringSelection cfs = new StringSelection('capture full size screenshot')
		Toolkit.getDefaultToolkit().getSystemClipboard().setContents(cfs, null)
		WebUI.delay(2)
        //貼り付け
		robot.keyPress(KeyEvent.VK_CONTROL)
		robot.keyPress(KeyEvent.VK_V)
		robot.keyRelease(KeyEvent.VK_V)
		robot.keyRelease(KeyEvent.VK_CONTROL)
		WebUI.delay(2)
		robot.keyPress(KeyEvent.VK_ENTER)
		robot.keyRelease(KeyEvent.VK_ENTER)
		WebUI.delay(2)
        //クリップボードに画像名と格納先を保存
		StringSelection fp = new StringSelection(filePath)
		Toolkit.getDefaultToolkit().getSystemClipboard().setContents(fp, null)
		WebUI.delay(2)
        //貼り付け
		robot.keyPress(KeyEvent.VK_CONTROL)
		robot.keyPress(KeyEvent.VK_V)
		robot.keyRelease(KeyEvent.VK_V)
		robot.keyRelease(KeyEvent.VK_CONTROL)
		WebUI.delay(2)
		robot.keyPress(KeyEvent.VK_ENTER)
		robot.keyRelease(KeyEvent.VK_ENTER)
	}
}

問題点

・Katalonで開いたブラウザでは画像取得時に保存先を指定できなかった
→「chrome://settings/downloads」に直接画面遷移を行い、設定を変更できそう(要素がshadow-rootに隠されてる為、オブジェクトで指定できない問題はあるが・・・)。

今回はTabキーを4回とEnterを1回押して無理矢理解決。

public class screenshot {
	@Keyword
	def get_cap_ful (String filePath) {
    //省略
	}

    @Keyword
	def settings_downloads(){
		def tmp_url = WebUI.getUrl()
		Robot robot = new Robot()
		robot.keyPress(KeyEvent.VK_CONTROL)
		robot.keyPress(KeyEvent.VK_L)
		robot.keyRelease(KeyEvent.VK_L)
		robot.keyRelease(KeyEvent.VK_CONTROL)
		WebUI.delay(2)
		StringSelection url = new StringSelection('chrome://settings/downloads')
		Toolkit.getDefaultToolkit().getSystemClipboard().setContents(url, null)
		WebUI.delay(2)
		robot.keyPress(KeyEvent.VK_CONTROL)
		robot.keyPress(KeyEvent.VK_V)
		robot.keyRelease(KeyEvent.VK_V)
		robot.keyRelease(KeyEvent.VK_CONTROL)
		WebUI.delay(2)
		robot.keyPress(KeyEvent.VK_ENTER)
		robot.keyRelease(KeyEvent.VK_ENTER)
		WebUI.delay(5)
		robot.keyPress(KeyEvent.VK_TAB)
		robot.keyRelease(KeyEvent.VK_TAB)
		robot.keyPress(KeyEvent.VK_TAB)
		robot.keyRelease(KeyEvent.VK_TAB)
		robot.keyPress(KeyEvent.VK_TAB)
		robot.keyRelease(KeyEvent.VK_TAB)
		robot.keyPress(KeyEvent.VK_TAB)
		robot.keyRelease(KeyEvent.VK_TAB)
		robot.keyPress(KeyEvent.VK_ENTER)
		robot.keyRelease(KeyEvent.VK_ENTER)
		WebUI.delay(2)
		robot.keyPress(KeyEvent.VK_CONTROL)
		robot.keyPress(KeyEvent.VK_L)
		robot.keyRelease(KeyEvent.VK_L)
		robot.keyRelease(KeyEvent.VK_CONTROL)
		WebUI.delay(2)
		url = new StringSelection(tmp_url)
		Toolkit.getDefaultToolkit().getSystemClipboard().setContents(url, null)
		WebUI.delay(2)
		robot.keyPress(KeyEvent.VK_CONTROL)
		robot.keyPress(KeyEvent.VK_V)
		robot.keyRelease(KeyEvent.VK_V)
		robot.keyRelease(KeyEvent.VK_CONTROL)
		WebUI.delay(2)
		robot.keyPress(KeyEvent.VK_ENTER)
		robot.keyRelease(KeyEvent.VK_ENTER)
	}
}

成果物

WebUI.openBrowser('https://www.protosolution.co.jp/')

WebUI.maximizeWindow()
//問題点を解決する為の関数
CustomKeywords.'sample_keywords.screenshot.settings_downloads'()
//手順(コード)で作成した関数
CustomKeywords.'sample_keywords.screenshot.get_cap_ful'('C:\\Users\\UserName\\Desktop\\top.png')

取得できた画像

試して気づいたこと

DevToolsのボタンなどの要素はほとんどshadow-root内にある為、取得が難しい。しかし、今回のようにショートカットキーのみを使用した操作ならキャプチャの取得だけではなく、負荷テストやログの保存もできるかもしれないと感じました。
最後まで読んでいただき、ありがとうございました。