Cypressでtd-js-sdkのテストをする

Tagのテストをしたい

td-js-sdkをWeb Siteに設置したはいいけどテストが手動だったり、そもそもテストをしていなくてしばらく経ってから想定通りに動作してないことが発覚して修正に手間取ったりとかがわりと起こりがちである。

Cypressを使ってこういう自体を防ぐ手法を案内したい。

Cypressとは

CypressはJavaScriptのE2Eテストフレームワークである。

npmで簡単にインストールもできるし、テストの内容も簡単にかける。

詳細については公式のページをみてほしい。

www.cypress.io

環境構築

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のアプリケーションが起動される。

f:id:mickeeey:20220116222221j:plain

Runを押して、テストを実行しよう。

すると自動的にブラウザが起動してテストが開始される。 またそのテストの様子は同ディレクトリにmp4ファイルとしても生成され、テスト結果の確認にも使える。

f:id:mickeeey:20220116222415j:plain

終わりに

cypressを使うことでこれまでテストとして組み込みにくいタグのテストを自動化できることがわかった。積極的に布教して行って、正しく実装されたtd-js-sdkの使用が広まることを願っている。