[サンプル] 05. ファイルをWebページにアップロードしてみよう

Excelでデータを用意してCSV形式に変換し、Webページにアップロードするサンプルです。ファイル生成からアップロードまでを一連の流れで自動化します。

対象ページ: https://training.coopel.ai/file-upload.html
アップロードファイル: Excel → CSV変換したファイル

シナリオ全体像

Important
このサンプルシナリオでは、アップロードする CSV ファイルをアクション(4) までで作成していますが、
Google Drive、Microsoft OneDrive、ローカルディレクトリ、Webサイトからダウンロードしたファイルなど、
既存のファイルを特定の web サイトにアップロードすることも可能です。

アクション構成

【アップロードするファイルを作成】
(1) ファイルの新規作成（Excel）
(2) シートをシート名で指定
(3) セルにペースト（データ書き込み）
(4) CSV形式でファイルを保存

【特定サイトにアクセスしてファイルをアップロード】
(5) URLにアクセス
(6) ファイルをアップロード
(7) クリック

アクション詳細

【前半】アップロードするファイルを作成

(1) ファイルの新規作成

アップロードするファイルを作成するため、
ファイルの新規作成アクションを使用して Excel ファイルを新規に作成します。

属性	設定値
ファイル名	（空欄 → メモリ上に作成）
シート名	Sheet1

(2) シートをシート名で指定

Excel ファイル内のどの名前のシートを使用するかを指定します。

属性	設定値
対象ファイル	アクション(1)のファイル
シート名	Sheet1

(3) セルにペースト

Excel ファイルの特定シートにデータを貼り付けます。

属性	設定値
対象シート	アクション(2)のシート
入力値	"鈴木さん", "埼玉県", 123 "田中さん", "東京都", 456 "斎藤さん", "神奈川県", 789
書き込み対象のセル	A1

4. CSV形式でファイルを保存

Excel ファイルを csv ファイルとして保存します。
特に保存先のパスを指定しない場合、Coopel のサーバー上に保存されます。

属性	設定値
対象シート	アクション(2)のシート
ファイル名	（空欄 → Coopelサーバー上の一時ファイルとして保存）

Tips
保存先パスを指定しない場合、Coopelサーバー上の一時ファイルになります。後続のアクションから参照して利用します。

【後半】サイトにアクセスしてファイルをアップロード

5. URLにアクセス

新規ブラウザを起動して指定URLを開きます。セッション情報（Cookie等）を持たないクリーンな状態でアクセスします。
ファイルをアップロードするためのページにアクセスします。
このサンプルでは、トレーニングサイトのファイルアップロードページ https://training.coopel.ai/file-upload.html にアクセスしています。

属性	設定値
URL	https://training.coopel.ai/file-upload.html

6. ファイルをアップロード

アクション(5) でアクセスしたページ内のファイル選択要素を指定してファイルをアップロードします。

ファイルをアップロード

属性	設定値
ブラウザ	アクション(5)のブラウザ
ファイル名	アクション(4)のCSVファイル
要素（ファイル選択欄）	.file-upload-area > input

Tips
要素の特定には Coopel Selector Helper（Chrome拡張）を使うと、ページ上の要素の指定を比較的容易に行うことができます。

7. クリック

アクション(5) でアクセスしたページ内の送信ボタンをクリックしてファイルアップロードを完了します。

クリック

属性	設定値
ブラウザ	アクション⑤のブラウザ
要素	.submit-button

カスタマイズのヒント

やりたいこと	対応方法
既存のExcelファイルをアップロードしたい	アクション(1)〜(4)をスキップし、「ファイルを開く」で対象ファイルを指定
ローカルのCSVファイルをアップロードしたい	アクション(6)の「参照先がローカルPC上にある」をオンにする
文字コードをUTF-8にしたい	アクション(4)の「文字コード」をUTF-8に変更