Amplify ConsoleでCypressによるE2Eテストが実行できるようになりました!Vueアプリで試してみた #Amplify #Vue.js #Cypress
Amplify ConsoleがCypressのテストをサポート!
Amplify ConsoleでE2Eテスティングフレームワーク「Cypress」がサポートされました!
CypressはWebアプリ開発のお供として、現在非常によく使われているテスティングフレームワークかと思います。Amplify Consoleでサポートされたことによって、E2Eテストを含めたCI/CD環境がサクッと構築できるようになりました。
早速使ってみました!Cypressを使ってログイン操作のE2Eを試してみます。
試すためのWebアプリを用意する
Amplify自体の説明は省きます。まずは以下のコマンドでVueアプリを作ります。
$ vue create amplify-vue-cypress $ cd amplify-vue-cypress
次にVueアプリにAmplifyをインストールします。
$ yarn add aws-amplify aws-amplify-vue
次にAmplify CLIを使って、Auth機能を追加します(Cognito User Poolsを構築)。
$ yarn global add @aws-amplify/cli $ amplify init $ amplify add auth $ amplify push
main.js
でAmplify Pluginを使うように設定します。
import Vue from 'vue' import App from './App.vue' import Amplify, * as AmplifyModules from 'aws-amplify' import { AmplifyPlugin } from 'aws-amplify-vue' import awsconfig from './aws-exports' Amplify.configure(awsconfig) Vue.config.productionTip = false Vue.use(AmplifyPlugin, AmplifyModules) new Vue({ render: h => h(App) }).$mount('#app')
App.vue
を以下のように書き換え、ログイン画面およびログイン後の画面を表示できるようにします。
<template> <div id="app"> <div v-if="!signedIn"> <amplify-authenticator></amplify-authenticator> </div> <div v-if="signedIn"> <h3>Signed in!</h3> <amplify-sign-out></amplify-sign-out> </div> </div> </template> <script> import { Auth } from 'aws-amplify' import { AmplifyEventBus } from 'aws-amplify-vue' export default { name: 'app', data () { return { signedIn: false }, async beforeCreate() { try { await Auth.currentAuthenticatedUser() this.signedIn = true } catch { this.signedIn = false } AmplifyEventBus.$on('authState', info => { this.signedIn = info === 'signedIn' }); } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
ローカルで起動してみましょう。
$ yarn serve
以下のようなログイン画面が立ち上がり、実際にサインアップ・サインインができるようになります。
Cypressの導入
次にCypressをインストールします。
$ yarn add --dev cypress $ yarn cypress open
以下の画面が表示されればインストール成功です。
次にログインできることをテストする、新しいSpecを作ります。
describe('Authenticator:', function() { // Step 1: setup the application state beforeEach(function() { cy.visit('/'); }); describe('Sign In:', () => { it('allows a user to signin', () => { // Step 2: Take an action (Sign in) cy.get(selectors.usernameInput).type("DUMMY_USERNAME"); cy.get(selectors.signInPasswordInput).type("DUMMY_PASSWORD"); cy.get(selectors.signInSignInButton).contains('Sign In').click(); // Step 3: Make an assertion (Check for sign-out text) cy.get(selectors.signOutButton).contains('Sign Out'); }); }); }); export const selectors = { // Auth component classes usernameInput: '[data-test="username-input"]', signInPasswordInput: '[data-test="sign-in-password-input"]', signInSignInButton: '[data-test="sign-in-sign-in-button"]', signOutButton: '[data-test="sign-out-button"]' }
次に cypress.json
にローカルで起動するURLを設定します。
{ "baseUrl": "http://localhost:8080/" }
再度 yarn cypress open
でCypressを開き、テストを実行してみます。以下のようになればテスト成功です。
Amplify ConsoleでCI/CDする
総仕上げです!
上記のVueプロジェクトをGitHubなどのGitリポジトリ上にプッシュした上で、AWS Management ConsoleのAmplify Consoleを開きます。
新規プロジェクトを作成します。今回はGitHubを選択。
対象のリポジトリ、ブランチを選択します。
アプリ設定です。「Auto-detected framework settings」の「Testing framework」に「Cypress」と表示されていることが確認できます。 つまりAmplify Consoleがソースコードを読み取り、いい感じに自動設定してくれているということです。相変わらず超絶便利です。
なお、Build settingsは以下のように設定されます。Vue CLIで作成している場合は起動コマンドが npm serve
になるため、変更が必要です。
version: 0.1 backend: phases: build: commands: - '# Execute Amplify CLI with the helper script' - amplifyPush --simple frontend: phases: preBuild: commands: - yarn install build: commands: - yarn run build artifacts: baseDirectory: dist files: - '**/*' cache: paths: - node_modules/**/* test: artifacts: baseDirectory: cypress configFilePath: '**/mochawesome.json' files: - '**/*.png' - '**/*.mp4' phases: preTest: commands: - npm install - npm install wait-on - npm install mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator - 'npm serve & npx wait-on http://localhost:8080' test: commands: - 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"' postTest: commands: - npx mochawesome-merge --reportDir cypress/report/mochawesome-report > cypress/report/mochawesome.json
作成を完了すると、数分後にCI/CDが完了します。ビルド結果を確認すると、新たに 「Test」 タブが追加されています。**
テストの動画(mp4ファイル)がダウンロードでき、実際のE2Eテストの様子が動画で確認できます。
以降はリポジトリにPushするだけで、自動実行されます。
E2Eテスト環境までもサクサク作れるように!
Amplify ConsoleとCypressが組み合わさることによって、かなり強力になりました。
WebアプリのホスティングからE2Eテストまでの環境が秒で構築できます。 ぜひお試しください!