《手把手教你》系列技巧篇（五十三）-java+ selenium自動化測試-上傳文件-上篇（詳細教程）

2022 年 1 月 4 日
筆記
java+selenium自動化測試

1.簡介

　　在實際工作中，我們進行web自動化的時候，文件上傳是很常見的操作，例如上傳用戶頭像，上傳身份證資訊等。所以宏哥打算按上傳文件的分類對其進行一下講解和分享。

2.為什麼selenium沒有提供API？

想必小夥伴們或者童鞋們一定很好奇，既然上傳文件在自動化這麼常見而且經常用到，那麼為什麼Selenium的webdriver為什麼不提供方法（API），宏哥這裡解釋一下原因：因為上傳文件需要打開window窗口，webdriver是無法對window的控制項操作的，換句話說就是：selenium無法識別非web的控制項，上傳文件窗口為系統自帶，無法識別窗口元素。所以沒有提供方法，需要我們換個思路去上傳文件。

3.上傳文件分類

首先，我們要區分出上傳按鈕的種類，大體上可以分為兩種，一種是input框，另外一種就比較複雜，通過js、flash等實現，標籤非input。

上傳文件有兩種場景：input控制上傳和非input控制項上傳。大多數情況都是input控制項上傳文件，只有非常少數的使用自定義的非input上傳文件。今天宏哥這一篇文章就用來介紹input控制項上傳文件。

4.input控制項上傳文件

查看上傳文件的頁面元素標籤，如果為input表明是通過input控制項上傳文件。我們可以直接採用直接使用sendKeys()方法上傳文件，這個比較簡單。

示例程式碼：

driver.findElement(By.id("attachment")).sendKeys("D:\\test.txt");

5.項目實戰

宏哥找了好久沒有找到，宏哥就參照網上的input上傳修改給一個小demo，進行自動化測試給大家演示一下，主要是知道思路和測試流程就行，其他的也是一樣的，無非是需要你登錄後，然後再上傳文件。

思路

1.定位到選擇文件的輸入框

2.找到這個輸入框元素後使用sendKeys()的方法將你所需上傳文件的絕對路徑名輸入進去，就達到了選擇文件的目的。

5.1demo頁面的HTML程式碼

1.html程式碼：upload_file.html。如下：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>upload_file</title>        
        <script type="text/javascript" async="" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
        <style type="text/css">
            #result{
                width: 1000px;
                height:300px;
                border:1px solid #eee;
            }
            #result img{
                width: 200px;
            }
            input{
                width: 70px;
                margin-top: 10px;
            }
            @-moz-document url-prefix() { input { width:65px; } }/*單獨對火狐進行設置*/
        </style>
        <script type="text/javascript">
    
            var form = new FormData();//通過HTML表單創建FormData對象
            var url = '127.0.0.1:8080/'
            function selectFile(){
                var files = document.getElementById('pic').files;
                console.log(files[0]);
                if(files.length == 0){
                    return;
                }
                var file = files[0];
                //把上傳的圖片顯示出來
                var reader = new FileReader();
                // 將文件以Data URL形式進行讀入頁面
                console.log(reader);
                reader.readAsBinaryString(file);
                reader.onload = function(f){
                    var result = document.getElementById("result");
                    var src = "data:" + file.type + ";base64," + window.btoa(this.result);
                    result.innerHTML = '<img src ="'+src+'"/>';
                }
                console.log('file',file);
                ///////////////////
                form.append('file',file);
                console.log(form.get('file'));
            }
          </script>
    </head> 
    <body>
      <div class="row-fluid">
        <div class="span6 well">        
          <h3>upload_file</h3>
          <div id = "result"></div>
          <input id="pic" type="file" name = 'pic' accept = "image/*" onchange = "selectFile()" />
        </div>        
      </div>        
    </body>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</html>

5.2程式碼設計

5.3參考程式碼

package lessons;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author 北京-宏哥
 * 
 * @公眾號:北京宏哥
 * 
 * 《手把手教你》系列技巧篇（五十三）-java+ selenium自動化測試-上傳-上篇（詳細教程）
 *
 * 2021年12月10日
 */
public class Upload {

    public static void main(String[] args) throws InterruptedException {
        
        System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe");
        
        WebDriver driver = new ChromeDriver();
        
        driver.manage().window().maximize();  
        
        driver.get("file:///C:/Users/DELL/Desktop/test/upload_file.html");
        Thread.sleep(1000);
            
        driver.findElement(By.cssSelector("input[type=file]")).sendKeys("C:/Users/DELL/Desktop/test/五星紅旗.png");
            
        Thread.sleep(1000);
        System.out.println("browser will be close");
        driver.quit();    
    }

}

5.4運行程式碼

1.運行程式碼，右鍵Run AS->Java Appliance，控制台輸出，如下圖所示：

2.運行程式碼後電腦端的瀏覽器的動作，如下小影片所示：

6.小結

好了，今天時間也不是很早了，宏哥今天就講解和分享到這裡，感謝您耐心的閱讀，下一篇講解非input控制項是如何上傳文件的。

Tags: java+selenium自動化測試