タグ確認業務をデータ駆動テストで楽にした

はじめに

株式会社LIFULLでQA/SETとして頑張ってます、山下です。

弊社ではとあるタグマネージメントシステムを使用し、ユーザーの行動データを収集しています。

そのタグマネージメントシステムを使用するにあたり、「意図したタグが埋め込めているか」を手動で確認していることで開発チームの工数が多く取られていました。
今回はその確認工数を自動テストで削減できたので、その事を書きます。

自分の調べた範囲ではこういったタグの確認を自動テストで実施している例は見当たらなかったため、悩んでいる方の参考になればと思います。

使用技術

• Playwright
• TypeScript

問題

弊社では以下の問題がありました

• タグが仕様通り埋め込めているか確認する工数が多くかかっている
• 開発フロー的に、機能実装が終わる前にタグの実装を進める場面がある。
  • タグの実装後の機能実装のタイミングで機能のロジックが変わることもあり、タグの実装にも手戻りが発生してしまう。
• タグが問題なく埋め込まれているか？の確認は機能テスト、リグレッションテストを含め頻繁に実施されていた

解決方法

E2Eテストをデータ駆動テストの形で応用し、タグを確認できるようにしました。
具体的には、"ページ : タグ" のデータを用意して配列に入れ、同じシナリオでデータだけ変えて繰り返し実行できるようにしています。

そうすることでタグの確認にかかる工数が大きく削減出来ます！

※ミニマムで進んでいくという意図で、今回実装した範囲はviewイベント(ユーザーが特定のページを開いたときに実施されるイベント)のみです

処理の流れは以下です

1. 配列に以下を格納しておく
   1. タグの確認をしたいページのURL
   2. タグの期待値
2. 配列をループし、それぞれのページでTSを実行しタグを出現させる
   1. タグを出力できるメソッドはされていました
3. タグの実際値と期待値を比較

実装(書き換えてます)

import { test, expect } from '@playwright/test';
import { Util } from './utility/util';

test.describe('View イベントで送信されるタグを確認する', () => {
  test.describe('ページを開いた直後(ユーザ操作なし)に確認する', () => {
    const testCases = [
      { path: '/hoge', tagEvent: 'hoge_view' },
      { path: '/hoge/fuga', tagEvent: 'fuga' },
      { path: '/hoge/hoo', tagEvent: 'hoo' }
      ...
    ];

    type TagData = Record<string, string>;

    testCases.forEach(({ path, tagEvent }) => {
      test(`${path}のページでTagのEvent:${tagEvent}が送信される`, async ({ page }) => {
        await page.goto(path);
        await Util.wait(5000); //waitメソッドは別で定義してます
        await expect(page).toHaveURL(path);
        const data: TagData = await page.evaluate((): TagData => (window).tag);
        expect({ data, url: page.url() }).toMatchTags(tagEvent, 'hoobar'); // toMatchTagTagsは別で定義してます
      });
    });
  });
});

今後の課題

• 「ページAにタグA以外が含まれていないこと」は確認できない。
  • 今回のテストでは「ページAにタグAが含まれていること」の確認はとても楽に出来ますが、例えば「ページAにタグAとタグBが含まれていた場合(要件ではタグBはページAでは不要)」テストは成功してしまいます
  • ソフトウェアテストの7原則の「テストは欠陥があることは示せるが、欠陥がないことは示せない」の事なのかもなと勝手に考えてます

おわりに

他のチームにも横展開して開発者体験を更に向上させて行きたいです