仕事で自動化テストを行うため、今回からKatalon Studioを使うことになりました。すでにある程度自動化が進んでいるプロジェクトへ途中参加する形だったため、まずは基礎知識を整理しながら勉強を進めています。
自動化テストでは、ログインボタンを押したり、入力フォームに文字を入れたり、スクロールしたりと、実際に人が操作する内容をツールが代わりに実行します。その際、「どの要素を操作するのか」を正確に指定する必要があります。そこで使われるのが「セレクタ」です。
セレクタには大きく分けて、CSSセレクタとXPathがあります。どちらもHTMLの中から目的の要素を探すための方法ですが、それぞれ特徴や使いやすさが異なります。
今回は、自動化テストの勉強を始めた方向けに、CSSセレクタとXPathの基本について簡単にまとめてみようと思います。
CSSセレクタの基本
よく使うCSSセレクタの書き方
自動化テストでよく使う要素選択
Katalon Studioの基本的な特徴
Katalonとは
Katalon Studio は、自動化テストを行うためのツールです。特に、Webアプリケーションのクリック、入力、スクロールなどの操作を自動化できるため、テスト業務の効率化に役立ちます。また、Selenium をベースにしており、比較的少ないコード量でもテストを作成しやすいのが特徴です。GUIベースで操作できる機能も多いため、自動化テスト初心者でも流れを理解しやすいと感じました。
CSSセレクタ
自動化テストでは、「どの要素を操作するか」を指定するためにCSSセレクタをよく使います。
特に Katalon Studio や Selenium では基本になる知識なので、よく使うものを簡単に整理してみました。
タグ選択
HTMLタグ名をそのまま指定します。
例：
<div>
<input type="text" placeholder="メールアドレス">
<button class="login-btn">ログイン</button>
<button class="cancel-btn">キャンセル</button>
</div>
button
/* 全てのbuttonタグを選択 */
class選択
「.クラス名」 を使います。
例：
<div>
<input type="text" placeholder="メールアドレス">
<button class="login-btn">ログイン</button>
<button class="cancel-btn">キャンセル</button>
</div>
.login-btn
/* <button class="login-btn">ログイン</button>を選択 */
複数class指定
classが複数付いている要素も指定できます。
例：
<div class="area a">
Aエリア
</div>
<div class="area b">
Bエリア
</div>
.area.a
/* class="area a" を持つ要素を選択 */
選択される要素：
<div class="area a">
Aエリア
</div>.area.a
→areaとaの両方のclassを持つ要素を選択- スペースを入れないことが重要
.area .a
/* こちらは area クラスの中にある .a 要素を選択する形になります。id選択
「#ID名」 を使います。
例：
<div>
<input type="text" placeholder="メールアドレス">
<button class="login-btn" id="login">ログイン</button>
<button class="cancel-btn">キャンセル</button>
</div>
#login
idは基本的に1ページ内で一意です。
属性(attribute)選択
特定の属性を持つ要素を選択します。
例：
<div>
<input type="text" placeholder="メールアドレス">
<button class="login-btn" id="login">ログイン</button>
<button class="cancel-btn">キャンセル</button>
</div>
input[type="text"]
/*<input type="text" placeholder="メールアドレス">を選択*/
親 > 子（直下の子要素）
「>」 を使います。
例：
<div class="login-area">
<button>ログイン</button>
<div class="cancel-area">
<button>キャンセル</button>
</div>
</div>.login-area > button
/*.login-area の直下にあるbuttonのみ選択。キャンセル ボタンはdivの中にあるため対象外*/→ divの直下にあるbuttonのみ選択
親 子（すべての子孫要素）
スペースを使います。
例：
<div class="wrapper">
<h2>Login</h2>
<div>
<input type="text" placeholder="メールアドレス">
<button class="login-btn" id="login">
ログイン
</button>
<button class="cancel-btn">
キャンセル
</button>
</div>
</div>.wrapper button
/* wrapperの中にあるすべてのbuttonを選択 */nth-child（何番目の子）
nth-child() を使うと、親要素の中で「何番目にある要素か」を指定できます。よくテーブルやメニュー選択で使います。
例：
<ul class="menu">
<li>ホーム</li>
<li>ログイン</li>
<li>お問い合わせ</li>
</ul>.menu li:nth-child(2)
/* 親が"menu"の<li>タグの2番目のli要素を選択 <li>ログイン</li> */属性に特定の文字を含む
*= を使うと、属性の中に特定の文字が含まれている要素を選択できます。
例：
<button class="login-btn">
ログイン
</button>
<button class="login-submit">
送信
</button>
<button class="cancel-btn">
キャンセル
</button>button[class*="login"]
/* class属性にloginを含むbuttonを選択 */選択された要素：
以下の要素が選択されます。
<button class="login-btn">
ログイン
</button>
<button class="login-submit">
送信
</button>属性が特定の文字で始まる
^= を使うと、特定の文字から始まる属性を選択できます。
例：
<input id="userName">
<input id="userEmail">
<input id="adminName">input[id^="user"]
/* idがuserから始まるinputを選択 */選択された要素：
以下の要素が選択されます。
<input id="userName">
<input id="userEmail">属性が特定の文字で終わる
$= を使うと、特定の文字で終わる属性を選択できます。
例：
<input id="userName">
<input id="adminName">
<input id="userEmail">input[id$="Name"]
/* idがNameで終わるinputを選択 */選択された要素：
以下の要素が選択されます。
<input id="userName">
<input id="adminName">属性が特定の文字と完全一致する
= を使うと、属性が完全一致する要素を選択できます。
例：
<input type="text">
<input type="password">
<input type="email">input[type="text"]
/* typeがtextのinputだけを選択 */disabled（ボタン無効）
:disabled を使うと、無効状態になっているbutton要素を選択できます。
例：
<button disabled>
ログイン
</button>
<button>
キャンセル
</button>button:disabled
/* 無効状態のbuttonを選択 */
逆に有効なボタン：
button:enabled
/* 有効状態のbuttonを選択 */チェック済み（checkbox / radio）
:checked を使うと、チェック済みの要素を選択できます。
例：
<input type="checkbox" checked>
<input type="checkbox">
<input type="radio" checked>
<input type="radio">input[type="checkbox"]:checked
/* チェック済みcheckboxを選択 */
input[type="radio"]:checked
/* チェック済みradio buttonを選択 */focus中のinput
:focus を使うと、現在入力中の要素を選択します。
input:focus
/* 現在フォーカス中のinputを選択 */練習Tips
CSSセレクタは、実際に触りながら覚えるのが一番理解しやすいと思います。Chromeの開発者ツール（F12）を開き、検索機能を使ってセレクタを入力すると、対象の要素を確認できます。
- Mac：
Command + Option + F - Windows：
Ctrl + F
例えば：
画像のように入力して、1つだけ要素が選択されていれば成功です。複数選択される場合は、セレクタの範囲が広すぎる可能性があります。
終わりに
CSSセレクタは、自動化テストで要素を操作するための基本知識になります。最初は少し難しく感じましたが、実際に開発者ツールを触りながら試してみると、どの要素を取得しているのか少しずつ理解できるようになりました。特にKatalonやSeleniumでは頻繁に使うため、まずは基本的な書き方を覚えておくだけでもかなり役立つと思います。
次回は、XPathセレクタについてもまとめてみようと思います。
