20221116_PWANight_Kubera紹介

PWA Night vol.45 〜テストツール〜 2022.11.16 E2Eテストの自動化ツール Kubera(クベーラ)の紹介

軽く自己紹介 ⼭⽥ ⼤介 レッドハット株式会社 / DevOps Consultant / Agile Coach 個⼈活動 • E2Eテストツールの作成をはじめました • 他の種類のテストも何か思いついたら作っていきたいな アカウント • Twitter：ぢゃまだ(@dyamada_) • Qiita：@dyamada_ • Docswell： @dyamada ディズニーと料理とゲームと猫が好きなアラフィフおっさんです 2

Kubera の紹介 名前：Kubera Kubera と書いて「クベーラ」と読みます いつの⽇か、ちゃんとしたロゴとかキャラクターとかHPとか作りたい （芸術系スキルがゼロなので、いつか誰かに作ってもらいたい） 画⾯を操作して⾏うテストを⾃動化するツールで、⾊々なOSSツールの ⼒を頼ってなるべくノーコードでテストできるツールを⽬指しています （若⼲のプログラムの知識は必要） https://en.wikipedia.org/wiki/Kube ra 提供しているツールでは、Excel形式で記載したテストケースを読み込んでテストを⾃動実⾏し ます GitHubで公開しています • ツール本体：https://github.com/kubera-test/kubera • テストプロジェクトのスケルトン：https://github.com/kubera-test/kubera-skeleton 3

• https://github.com/kubera-test/kubera
• https://github.com/kubera-test/kubera-skeleton
• https://en.wikipedia.org/wiki/Kube

対象環境 Webアプリ 確認済み スマホアプリ 対応予定 対応予定 その他 対応予定なし 上記以外のブラウザ 6

Excelで書くテストケース 7

テストケースの書き方 操作／検証の⼿順を上から下 に向かって記載します 8

テストケースの書き方 ツールが操作⽅法を判断するキーワードを⼊⼒する列です この列が空⽩の⾏は、他の列に記載があっても処理は⾏われません 9

テストケースの書き方 操作の⼿順を⽂章で記載する列です この列はツールは使⽤しないので、分かりやすい操作⼿順を記載して ください。（空⽩でもツールは動きます） 10

テストケースの書き方 操作対象の要素を特定する⽅法を記載する列です Seleniumの特定⽅法と同じです 1列⽬：id, name, css_selector, xpath, link_text, partial_link_text, tag_name, class_name 2列⽬：1列⽬で選択した⽅法の応じた要素の特定条 件 3列⽬：対象が配列要素の場合、そのインデックス(1 から) 11

テストケースの書き方 実際のテストケースを記載する列です 左に記載した⼿順に応じて実際の挙動を記載します ⼊⼒、検証する⼿順の場合は、その「値」 操作、確認そのものを⾏う場合は、「〇」 列に記載がされた⾏だけが実際に操作されます テストケースとして必要のない操作はセルを空⽩に することでスキップできます 12

テストケースの書き方 テストケースは右に向かって増やすことができます 画⾯を使⽤したテストは、ある程度同じような⼿順、 画⾯遷移をすることが多いので ある程度似通った⼿順を左に記載しておいて テストケースのパターンを並べることができます 13

デモ 実際に動かしてみます 14

できること 画⾯操作のテストで最低限必要なものは揃ってい（ると思い）ます 値の⼊⼒ • • • • input type ⼊⼒系 textarea select(single) select(multi) クリック • • • • • • • input type button input type clear input type submit input type image button a img 値の検証 • • • • • input type ⼊⼒系 textarea select(single) select(multi) 表⽰⽂字列 (div,span,p,h1-5) 表⽰状態の検証 • • • • • • • input textarea select button a img div,span,p,h1-5 値のクリア • • • • input type ⼊⼒系 textarea select(single) select(multi) 利⽤可能状態の検証 • • • • • • • input textarea select button a img div,span,p,h1-5 15

