Page Object Modelでフロントエンドのテストを書いてみる

Playwrightのドキュメントを眺めているとPage Object Modelという実装パターンがあり、これが便利そうだと思ったので愚直に実装したパターンとじっくり見比べてみたいと思いました。 私の環境 Node 18.5.x M1 Mac @playwright/test 1.25.1 テスト対象のアプリ 今回はfrourioを使ってサンプルアプリを用意しました。 frourioにはcreate-frourio-appという雛形を作成するコマンドが用意されており、これを叩くだけでTODOアプリが作成されます。 バックエンドもフロントエンドも用意してくれます。 今回は全てデフォルト設定で作成しました。 しばらくしてからlocalhost:8000にアクセスすると以下のようなTODOアプリが表示されます。 画面中央にあるテキストボックスに入力後、ADDボタンを押すことでデータが追加されま