Katalon_Recorder01_title

【Katalon Recorder】を使ってWebブラウザのテスト自動化を始めよう!①導入・レコード編

皆さん、こんにちは。
今回は、「Katalon Recorder」というツールを使って、Webブラウザのテスト自動化についてご紹介したいと思います。
こちらは、SeleniumIDEと似ているツールです。
Seleniumを過去に使用されている方であれば、すぐに操作を覚えることが可能です。
また、テスト自動化を初めて取り組む方でも、使いやすいツールとなっていますので、これを機に、是非テスト自動化を取り組んでみてはいかがでしょうか。

Katalon Recorderの1回目の記事として、以下内容を述べていきたいと思います。
「記事内リンク」

Step1.Katalon Recorderの紹介
Step2.導入

Step3.各メニュー項目の紹介
Step4.実際にテストページを使用してのレコード方法

■ Step1.Katalon Recorderの紹介

Katalon Recorderは、Webブラウザでの簡易的な操作をレコード、または組み立てることで、Web操作の自動化が行えます。
これは、Webコンテンツのリグレッションテスト(回帰テスト)に向いています。
リグレッションテストは、Webコンテンツのリリースがあったとして、リリース分の他、既存部分に問題が無いかのチェックを行います。
リリース前に行うことで、デグレードやバグが発生しないかのチェックを行うことができます。
しかし、毎回リリース時に、同じ操作を手動(マニュアル)で実行するのには、時間やリソースを一定数確保しなければなりません。
それでは、効率的にあまりよくありません。
同じ事を繰り返し行うのならば、それはツールに行ってもらうのが一番でしょう。
そのような繰り返し行うケースは、Katalon Recorderで行うことができます。

Katalon Recorderでは、以下の機能や特徴があります。
(別途参考として、今後紹介するKatalon Studioの特徴も述べています。)

katalon_recorder01_image01

 

 

■ Step2.導入

Katalon Recorderの導入は、とても簡単です。
それは、Chromeブラウザ、またはFireFoxブラウザの拡張機能として追加することで使用できるからです。
以下の手順で、導入することができます。
今回は、Chromeブラウザをベースに述べていきたいと思います。

1.以下、Chromeウェブストアにアクセスします。
https://chrome.google.com/webstore/detail/katalon-recorder-selenium/ljdobmomdgdljniojadhoplhkpialdid
2.追加ボタンでChromeに追加します。
3.ChromeのMenu→拡張機能⇒Katalon RecorderをONに設定します。
4.Chrome画面の右上にアイコンが表示されますので、それを選択します。
5.Katalon Recorderが起動します。

 

■ Step3.各メニュー項目の紹介

 

katalon_recorder01_image02

Katalon Recoderが起動すると、以下の画面が表示されると思います。
各メニュー、アイコンごとに紹介していきます。
①ツールバー
②テストケース エクスプローラー
③テストケース詳細ビュー
④トップメニュー
⑤フッターメニュー
⑥その他メニュー

①ツールバー

ツールバーはKatalon Recorderの基本となる項目です。

katalon_recorder01_image03

 

①Newボタン
テストケースを作成します。

②Recボタン
Web操作内容を記録します。

③Playボタン
選択した単一のテストケースを実行します。

④P.Suiteボタン
選択したテストスイートを実行します。

⑤P.Allボタン
全てのテストスイートを実行します。

⑥Pauseボタン
テストの再生を一時停止します。

⑦Reportボタン
KatalonのTestOpsCenterにテスト結果のレポートをアップします。

⑧Exportボタン
現在のテストスイート/テストケースをさまざまなスクリプト言語およびフレームワークにエクスポートします。

 

②テストケース エクスプローラー

テストケースエクスプローラーは、テストスイートとそのテストケースの構造が表示されます。
テストケースファイルの読み込み、テストケースファイルの編集が行えます。

katalon_recorder01_image04

 

①ファイル読み込みボタン
一度作成し、保存したKatalonRecorderのテストファイルを読み込むことができます。

②新規テストスイートボタン
新規にテストスイートを作成します。
テストケースをまとめる”ハコ”と考えていただくと、とらえやすいです。

③テストスイートのメニューボタン
テストスイート作成後、テストスイート名の右側のメニューボタンを押すと以下の操作が行えます。
・テストスイートの別名保存
・選択テストスイートのfile Close
・すべてのテストスイートのfile Close
・テストケースの新規作成
・テストスイートの名前変更

④テストケースのメニューボタン
テストケース作成後、テストケース名の右側のメニューボタンを押すと以下の操作が行えます。
・テストケースの新規作成
・テストケースの削除
・テストケース名の変更
・選択しているテストケースの実行

 

③テストケース詳細ビュー

Katalon Automation Recorderは、RecボタンによるWeb操作の記録登録、また記録をベースに、Web操作のコマンドを組み立てて、テストケースを作成することができます。
テストケース詳細ビューでは、その各コマンドを視覚的に確認することができます。
ユーザーガイドの解説では、Katalon Automation Recorderは、一般的なSeleniumコマンドのほとんどをサポートしています。

katalon_recorder01_image05

①-1テストステップの追加アイコン
テストステップを追加します。

①-2テストステップ削除アイコン
テストステップを削除します。

①-3テストステップコピーアイコン
テストステップをコピーします。

