Zenn
😎

TestCafeを使ってCSVダウンロードのテストを実装(requestHook requestLogger)

2020/11/08に公開
JavaScript
TypeScript
#
csv
#
e2eテスト
TestCafe
tech

概要

現在TestCafeというテストツールを使用してE２Eテストを書いています。

今回のテストシナリオが

という項目でした。

経験も浅く、テストも書いたことがない僕がこんなテストどうやって実装するねん。

って思いましたが、

同じ様なテストを先輩が実装していたので,なんとかコードを読み解きながら実装しました。

CSVダウンロードができている判定条件として、

以下その手順です。

requestHook requestLogger

どうやって実装するのか？？

TestCafeが提供しているメソッドの、
requestHookとrequestLoggerを使います。

requestLoggerを使用すると、
テスト中に行った、リクエストとレスポンスを記録することができます。

今回だと、こんな感じです。

// csvダウンロードのURLに対し、POSTするリクエスト/レスポンスをログ

const csvDownloadLogger = RequestLogger(
  {
  　//　リクエストが送信される URL。
    "https://aaaaaaaaa/search.csv",
    //　リクエストの HTTP メソッド。
    method: "post",
  },
  {
  //　これを書いておかないとresponseHeaderの情報が取れない。
    logResponseHeaders: true,
  }
);


test.requestHooks(csvDownloadLogger)

RequestLogger は、デフォルトで以下のパラメータを保存してくれます。

  • リクエストの HTTP メソッド。
  • リクエストが送信される URL。
  • レスポンスで受信したステータス コード。
  • リクエストを送信したユーザー 情報

上記の確認方法としては、デベロッパーツールを使います。

  1. 右クリックを押して、検証画面を開きます。
  2. 一番上のElement　NetWork Sourcesなどが選択出来るのでNetworkを選択
  3. Name欄から、指定したリクエストを選択。
  4. Headersという欄にリクエスト情報やレスポンスの情報が入っているので見ていきます。
    (今回のテストで初めて使った。笑)

写真だとこんな感じ。

リクエスト情報やレスポンスの情報がいっぱいでてますね。
RequestLoggerを使用するとテスト上でこの情報を保持してくれます。

以下のようにconsole.logを使うと内容確認できます。

console.log(csvDownloadLogger.requests);
 //[i]は配列番号で、リクエストを送った順番。csvのリクエストを送った順番を記述
console.log(csvDownloadLogger.requests[i].response);

console.logの中身↓

 {
  id: 'LXuUFQAsE',
  testRunId: 'PvgCainLs',
  userAgent: 'Chrome 86.0.4240.111 / macOS 10.15.7',
  request: {
    timestamp: 1603503688185,
    url: 'https://aaaaaaaaa/search.csv',
    method: 'post'
  },
  response: {
    statusCode: 200,
    timestamp: 1603503698406,
    headers: {
      date: 'Sat, 24 Oct 2020 01:41:38 GMT',
      'content-type': 'text/csv',
      'transfer-encoding': 'chunked',
      connection: 'keep-alive',
      server: 'nginx/1.18.0',
      'access-control-allow-origin': '*',
      'access-control-allow-methods': 'GET, POST, PATCH, OPTIONS, DELETE,

たくさんの情報がありますが今回テストに絡んでくるのは

url、post,content-type

この部分です。

実際のコード

実際に書いたコードがこちら。

const csvDownloadLogger = RequestLogger(
  {
  　//　リクエストが送信される URL。
    "https://aaaaaaaaa/search.csv",
    //　リクエストの HTTP メソッド。
    method: "post",
  },
  {
  //　これを書いておかないとresponseHeaderの情報が取れない。
    logResponseHeaders: true,
  }
);

test.requestHooks(csvDownloadLogger)(
  "20.CSVダウンロードできる。）",
  async (t) => {
  
  // CSVダウンロードボタン(送信)
const csvDownloadButton = Selector("#csvDownload")
 
 //CSVダウンロードボタンをクリック
    await t
      .click(csvDownloadButton)

    // レスポンスのヘッダーに、content-type: text/csvが含まれることを確認
    await t
      .expect(
        csvDownloadLogger.contains(
          (record) => record.response.headers["content-type"] === "text/csv"
        )
      )
      .ok();
  }
);

解説はコメント通りです。
きちんとレスポンスでcontent-type がtext/csvになっていればテストが通過します。

まとめ

自分だけでは絶対にテストを書けなかったと思います。
実務は先輩の考えやコードの書き方を学べるので、学習効率がやばいです。笑

今回のテストだけでも、テスト判定条件、デベロッパーツールの使い方、
requestHook, requestLoggerの使い方など勉強になりました。

この調子で武器を増やして頑張ります！！！！笑

Discussion