こんにちは、 @kz_morita です。 今回は、 Karate という BDD (振る舞い駆動) テストフレームワークを使って、テストを行う前に一度だけ行いたい Setup の処理の実現方法をまとめます。 先に結論 karate で １度だけ行いたい Setup 処理を行うには、Background と callonce を組み合わせます。 Feature: Sample Test Background: * start = function() { return karate.start({ mock: 'classpath:mock/api-server-mock.feature', port: 8080 }).port } * def port = callonce start karate とは karate は、BDD が実現できるテストフレームワークになります。 以下のような形式でテストの振る舞いを記述することができます。 Feature: Sample Test Background: * def port = 8080 Scenario: API mock sample Given karate.start({ mock: 'classpath:mock/api-server-mock.feature', port: port }) When url 'http://localhost:' + port And path 'health' When method get Then status 200 上記では、Mock サーバーを立ち上げて、localhost:8080/health へリクエストして、HTTP Status 200 が返ってくることを確認するテストになります。

こんにちは、 @kz_morita です。 今回は、Cypress を用いた E2E テストの DOM の特定方法についてまとめます。 セレクターによる DOM の特定 通常、DOM を特定するのは、ID や Class やHTML要素を指定して行います。 JS では以下のような感じです。 // ID 指定 var dom1 = document.querySelector('#id'); // クラス指定 var dom2 = document.querySelector('.hoge'); // 要素指定 var dom3 = document.querySelector('ul > li'); Cypress でDOM を特定するためにも同じような方法が用いられ、以下のように要素の取得をすることができます。 cy.get("#id") cy.find(".class") しかし、DOM に ID や、class が振られていなくて要素の特定が難しいケースがあります。とくに、CSS in JS などで css 用に class を振っていない場合もあるかと思います。 実際に開発しているサービスでは、emotion というライブラリを用いていて、結果としてDOMの特定が難しいという問題がありました。 また、クラスや要素で DOM を特定する方法は、DOM の構成が変わったりする場合に、E2E テストが変更に弱くなってしまったりします。 テスト用の data 属性をつける Cypress の公式 ドキュメントによると、テスト用の data 属性をつける方法が推奨されています。

こんにちは、 @kz_morita です。 E2E Test を Github Actions で実行する際に，VPN 内にある API Server にアクセスする必要があったのですが，Security Group に Github Actions の Public IP を追加する方法でうまく動かすことが出来たので今回はそのことについてまとめます． 背景とか Web Client 側の E2E テストを実施するにあたり，API Server に接続する必要があったのですが，開発環境の API Server は VPN 内からのみアクセスできるようになっていました． そのため，Github Actions から API Server にアクセスすることが出来ず E2E テストが失敗していました． E2E Test 時のみ アクセスすることができるように，Security Group に Github Actions の Public IP を追加する対応をしました． 実現方法 以下のような yaml で Security Group に Github Actions の Public IPを追加することができました. name:E2E Test with Cypress (Node.

こんにちは、 @kz_morita です。 Cypress を使って現在開発しているプロジェクトに，E2E Test を導入してみたらなかなか良かったので，Cypressの特徴などについてまとめていきます． Cypress とは https://www.cypress.io/ Cypress は JavaScript の E2E テストのフレームワークです． 環境の構築がとても簡単で，テストもシンプルにかけるのが特徴的です． たとえばインストールはこれだけです． $ npm install cypress テストも以下のように比較的にシンプルに書くことが出来ます． describe('Login Test', () => { it('Login', () => { // user データ を取得 cy.fixture('users').then((users) => { // localhost:3000 にアクセス cy.visit('http://localhost:3000') // ヘッダー内のログインボタンをクリック cy.get('header').contains('ログイン').click() // メールアドレスのフォームに，テストデータの メールアドレスを入力 cy.get('#email').type(users.email) // パスワードフォームに，テストデータのパスワードを入力 cy.get('#password').type(users.password) // ログインボタンをクリック cy.get('button[type="submit"]').click() // ヘッダーからログインボタンが消えていることを確認する cy.get('header').should('not.contain', 'ログイン') }) } Test Runner と Dashboard Cypress には Test Runner と Dashboard があります．