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

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

比較演算子

⚖️ 2つのものを比べて true / false を導き出す
===
完全に等しい
!==
等しくない
> <
大小比較

「演算子」なんていう言葉を聞くと、何だか難しそうに感じるかもしれませんが、実際は小学校の算数で習った > や < と同じ、2つのものを比べるための記号のことです。

プログラミングにおける比較演算子は、前のセクションで学んだ true と false を導き出すための、非常に重要な道具になります。

つまり、「AとBは同じ？」「AはBより大きい？」といった比較を行い、その結果を true か false で教えてくれるのです。

【最重要】プログラミングの超基本ルール：= と === の違い

ここで、プログラミングで最も間違えやすい、非常に大切なルールを学びます。

=（イコール1つ）
「代入」であり、中学校で習った「等しい」という意味ではありません。
右の値を、左の変数（箱）に入れるという命令
let score = 100;
// scoreという箱に100を入れる
===（イコール3つ）
「比較」左右の値が「型」まで含めて完全に等しいか？を調べる質問
答えは true か false で返ってくる
score === 100;
// scoreの中身は100と等しいですか？ → true
⚠️ この違いは絶対に間違えないようにしましょう！

書き方と具体例

ここでは、自動テストで頻繁に登場する比較演算子を見ていきましょう。

演算子 意味 例 結果
=== 完全に等しい 100 === "100" false
!== 完全に等しくない 100 !== 50 true
> より大きい 10 > 5 true
< より小さい 10 < 20 true
>= 以上 10 >= 10 true
<= 以下 10 <= 10 true 
// 数字の100と数字の100を比べる
100 === 100  // 結果は true (はい、完全に同じです)

// 文字の"山田"と文字の"山田"を比べる
"山田" === "山田"  // 結果は true (はい、完全に同じです)

// 数字の100と、文字の"100"を比べる
100 === "100"  // 結果は false (いいえ、見た目は同じでも種類が違います)

自動テストでの使い方

テストシナリオで直接使う機会は少ないかもしれませんが、比較演算子はテストの基盤となる部分では必ず使われているため、その意味を理解しておくとコードを読み解く上で非常に役立ちます。

値が期待通りかチェックする

const itemCountInCart = 5; // カート内の商品数を取得したと仮定

// 商品が5個以上なら、テストを続ける
if (itemCountInCart >= 5) {
  // 次の操作へ進む
}

条件によって操作を変える

// 「次へ」ボタンが表示されているかを取得したと仮定
const isNextButtonVisible = true;

// もしボタンが表示されていたら、クリックする
if (isNextButtonVisible === true) {
  // await page.locator('button').click(); のようなクリック処理を実行
}

やってみよう

学んだ比較演算子（=== と !==）を使い、テスト自動化で頻繁に遭遇する**「パスワードの一致チェック」**という実践的な課題に挑戦します。

演習ファイル

tests/document-4/lesson-02.spec.ts

手順動画

進め方

  1. 最初のテスト（代入と比較の違い）にブレークポイントを設定して、デバッグモードで実行します。console.logの結果を見ながら、= と ===、!== の動きの違いを一つずつ確認しましょう

  2. 【問題１】 のコメントの下に、savedPassword と correctUserInput を === で比較し、その結果を isLoginSuccessful 変数に代入するコードを記述します

  3. 【問題２】 のコメントの下に、savedPassword と wrongUserInput を !== で比較し、その結果を isLoginBlocked 変数に代入するコードを記述します

  4. テストを実行し、expectによる答え合わせが2つとも成功することを確認できればクリアです！

目次に戻る