Playwrightを使用して、ブラウザテスト(E2E)を実行する①

Playwrightのインストール

npm init playwright@latest

これにより、Playwright の初期設定が行われ、設定ファイルやサンプルテストが生成されます。プロンプトに従って、適切な選択を行ってください。（デフォルトの選択でOK）

テスト対象の作成

今回はReact.jsを使って簡単なログインフォームを作成し、入力に対するエラーメッセージの表示のテストを行います。

まず、ログインフォームを作成します。

import React, { useState } from 'react';
import './App.css';

function App() {
 const [errors, setErrors] = useState({ email: '', password: '' });

 const validateForm = (event) => {
   event.preventDefault(); // フォームのデフォルト送信動作を防ぐ
   const email = event.target.email.value; // メールアドレスの値を取得
   const password = event.target.password.value; // パスワードの値を取得
   let valid = true; // バリデーションの状態を示す
   let errors = { email: '', password: '' }; // エラーメッセージの初期状態

   if (!email.includes('@')) {
     errors.email = 'メールアドレスが無効です'; // エラーメッセージを設定
     valid = false; // バリデーション失敗
   }

   if (password.length < 6) {
     errors.password = 'パスワードは6文字以上でなければなりません';
     valid = false;
   }

   setErrors(errors); // エラーメッセージをステートに設定

   if (valid) {
     // フォーム送信処理
   }
 };

 return (
   <div className="App">
     <h1>ログイン画面</h1>
     <form id="loginForm" onSubmit={validateForm}>
       <div>
         <label htmlFor="email">メールアドレス:</label>
         <input type="email" name="email" id="email" placeholder="Email" />
         <span id="emailError" className="error">
           {errors.email}
         </span>
       </div>
       <div>
         <label htmlFor="password">パスワード:</label>
         <input type="password" name="password" id="password" />
         <span id="passwordError" className="error">
           {errors.password}
         </span>
       </div>
       <button type="submit">ログイン</button>
     </form>
   </div>
 );
}

export default App;

コードの内容

  const [errors, setErrors] = useState({ email: '', password: '' });

useState フックを使用して errors ステートを定義します。errors は、メールアドレスとパスワードのエラーメッセージを保持するためのオブジェクトとして機能します。それぞれの初期値は空文字。

  const validateForm = (event) => {
    event.preventDefault(); // フォームのデフォルト送信動作を防ぐ
    const email = event.target.email.value; // メールアドレスの値を取得
    const password = event.target.password.value; // パスワードの値を取得
    let valid = true; // バリデーションの状態を示す
    let errors = { email: '', password: '' }; // エラーメッセージの初期状態

    if (!email.includes('@')) {
      errors.email = 'メールアドレスが無効です'; // エラーメッセージを設定
      valid = false; // バリデーション失敗
    }

    if (password.length < 6) {
      errors.password = 'パスワードは6文字以上でなければなりません';
      valid = false;
    }

    setErrors(errors); // エラーメッセージをステートに設定

    if (valid) {
      // フォーム送信処理
    }
  };

validateForm 関数を使って、フォームの送信を処理していきます。エラーが見つかった場合、errors オブジェクトにエラーメッセージを設定します。
event.preventDefault() では、フォームがデフォルトで送信されるのを防ぎます。
次の2行は(event.target.email.value,event.target.password.value)については、フォームの入力値を取得します。
setErrors()はエラーメッセージを保持するための関数。
if (valid){...はフォームの送信が成功した場合の処理を入力します。

return以降のコードは、画面のフォームの設定を行っています。

-----②-----につづく

参考サイト：https://tech-blog.rakus.co.jp/entry/20230509/playwright