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

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

Webアプリの基本構造

🏗️ Webアプリは3つの技術でできている
📄
HTML
骨格・構造
🎨
CSS
見た目・装飾
⚡
JavaScript
動き・機能

自動テストを書く上で、Webアプリがどのように構成されているかを理解することは非常に重要です。ここでは、Webアプリを支える3つの基本技術について学びましょう。

Webアプリを「家」に例えると...

Webアプリの構造は、家を建てることに例えると理解しやすくなります。

技術 家で例えると 役割
HTML 柱や壁などの骨組み ページの構造・内容を定義する
CSS 壁紙や家具などのインテリア 見た目やデザインを整える
JavaScript 電気やガスなどの設備 動きや機能を追加する

HTML：ページの「骨格」

HTMLは、HyperText Markup Language の略で、Webページの構造を定義する言語です。

<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>これは段落です</p>
    <button>クリック</button>
  </body>
</html>

自動テストとの関係

Playwrightでは、このHTMLの要素（<button> や <input> など）を指定して操作します。Pick locatorで取得しているのも、実はこのHTML要素なのです。

CSS：ページの「見た目」

CSSは、Cascading Style Sheets の略で、HTMLで作った骨格に、色や大きさ、配置などの装飾を加える言語です。

/* ボタンを青くして、角を丸くする */
button {
  background-color: blue;
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
}

自動テストとの関係

CSSのクラス名（.login-button など）は、要素を特定するためのセレクタとして使われることがあります。ただし、デザイン変更で変わりやすいため、テストでは getByRole などの安定した方法を優先しましょう。

JavaScript：ページの「動き」

JavaScriptは、Webページに動きや機能を追加するプログラミング言語です。

// ボタンがクリックされたら、メッセージを表示する
button.addEventListener('click', () => {
  alert('クリックされました！');
});

自動テストとの関係

Playwrightのテストコードも、実はJavaScript（またはTypeScript）で書かれています。つまり、自動テストを書くことは、JavaScriptでプログラムを書くことと同じなのです。

開発者ツールで実際に見てみよう

ブラウザの「開発者ツール」を使うと、Webページの裏側にあるHTML、CSS、JavaScriptを実際に確認できます。

開発者ツールの開き方

ブラウザ ショートカット
Chrome / Edge F12 または Ctrl + Shift + I（Mac: Cmd + Option + I）
Firefox F12 または Ctrl + Shift + I（Mac: Cmd + Option + I）

Elements（要素）タブ

<div
class="login-form">
<input
type="text"
id="username"
placeholder="ユーザー名" />
<button>
ログイン
</button>
</div>

Pick locatorで要素を特定する際、この開発者ツールの知識があると、より正確なセレクタを書くことができます。

まとめ

技術 役割 自動テストとの関係
HTML ページの構造 操作対象の要素を定義
CSS ページの見た目 セレクタとして使える（が、不安定になりがち）
JavaScript ページの動き テストコードを書く言語

これら3つの技術の基本を理解しておくと、自動テストで「なぜこのセレクタで要素が取れるのか」「なぜこのエラーが出るのか」がグッと分かりやすくなります。

次のステップ

次のチャプターでは、開発者ツールを使って、より詳しくHTML構造を探索する方法を学びます。

目次に戻る