Cypressでtd-js-sdkのテストをする
Tagのテストをしたい
td-js-sdkをWeb Siteに設置したはいいけどテストが手動だったり、そもそもテストをしていなくてしばらく経ってから想定通りに動作してないことが発覚して修正に手間取ったりとかがわりと起こりがちである。
Cypressを使ってこういう自体を防ぐ手法を案内したい。
Cypressとは
CypressはJavaScriptのE2Eテストフレームワークである。
npmで簡単にインストールもできるし、テストの内容も簡単にかける。
詳細については公式のページをみてほしい。
環境構築
npmでcypressをインストール
npm install cypress
testディレクトリを作成
mkdir td-sdk-cypress && cd $_
ディレクトリを作成
npx cypress open
testは上のコマンドで生成されたcypress/integration
に書いていく。
テストコード
it('td-sdkが読み込まれていること', () => { cy.visit('/'); cy.get('head script[src*="td.min"]') }); it('td-client-idが生成されていること', () => { cy.visit('/'); cy.getCookie('_td') .should('exist') }); it('td-global-idが生成されていること', () => { cy.visit('/') cy.getCookie('_td_global_id') });
cypress.jsonにbashUrlを設定しておくとテストコードを設定しておくといちいちURLを記述せずにパスだけを指定するだけで良くなる。今回はそれにしたがっている。
{ "baseUrl": "https://www.treasuredata.co.jp" }
テスト実行
npx cypress open
上記を実行すると自動的にcypressのアプリケーションが起動される。
Runを押して、テストを実行しよう。
すると自動的にブラウザが起動してテストが開始される。 またそのテストの様子は同ディレクトリにmp4ファイルとしても生成され、テスト結果の確認にも使える。
終わりに
cypressを使うことでこれまでテストとして組み込みにくいタグのテストを自動化できることがわかった。積極的に布教して行って、正しく実装されたtd-js-sdkの使用が広まることを願っている。