「保存できた」を、入力と結果で確かめます。ふつうの使い方から、空欄、長すぎる入力、通信の失敗まで、一つずつ観察します。
この回は、しくみを読むことと、実際の結果を確かめる練習を組み合わせます。付属見本はブラウザーだけで保存する一人用の版です。アカウント・データベース・共有は拡張課題として扱います。
練習用の「まちの読書メモ」を開く。見本には追加・読書状況の変更・JSONの書出があります。編集・削除・検索・復元・共有は、依頼文を使って追加する拡張課題です。練習用データを使い、一つのタブで操作してください。
正しい入力と、困る入力を並べる
まちの読書メモに、練習用の題名「練習の本 A」と、メモ「次は第2章を読み返す」を入力します。保存したら一覧へ戻り、題名とメモを比べてください。作った画面が開くことと、使いたい仕事ができることは別の確認です。最初はこの一往復を、手元の入力で最後まで通します。
保存を確かめるには、画面を再読み込みします。今見えている一件が消えれば、画面の中には出ていたものの、次に使うための保存はできていません。前の章の一人用の版では、このブラウザー内に記録します。別の端末にも出るかという確認は、アカウントとデータベースを加えた段階で行います。
入力の約束を、確認の表へ写します。題名は必須で120字まで、メモは省略できて1000字までです。状態は未読、読書中、読了の三つから選びます。正常な例を一件、題名の空欄、題名だけ、長すぎる入力を一件ずつ用意すると、どの条件を確かめたのかが残ります。
四つの入力を同じ画面で確かめる
ふつうの入力、空欄、境目を超えた入力、保存の失敗で、期待する結果を先に分けます。一件の成功を、すべての確認の代わりにしません。
- 題名120字、メモ1000字は本書の題材の仕様です。
- 失敗時も書きかけの入力を残す条件を示します。
題名が空のときは、一覧へ空の一件を追加してはいけません。空白だけを入れた場合も試します。どこを直せばよいかが題名欄のそばに出て、書きかけのメモが残るなら、利用者は続きから直せます。入力をすべて消して「エラーです」とだけ出す画面では、失敗の後に余計な作業が生まれます。
境目も確かめます。題名が120字のときと121字のとき、メモが1000字のときと1001字のときを比べます。先に期待する結果を書いておけば、AIが選んだ文字数の判定方法や説明文と食い違う箇所を見つけられます。文字数の数え方が曖昧なら、日本語の同じ文字を繰り返した練習データから始めます。
状態を読書中へ変えて保存し、一覧へ戻って確かめます。すでにある一件の状態を変えるときは、その本のidを変えません。idは一件を見分ける札で、題名や状態とは役割が違います。作成日時も更新のたびに新しくしてしまうと、いつ追加した記録なのかを読み取れなくなります。
画面の見え方については、Playwrightの公式資料も、利用者が見るものと操作するものを確認の中心に置きます。資料 S12 本書でも、内部の処理の名前より、入力した文字が表示されるか、エラーから直せるかを先に見ます。自動テストへ進むときも、人が決めたこの期待値を渡します。
最後に、同じ確認を小さい画面で行います。題名が折り返すか、保存ボタンが画面の外へ出ていないか、状態を指で選べるかを見ます。文字が収まるだけでは、読みやすさまでは分かりません。実際に一件を追加して一覧へ戻ると、見た目の修正を、使う目的につなげられます。
入力と期待する結果を並べる
題名「練習の本 A」、メモあり → 一件保存され、再読込後も残る。
題名は空、メモあり → 保存しない。題名の修正箇所を示し、メモは残す。
題名120字 → 保存できる。121字 → 保存せず、直し方を示す。
状態を未読から読書中へ変更 → 同じidの一件が更新される。
手を動かす順番
- 正常な入力を保存し、再読込後の結果を比べる
- 空欄と文字数の境目を試す
- 状態の変更と小さい画面の操作を確認する
失敗した後にも使えるかを見る
保存ボタンを押した直後に、もう一度押してみます。二回の操作で同じメモが二件できれば、利用者が待ち時間に押し直しただけで記録が増えてしまいます。一回の保存が終わるまで二回目を受け付けない、保存中であることを示す、といった動作をAIへ依頼し、実際の件数で確かめます。
次に、保存の失敗を練習用の環境で起こします。一人用のブラウザー保存なら、AIに保存処理が失敗する練習用の切替を作ってもらえます。データベースを使う版なら、試験用の接続を止める方法もあります。本番の設定や大切なデータを壊して失敗を作る必要はありません。
期待する結果は、失敗の理由にかかわらず整理できます。入力が残る、保存できなかったことが分かる、やり直す方法が見える、一覧に成功したふりの一件が残らない。この四つを紙へ書きます。通信が復旧したら同じ内容を再送できるかも見ます。自動の再送を加える場合は、重複を防ぐ条件も合わせて決めます。
保存に失敗しても入力からやり直せる
保存の成功と失敗を分け、失敗したときは入力を保持して再試行へ戻ります。成功の表示は、保存の結果を確認してから出します。
- 成功：一覧で確認再読込でも記録が残るか確認します。
- 失敗：入力を保ち再試行原因を確認し、入力を残したままやり直します。
メモ欄へ「<b>練習</b>」という文字列を入れます。この題材では、メモを普通の文字として扱い、HTMLとして実行しません。文字に意味を付けて表示する機能が必要なら、別の仕様と安全な表示方法を検討します。利用者が書いた文章と、画面を組み立てる命令を同じものとして扱わない練習です。
アカウントを加えた版には、もう一組の確認があります。Aさんが作った非公開メモをBさんで開こうとし、未ログインでも同じ要求を試します。Aさんだけが読める約束なら、残り二つは拒否されるべきです。Supabaseの公式資料も、読み取りと書き込みについて許可と拒否を試す手順を示しています。資料 S8
確認を自動にするときは、一件ずつ独立させます。最初のテストで保存したデータが残っていることを、次のテストの条件にしません。Playwrightは、Cookieや保存データ等を独立させるよう勧めています。資料 S12 空の状態を試すつもりなのに、前の記録が残っていて成功する、といった取り違えを減らせます。
うまくいかなかった結果は、入力、期待した結果、実際の結果の順でAIへ渡します。「保存が変です」だけでは、表示、保存、再送のどこを直すのか分かりません。「二回押すと二件できる。期待は一件」と書けば、直した後の確認も同じ操作でできます。原因を決めつける説明より、再現できる情報が役立ちます。
修正後には、失敗した例をもう一度試し、普通の一件も保存します。重複を防ぐ修正で、今度は一回目の保存まで止まることもあります。結果を見終えたら、練習用の失敗切替を外すか、試験だけで使える状態に戻します。利用者が困ったときの動作まで確かめて、この章の確認を終えます。
修正を頼むための再現メモ
練習用の版で、保存ボタンを短い間隔で二回押しました。
期待する結果は、一件だけ登録されることです。
実際は同じ題名の二件が追加されます。
重複を防ぎ、保存中の表示と失敗時の入力保持も確かめてください。
手を動かす順番
- 二回押す操作と、保存の失敗を練習環境で試す
- 入力・期待値・実際の結果を記録する
- 修正後に失敗した例と正常な例を再確認する
演習：読書メモの確認表を作る
実在の利用者のデータを使わず、練習用の題名とメモで確認します。入力、期待する結果、実際の結果の三列に、結果を書いてください。
- 正常な一件を保存し、再読込後にも残ることを確かめる。
- 空欄、題名121字、メモ1001字の結果と、入力が残るかを調べる。
- 二回押しても一件だけ追加されるかを確かめる。
- アカウントを作った版では、別の利用者と未ログインの拒否も調べる。
解答例を読む
成功した一件だけで完成とせず、失敗した場合にも利用者が直せるかを記録します。
一人用の版では、別端末との共有を確認項目に入れません。
想定と違う例を見つけたら、同じ入力と操作で再現できる修正依頼にします。
この回で確かめること
- 正常な一件を保存し、再読込後にも残ることを確かめる。
- 空欄、題名121字、メモ1001字の結果と、入力が残るかを調べる。
- 二回押しても一件だけ追加されるかを確かめる。
- アカウントを作った版では、別の利用者と未ログインの拒否も調べる。