---
title: "ファイルアップロードのトラブルシューティング | Autify Guide"
slug: "i-cannot-upload-files-properly"
description: "テスト中にファイルのアップロードができない場合の解決方法を学びましょう。"
tags: ["ファイル検証"]
updated: 2024-04-04T07:50:58Z
published: 2024-04-04T07:50:58Z
canonical: "help.autify.com/i-cannot-upload-files-properly"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.autify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ファイルアップロード操作がレコーディングできない・テスト実行に失敗する

## 前提条件

ファイルアップロード操作をレコーディングし、テストを実行するためには、type属性にfileがセットされたinput要素が、DOMツリー内に存在している必要があります。なお、DOMツリーに存在していれば、スタイルの設定で不可視にしていても問題ありません。

## 原因

ファイルのアップロード操作をしても、「ファイルを指定する」ステップがレコーディングされない、あるいはレコーディングできてもテスト実行が失敗してしまう場合、以下の原因が考えられます。

### 「ファイルを指定する」ステップがレコーディングされない

#### input要素が画面のDOMツリーに追加されていない

前提条件でも説明した通り、ファイルアップロード操作をレコーディングし、テストを実行するためには、type属性にfileがセットされたinput要素が、DOMツリー内に存在している必要があります。

#### 実験的な機能の`window.showOpenFilePicker()`を使用している

Autifyは、この機能を使用したファイルアップロード操作のレコーディングをサポートしていません。しかし、以下のJSをデベロッパーツールのコンソールで実行してから、ファイルアップロード操作をレコーディングすると「ファイルを指定する」ステップをレコーディングできます。

```
window.showOpenFilePicker = () => {
  return Promise.reject(new DOMException("", "SecurityError"))
}
```

          [react-dropzone](https://react-dropzone.js.org/)を使用している場合

          

react-dropzoneを使用している場合は、[useFsAccessApi](https://react-dropzone.js.org/#:~:text=current%20browser%20window-,useFsAccessApi,-bool)をfalseに設定することで、この機能を無効化できます。

#### 間接的にinput要素をトリガーしている

button要素など、input要素以外の要素のクリックを契機に、input要素をトリガーするような実装となっている場合、Autifyがファイルアップロードイベントを検出できず、「ファイルを指定する」ステップがレコーディングされない場合があります。

この場合、以下の方法で「ファイルを指定する」ステップのレコーディングが可能です。

1. デベロッパーツールのコンソールから、JSを使用して対象となるinput要素をクリックする。
2. ファイル選択画面が表示されるので、対象のファイルを選択する。

### レコーディングはできるがテスト実行に失敗する

テスト対象アプリケーションのアップデートにより、 input要素の位置や特徴などが変化したことで、テスト実行時に一致する要素が見つからなくなりテストが失敗した可能性があります。

この場合、再レコーディングや[クイック要素更新](/docs/ja/quick-element-update)で改善する場合があります。

### レコーディングやテスト実行が不安定

input要素が動的に生成されたり、ファイルアップロードの操作中のみDOMツリーに追加されるなど、特定のタイミングでないと発見することができない場合、レコーディングやテスト実行が不安定になります。

input要素が生成・追加されるために必要なイベント、例えば「[ファイルをアップロードする]ボタンをクリックする」などの操作を追加でレコーディングすることで、改善する場合があります。

## 参考記事

- [ファイルアップロード](/docs/ja/can-i-test-file-upload)
- [Autify JavaScript Snippets - 要素をクリックする](https://javascript-snippets.autify.com/ja/snippets/mouse/click/)
- [<input type="file"> についての説明](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/file)（MDN Web Docs に移動します）
- [DOM の紹介](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction)（MDN Web Docs に移動します）
- [Window: showOpenFilePicker() method](https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker)（MDN Web Docs に移動します）

上記にて問題が解決しない場合は、Autifyのチャットからご相談ください。