できること ブラウザ操作 • • • URL変更 操作タブのスイッチ スクリーンショット撮影 今後の機能追加予定 • • • • • 共通的な操作の定義 DBの洗い替えと、結果確認 スクリーンショット保管のための利便性向上 スマホ対応 画像ファイルの⽐較検証 16

テスト仕様書のカスタマイズ ツールは「TestCaseName」というキーワードから右下のセルだけを使います このセルの位置は「settings」シートで設定できます このセルより上の⾏と左の列はツールは⼀切参照しませんので、会社で規定されてい る⾏ヘッダ、列ヘッダのようなものを記載いただくことが可能です 17

手順書くの大変そう ツールを動かすためのキーワードとか、 要素の特定とか書くの⼤変そう 19

画面操作候補一覧を作成するツールがあります テスト対象の画⾯ごとに操作できる要素の抽出と操作の⼀覧を作成できるツールを⽤意しました 20

デモ 実際に動かしてみます 21

できること • • • • 残念ながら（？）、操作のキャプチャ機能は付いていません 抽出したい画⾯まで⼿で遷移させて、ツールに要素を抽出させます ある程度操作に使うかな？と思われる要素を検索します。現バージョンでは下記が対象です • input タグ全種 • select タグ • textarea タグ • button タグ • a タグ • img タグ • id 属性を持つ div タグ • id 属性を持つ span タグ • id 属性を持つ p タグ • id 属性を持つ h1〜h6 タグ input に対して、label タグが紐づけてある場合は、その⽂字列を項⽬名として持ってきます 22

使い方 テストで使いたい操作を コピペして使ってください 23

構成 Kubera 作るもの Java JSON JSON Reader Kubera本体 Excel Excel Reader 今⽇はここのお話 でした 24

こんな使い方も考えてます 作るもの Kubera Java JSON テストケースを⼊⼒するUI、ご⾃⾝で作成可能です JSON Reader 画⾯１操作ごとに１つのJSON⽂字列をKuberaに渡すという インターフェースになっているので、そのルールに従うこと Excel で、WebでUIを作成したり、既存の仕様書を流⽤してUIを作 Excel 成することができます。 Reader Kubera本体 25

使用のイメージ ビジネス面 自動と手動 ● ● ● ● ● ● ● ● ● ● ● Q2 Q3 Q1 Q4 単体テスト コンポーネントテスト ● ● ● 自動 技術面 探索的テスト シナリオテスト ユーザビリティテスト ユーザー受け入れテスト アルファ／ベータ パフォーマンス／負荷テスト セキュリティテスト 「〜性」テスト 製品を批評する チームを支援する ● 機能テスト 実例 ストーリーテスト プロトタイプ シミュレーション 手動 ツール 26 「実践アジャイルテスト」より抜粋し、⼀部追記

自動化すると テストが⾃動化されていると・・・・？ プログラムを改修した時に、意図しない影響を及ぼしてしまったことを テストコードがエラーとして検出してくれる （リグレッションテストを担ってくれる） 修正によって意図しない箇所にバグが⼊り込むことを予防できる 影響確認のテストってどこまでやってますか・・・？ 27

自動化すると ATDD/TDD といった開発⼿法のように、開発の前にテストコードを書くと・・・ ⼀般的な設計ドキュメントに⽐べ、振る舞い(IN/OUT)が明確なので 製造時の曖昧性がなくなる 製造後すぐにテストコードからフィードバックを受けられるので、製造の結果 が間違っていないことを保証してくれる 機能を作る時にバグを作り込んでしまうことを予防できる 28

シフトレフトしていこう テストという活動を バグがシステムに⼊り込んでいることを確認する⾏為 から バグが作り込まれないように予防する⾏為 に可能な範囲で変えていくことで ⼿戻りにかかるコストを減らして、開発を楽しいものにしていきましょう！ 29

ありがとうございました ご清聴、ありがとうございました 30