①-4テストステップペーストアイコン
テストステップをペーストします。

 

②-1コマンド設定
テストステップ作成後、コマンドを設定することができます。

②-2ターゲット設定
コマンドに対するターゲットを設定することができます。
例として、コマンドに「Open」を設定している場合、ブラウザ上で表示するURLを設定することができます。

②-3Value設定
テキストボックスにテキストを入力するコマンドを設定する場合、テキストボックスに入力するテキストを指定することができます。

②-4要素選択
Web操作のテストステップを組み立てる際、Web要素を選択することで、Target項目に設定することができます。

②-5要素のハイライト
選択したテストステップをハイライト表示にします。

 

④トップメニュー

katalon_recorder01_image06

 

①Speedアイコン
テスト実行の速度を調整します。

②設定アイコン
ユーザーがKatalon Studioがアクティブなブラウザーと通信するために使用するデフォルトのポートを変更できます。

③Helpアイコン 
ユーザーマニュアルのページ、ビデオ、コミュニティサイト、Katalonページのリンク項目が表示されます。

④githubアイコン
githubページに遷移します。

 

⑤フッターメニュー

katalon_recorder01_image07

①Log
テスト実行を行うと、こちらにログが出力されます。
テストステップが問題なく行われたか、エラーが起きたかの確認が行えます。

②Screenshots
テストコマンド「captureEntirePageScreenshot」のステップで撮ったキャプチャが表示されます。

③Variables
現在選択されているコマンドの詳細情報が表示されます。 ユーザーは、テストの実行中に、このタブでコマンド名、ターゲット、および値を表示できます。

④Data Driven
ユーザーガイド表記なし。基本的に使えません。

⑤Extension Scripts
ユーザーガイド表記なし。基本的に使えません。

⑥Reference
選択したコマンドの詳細なドキュメントが表示されます。 これにより、ユーザーはコマンドの正しいタイプとパラメーターの数を確認できます。

 

⑥その他メニュー

katalon_recorder01_image08

 

①TestOpsボタン
Katalon analyticsのページに遷移します。
Katalon analyticsは別途、紹介いたします。

②保存ボタン
ファイルをHTML形式で保存します。

③削除ボタン
テスト実施を行った際のログ等削除します。

④折り畳みボタン
フッターメニューの領域を折りたたみます。

 

 

■ Step4.実際にテストページを使用してのレコード方法

katalon_recorder01_image09
では、実際にWebページの操作をレコードして、テストの自動化を体験してみましょう。
当ブログサイトで、Webブラウザのテスト用に以下ページを用意しました。

Test Page_No1

 

このページでは、以下要素の確認が行えます。
・テキスト入力
・ラジオボタン選択
・チェックボックス選択
・プルダウン選択
・URLリンククリック

今回はこちらのページを使って、レコードしてみましょう。
(事前準備)
事前準備として、ブラウザで、以下テストページを開いておきましょう。
https://susakiworks.com/softwareesting/testpage/test_page_no1/

Step1.
ツールバーから「+New」ボタンで、テストケースを作成し、名前を設定します。

Step2.
一度、Ctrl+SでHTML形式でテストデータを保存します。

Step3.
「Recod」ボタンを選択します。

Step4.
Web操作の一例として、以下操作を行います。
①「名前」、「ニックネーム」「今日の日付を入力してください」の各テキストボックスクリック後、テキストを入力
②ラジオボタン選択
③チェックボックス選択
④プルダウンで、任意の季節を選択
⑤URLリンクボタンをクリック

Step5.
一通りのWeb操作が終わったら、Katalon Recoderに戻り、「Stop」ボタンを選択します。

STep6.
レコードが問題なく行えているかチェックを行います。
①トップMenu①Speedアイコンを選択し、スライダーでスピードを調整します。
(デフォルトの場合、最速の設定になっていますので、中間、遅めに設定します。)
katalon_recorder01_image10

②Playボタンを選択します。
レコードを行った一通りの操作が問題なく実施(各テストステップがグリーン表示)できていればOKです。
katalon_recorder01_image11(Log結果)
katalon_recorder01_image12

■ 最後に

如何でしたでしょうか。
今回はKatalon RecorderでのWeb操作レコードについて述べてみました。
次回は、レコードではなく、テストステップを追加登録してテストケースをくみ上げていく内容を述べたいと思います。

最後まで見て頂いてありがとうございました。

Selenium実践入門 ――自動化による継続的なブラウザテスト WEB+DB PRESS plus
Selenium実践入門 ――自動化による継続的なブラウザテスト WEB+DB PRESS plus

 

Pythonをおぼえたらブラウザ操作を自動化しよう: Seleniumで操作してBeautifulSoupで解析をする
Pythonをおぼえたらブラウザ操作を自動化しよう: Seleniumで操作してBeautifulSoupで解析をする




この記事が気に入ったら
いいね ! しよう

Twitter で
Katalon_Recorder01_title
最新情報をチェックしよう!

SusakiWorks

SusakiWorksでは、ソフトウェアテスト、テスト自動化、業務効率、ビジネスに関する書籍、国内外のソフトウェアテストに関するニュース記事などをご紹介しています。ソフトウェアテストやQCに関する情報発信、および意識向上を推進していきます!