CypressでE2Eテストを自動化（５）laracasts/cypressでLaravelプロジェクトをテスト
ここまで４回の投稿でCypressテストの設定・テストコードなどをご紹介してきました。５回目の今回は、laracasts/cypressというLaravelでCypressを使用するために作成されたパッケージをご紹介します。Laravel10.xのプロジェクトにインストールして使ってみました。
CypressでE2Eテストを自動化（４）パスワードリセットのテスト
今回はパスワードリセットのテストです。リセットリンクをクリックしてメールアドレスを入力、MailHogに届いたメールの確認、パスワードリセット実行、という一連のユーザーの操作をCypress13.xで実装します。
CypressでE2Eテストを自動化（３）ログイン・ログアウト
前回のCypressでの画面表示テストに続き、今回はログイン・ログアウトのテストです。カスタムコマンドの作り方やHTTPリクエストの実行など、Cypressのテストに欠かせないアプローチが出てきますので参考になれば嬉しいです。
CypressでE2Eテストを自動化（２）画面表示のテスト
テスト自動化ツールCypressのセットアップに続いて、今回は画面表示のテストです。Cypressでの画面遷移や要素の取得、アサーションなど基本的な書き方をご紹介します。
CypressでE2Eテストを自動化（１）セットアップ
Webアプリの動作確認時、ブラウザをポチポチ手動でテストをするのも良いですが、可能な限り自動化すればテストに割く時間や手間を大きく削減できます。 テスト自動化ツールは色々なタイプがありますが、導入がシンプル・JavaScrirptベースなCypressを試してみました。
Turbolinks、POST成功後のリダイレクト
前回のTurbolinks、再びにおいて掲載した記事に、修正が必要なことに気づきました。登録フォームのPOSTでバリデーションエラーが出て同画面に戻るときは問題ないのですが、エラーがなく登録完了してホーム画面へリダイレクトされたときが問題です。
気になるフロントエンドの技術
私が注目している技術に関してリストしてみます。もちろん、Laravel関連なのですが、フロントエンドやバックエンド含めて、いやいや、本当にいいものが登場してきています。将来時間を見つけてじっくりと紹介したいものばかりです。
Turbolinks、再び
ほぼ２年前にTurbolinksを紹介しました。全ページロードのウェブサイトを高速のSPA(シングルページアプリ)に変えてくれます。しかも、Laravelのフロントエンドのブレードやバックエンドのコントローラーをまったく変えることなしです。今回は、再びこのTurbolinksに戻って、まずcdnを使わずにnpmを使用してトランスパイルします。そして前回不可能と思っていたajaxによるフォームのPOST投稿もSPA化します。
Vue.js：バックエンドのバリデーションを使う
最近、フロントエンドのフレームワークのVue.jsを勉強し始めました。またしても世間の流行から一歩遅れての開始ですが、比較的大きなプロジェクトを管理する私としては、ピッカピッカの流行りをすぐに採用とは行きません。長期的な管理を考えてLaravelのように本当にメージャーになるかを見極めてからです。幸い、Laravelのコミュニティでは、Vue.jsが盛んに利用され情報が多いので、よりメージャーなReactやAngularなどのフレームワークの存在を気にしつつもLaravelとの親近さでVue.jsの習得です。Vue.jsの1からの説明は他の人のブログに任せて、私の方はいきなり実用的なVue.jsを紹介していく予定です。まず今回は、Vue.jsをフォームの入力のバリデーションに使用するところを紹介します。
npmからパッケージを追加
laravel-mixでフロントエンドを開発で、Laravelのプロジェクトにおいてのフロントエンドの開発の流れを説明しました。今回は、その続きとしてnpmから新規のパッケージをプロジェクトに追加する過程を説明します。