AWSmorishitaです。運用していることはこれまで数本のエントリで紹介してきました。よるE2Eテストがサポートされたという発表が2019年の10月にありました。aws.amazon.comその時から気になっていたのですが、ついに導入したので紹介します。機能と併用するとむちゃくちゃ便利です。テストを追加できます。cypress追加できたら次のコマンドを実行します。ディレクトリが作成され、サンプルコードが生成されます。同時にCypressのテストランナーウィンドウが開きます。初回だと次のようなダイアログが表示されます。サンプルコードを追加したので試してみろって書いてありますね。Cypress初回起動とりあえず、OKボタンをクリックで閉じます。ダイアログが閉じて次のように表示されます。Cypressウィンドウ先程のダイアログのメッセージにあったサンプルのテストコードが表示されていると思います。クリックすると新たにブラウザが開いて、サンプルのテストが実行されます。Cypressテスト実行パタパタと画面が進んでなかなか見ていて楽しいです。うまく動けば、Cypressのインストールは成功です。ディレクトリに追加していきます。ファイルでも実装できますが、特にトランスパイルされて実行されるわけではなく、JSとして解釈され実行されるようです。TSならではの型アノテーション等を実装するとエラーとなります。トランスパイルために次のサイトに紹介されている通りに設定していきます。使うのですが、SPAアプリケーションのプロジェクトに追加するならすでにインストール済みだと思うので足りないものだけインストールします。wp(options));};さて、あとは自分のアプリケーションに合わせてテストを書いていきます。サイトトップにアクセスして、タイトルに特定の文字列(例では「ページタイトル」)が含まれるかを確認するテストは次のとおりです。});});ページを操作するコマンドや、テストに利用するアサーションは多数用意されています。詳しいドキュメントがあるので、それを参考にテストを実装していきます。テスト結果が表示されるようになります。Preview機能を利用していると、プルリクエストを作ると自動的に実行されるので手間いらずです。Consoleテスト結果表示テストフェーズの前のビルドフェーズの実行結果がそのまま残っているので、テストフェーズでは改めてNuxtアプリケーションをビルドしたりする必要はありません。ドキュメントほぼそのままですが、丸数字でコメントしている部分を変更しています。docs.aws.amazon.com以下にそのポイントを説明します。実行環境には日本語フォントがインストールされていません。テスト実行時にテスト実行の様子が自動的にビデオが作成されます。エラーが発生するとその画面のスナップショットが取られます。そのままでは日本語部分に文字が表示されません。それではエラーが起こった際になんだかよくわからず、デバッグに役立ちません。日本語フォントをインストールしておきます。インストールしています。Consoleの実行環境では複数のNode.jsのバージョン管理にnvmを使っているようです。Nodeバージョンを切り替えられます。次の環境変数に利用可能なNode.jsのバージョンが設定されています。指定したほうがいいかと思います。インストールされます。形式で整形したいので、関連モジュールをインストールします。前述したAWSのドキュメントだと、mocha@5.2.0が指定されています。バージョン5系にしか対応していなかったためです。対応しているのでバージョン指定なしでも構わないのですが、この先のアップデートで依存関係が壊れてエラーになっても嫌なのでバージョンを指定しています。Consoleではそれを使って表示が作られます。エラーが発生したときにはもっと見やすい詳細結果がほしいので、HTML形式の結果も出力しています。アーティファクトにも含めておけば、ダウンロードして次のようなファイルで結果が確認できます。Console上てテストフェーズが表示されないことがあります。Console上で反映されます。独自ドメインの設定等をしていると作り直し自体が結構厄介なのですが...。Console上でちゃんと表示されます。ConsoleのE2Eテストについて紹介しました。この機能について紹介しているサイトはいくつかありますが、あまり触れられていない次の項目についても紹介しました。設定しておくとプルリクエスト毎にプレビュー環境を作成する際に、E2Eテストも実行してくれます。GithubのリポジトリにDependabotを設定しておくと、Dependabotが作ったプルリクエストでも同様にE2Eテストを実行してくれます。NPMパッケージのアップデートは結構頻繁に行われるのですが、しっかりE2Eテストを作っておくと自信を持ってマージでき、面倒なライブラリのアップデートがサクサク片付きます。最後にアクトインディではエンジニアを募集しています。07:16Tweet関連記事2020-01-05個人開発アプリをDockerでコンテナ化してみた新米Webエンジニアのhiroさんです。超便利morishitaです。CDKでLambdaをデプロイしてみた。morishitaです。SPAにJestとESLintを実行してみたmorishitaです。Chatbotを触ってみたmorishitaです。(12)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。