自動テストチュートリアル

Playwright、Seleniumなどの自動テストツールを学ぼう

Webテーブル(Web Tables)

First Name Last Name Email Action
Kierra Gentry kierra@example.com
Alden Cantrell alden@example.com
Cierra Vega cierra@example.com

業務システムや管理画面で頻繁に使われる、表形式のデータ「Webテーブル」の操作に挑戦しましょう。

利用頻度 難易度
★★★★☆ ★★★★☆

テーブル内のデータを取得したり、特定の行にあるボタンをクリックしたりといった操作を学びます。

テーブルは見た目が整っている反面、データの追加や削除でHTMLの構造が変わりやすい、少し気まぐれなUIです。そのため、いつでも安定して動くテストを書くには、ちょっとしたコツが必要になります。今回はその「コツ」をしっかり掴んでいきましょう！

Webテーブルの仕組み

Webテーブルの操作には「テーブル専用コマンド」があるわけではなく、これまでの要素取得を応用します。そのため、ベースとなるHTMLの仕組みを理解しておくことが大切です。

タグ 役割
<table> 表全体
<th> 表の「見出し」（table head）
<tr> 表の「行」（table row）
<td> 表の「セル（マス目）」（table data）

多くの場合、このようなタグが入れ子になって表を形作っています。

気をつけるポイント

それは、Pick locator でセルの値を直接指定することです。

テーブルの内容は、データの登録や削除によって頻繁に変わります。同じ値が複数行に存在することもあり、値を直接指定するとテストが不安定になります。さらに意図せずテスト観点を補えないシナリオになることもあります。

テーブル内のデータを利用する場合は、基本的に位置で指定するのが安全です。

たとえば、「3行目の2列目のセル」というように、構造（位置）で要素を特定しましょう。これにより、データが変わってもテストが壊れにくくなります。

今回使用するコマンド①：nth()

nth() は、たくさんある同じ要素の中から「何番目か」を指定して、一つだけを特定するためのコマンドです。テーブルの行や、リストの項目など、同じような要素がずらっと並んでいる場面で大活躍します。

基本的な書き方

// 複数ある要素の中から、N番目のものを指定する
await page.locator("{複数の要素に当てはまるセレクタ}").nth(N番目).click();

具体例

// ページ内に「登録」ボタンが複数あるテーブルで、
// 3番目の行の「登録」ボタンをクリックする場合
await page.getByRole('button', { name: '登録' }).nth(2).click();

今回使用するコマンド②：textContent()

要素が持つテキスト情報を、文字列として取得するコマンドです。「テーブルの特定のセルの値を取得して、その内容が正しいかチェックする」といった検証処理でよく使います。

画面に表示される文字は、基本的に text か value として存在します。text の場合、例えば以下のようなHTML構造になります。

<td scope="row">Kierra</td>

この場合、textContent() を使うと <td> タグ内の Kierra という文字列を取得できます。

基本的な書き方

await page.[ここにPick locatorで取得したコード].textContent();

具体例

// tdのテキストを取得
await page.locator("td").textContent();

読み取った値を「変数」という箱に保存する

textContent() で読み取った文字は、そのままではすぐに消えてしまいます。後でじっくり確認したり、比較したりするために、一度どこかに保存しておく必要があります。

その、値を一時的に保存しておくための「箱」のようなものが**「変数」**です。

変数には、中身を後から変更できない箱 (const) と、変更できる箱 (let) の2種類があります。

const（コンスト）：中身を固定する箱

一度、箱に値を入れたら、もう中身は変えられません。意図しない変更を防げるため、基本的には、まず const を使うと覚えておきましょう。

// message という名前の箱に「ログイン成功」という文字を入れる
const message = 'ログイン成功';

// この後、messageの中身を書き換えようとするとエラーになる
// message = 'ログイン失敗'; // ← これはできない！

let（レット）：中身を入れ替えられる箱

中身を後から自由に入れ替えることができます。値が変わる可能性がある場合にのみ、限定的に使います。

let userStatus = "ゲスト";
// ...何かの処理...
userStatus = "会員"; // ← 中身を入れ替えられる

やってみよう

以下の手順に沿って、テーブルの3行目のデータを削除するテストコードを完成させてください。

ℹ️ demoqaサイトではテーブルのDOMがtable要素で作られてないため、Selenium - Automation Practice Form という練習サイトで演習を行ってもらいます。

演習ファイル

tests/document-2/lesson-15.spec.ts

行う操作

項目 行う操作
テーブルの1行目1列目 テキストを取得して変数に格納
テーブルの1行目2列目 テキストを取得して変数に格納
テーブルの2行目1列目 テキストを取得して変数に格納
テーブルの2行目2列目 テキストを取得して変数に格納
テーブルの3行目 削除ボタンをクリックする

手順動画

手順

  1. デバッグ実行： ブレークポイントで目的の画面で止める
  2. 要素の特定： Pick locator を使ってコードを取得する
  3. コードの記述： 取得したコードを元に処理を完成させる
  4. 最終確認： テストを実行し、passed を確認する

ちなみに...

1. 番号は「0」から数えよう！

nth() を使う上で、とても大切なルールが一つあります。それは、番号を 1からではなく0から数え始めることです。

指定したい要素 書き方
1番目の要素 nth(0)
2番目の要素 nth(1)
3番目の要素 nth(2)

この「0始まり」の考え方は、プログラミングの世界では「基本のき」なので、ぜひここでしっかり慣れておきましょう！

2. 便利なショートカット first() と last()

「最初」と「最後」を指定したい場合は、もっと簡単で分かりやすい書き方が用意されています。

  • 最初の要素： nth(0) の代わりに first() が使えます
  • 最後の要素： last() が使えます
// どちらも「1番目」の要素を指定する、同じ意味のコード
await page.locator('li').nth(0).click();
await page.locator('li').first().click();

// 「一番最後」のリスト項目をクリックする
await page.locator('li').last().click();

3. nth() はWebテーブル以外でも大活躍！

nth() は、Webテーブル専用のコマンドではありません。

リストの項目、検索結果の一覧、並んだボタンなど、「同じ要素が複数並んでいる」場面ならどこでも使える万能コマンドです。同じように、要素のテキストを取得する textContent() も、あらゆる要素に対して使えます。ぜひ色々な場面で活用してみてください。

目次に戻る