つ～じ～です。ゲーマーを名乗っておきながら最近没入できるゲームが無くなってきてて我が感性枯渇のピンチです。何かを楽しむ感性は持ち続けたい（この間のニンテンドーダイレクトはテンション上がった！）。
さて今回は自動テスト『Playwright』の技術記事、自社の自動テストでたまに使うプログラムを簡潔にご紹介します。
自動テスト中にCSVファイルを作成する方法
自動テストを構築する上で課題だったことの一つが「テスト用のCSVファイルの準備が大変」である事。
毎回毎回参照先を指定し、ファイルの中身を手動で書き換え…が、ありていに言えばとても面倒でした。これを自動化できないかと技術を学び、そしてPlaywrightにはCSVを自作する仕組みが存在することを突き止め、実装に成功しました。
※以下に記載したコードは、弊社で利用しているコードを本稿用に大幅アレンジを加えたものです。すべて仮データに置換しており、実在のプロジェクトのデータは使用しておりません。
main.spec.ts
// 検証用のCSVデータの中身を作成
const csv_data = [
['シリアルコード1', '商品名1', '利用開始日1', 'シリアルコード2', '商品名2', '利用開始日2'],
['0001', name1, 2020-01-01, '0002', name2, 2025-09-01],
['0003', name3, 2022-12-10, '0004', name4, 2024-11-01],
['0005', name5, 2030-08-01, '0006', name6, 2026-03-20],
];
// テスト用のCSVを作成
await createCsv(csv_data, '01_sample.csv');common_csv.ts
import fs from 'fs';
import path from 'path';
import Papa from 'papaparse';
// testsフォルダ内のcsvフォルダにCSVファイルを作成する関数
// csv_data：CSV内に記述するデータ（2次元配列データ）、filename：作成するCSVファイル名
export async function createCsv(csv_data: string[][], filename: string) {
// 引数で受け取ったデータをCSV形式に変換（ヘッダーを無効化）
const new_csv = Papa.unparse(csv_data, { header: false });
// 相対パスでcsvフォルダを指定（testsフォルダ内のcsvフォルダに格納する）
const outputPath = path.join(__dirname, 'csv', filename);
// csvフォルダが存在しない場合は作成
if (!fs.existsSync(path.dirname(outputPath))) {
fs.mkdirSync(path.dirname(outputPath), { recursive: true });
}
// ファイルに書き込む
fs.writeFileSync(outputPath, new_csv);
console.log(`【INFO】テスト用の「${filename}」ファイルを作成しました: ${outputPath}`);
}概要説明
- 二次元配列の形式でCSVの内容を構築。出力先のファイルパスを構築。それらを専用の関数に渡してCSVを作成している
- 上記サンプルではCSVの中身は固定値にになっているが、乱数や現在日付や自動テストで取得したWEBサイト上のデータなどをCSVに組み込むことも可能
- 新規でインポートしているモジュールは以下の通り
- import fs from ‘fs’; ：ファイルの読み書き用。フォルダ新規作成やファイル作成などに必要
- import path from ‘path’; ：ファイルパス構築用。出力先のフォルダパスを作るために必要
- import Papa from ‘papaparse’; ：CSV作成用。CSV作成や読み取りに必要な機能が詰まっている
上記のプログラムを導入する事により、以下の達成に成功しました。
- テストの度にCSVを準備する必要がなくなった
- 自動テスト内で画面上のデータ（管理画面のデータなど）を参照し、それをCSVに組み込んでCSVインポートに活用する事が出来た
自動テストのハードルがぐっと下がって、開発チームからもお褒めの言葉を頂けました。
今後も技術開拓に邁進してまいりましょう。今回はこれにて。
