Topic 28: Handle Upload file by Robot/ Sikuli / AutoIT in Selenium

Chào các bạn đã đến với chủ đề tiếp theo của mình. Ở topic trước, mình đã hướng dẫn cách upload file với hàm sendKeys() của Selenium. Hôm nay mình sẽ tiếp tục hướng dẫn các bạn upload file với Robot/ Sikuli và AutoIT .

Bây giờ mình hãy đi vào nội dung chính của topic hôm nay nhé.

1. Upload file với Robot class

Ý tưởng:

• Chuẩn bị file upload, copy path file đó vào clipboard
• Click button Choose File để mở window modal chọn file từ máy tính
• Dán giá trị từ clipboard đó (Ctrl + V)
• Nhấn phím Enter

Vì sao phải sử dụng copy và paste file path ở đây? Bởi vì modal chọn file từ máy tính là của window, chứ không phải của web. Vì thế, Selenium không làm việc được với modal này.

Lưu ý: Cách này chỉ work được cho Window.

Sample code:

@Test
public void TC_01_UploadFileByRobot() throws InterruptedException {
    // Get file path
    String filePath = System.getProperty("user.dir") + "\\DataFile\\uploadFile1.txt";

    // Open browser
    driver.get("https://mdbootstrap.com/docs/standard/forms/file/");
    Thread.sleep(2000);

    // Find web element
    WebElement elementUploadFile = driver.findElement(By.xpath("//input[@id='customFile']/parent::div"));

    //Click để mở form upload
    elementUploadFile.click();
    Thread.sleep(2000);

    // Khởi tạo Robot class
    Robot rb = null;
    try {
        rb = new Robot();
    } catch (AWTException e) {
        e.printStackTrace();
    }

    // Copy File path vào Clipboard
    StringSelection str = new StringSelection(filePath);
    Toolkit.getDefaultToolkit().getSystemClipboard().setContents(str, null);

    // Nhấn Control+V để dán
    rb.keyPress(KeyEvent.VK_CONTROL);
    rb.keyPress(KeyEvent.VK_V);

    // Release action Control V
    rb.keyRelease(KeyEvent.VK_CONTROL);
    rb.keyRelease(KeyEvent.VK_V);
    Thread.sleep(1000);

    // Nhấn Enter
    rb.keyPress(KeyEvent.VK_ENTER);
    rb.keyRelease(KeyEvent.VK_ENTER);
    Thread.sleep(4000);
}

2. Upload file với Sikuli

Để sử dụng được Sikuli, chúng ta phải import library sikulixapi vào file POM.xml

<!-- https://mvnrepository.com/artifact/com.sikulix/sikulixapi -->
<dependency>
    <groupId>com.sikulix</groupId>
    <artifactId>sikulixapi</artifactId>
    <version>2.0.4</version>
</dependency>

Bản thân Sikuli sẽ làm việc với hình ảnh. Vì thế, nếu bạn làm việc ở 2 máy có độ phân giải màn hình khác nhau, thì test case sẽ bị fail.

Tiếp theo, chúng ta sẽ chụp 2 image File Name input textbox và Open button của modal window upload như sau:

Và đặt tên lần lượt là FileOpenInput.PNG và OpenButton.PNG. Sau đó hãy lưu trữ vào folder DataFile

Samle code:

@Test
public void TC_02_UploadFileBySikuli() throws InterruptedException, FindFailed {
    // Get file path
    String filePath = System.getProperty("user.dir") + "\\DataFile\\uploadFile1.txt";

    // Open browser
    driver.get("https://mdbootstrap.com/docs/standard/forms/file/");
    Thread.sleep(2000);

    // Find web element
    WebElement elementUploadFile = driver.findElement(By.xpath("//input[@id='customFile']/parent::div"));

    //Click để mở form upload
    elementUploadFile.click();
    Thread.sleep(2000);

    String inputImage = System.getProperty("user.dir") + "\\DataFile\\FileOpenInput.png";
    String openImage = System.getProperty("user.dir") + "\\DataFile\\OpenButton.png";
    Pattern fileNameInput = new Pattern(inputImage);
    Pattern openButton = new Pattern(openImage);

    Screen screen = new Screen();
    screen.wait(fileNameInput, 20);
    screen.type(fileNameInput, filePath);
    screen.click(openButton);
    Thread.sleep(2000);
}

3. Upload file với AutoIT

Để sử dụng cách này, đầu tiên chúng ta phải cài đặt AutoIT. Nó sơ qua về AutoIT 1 xíu, nó là 1 phần mềm mã nguồn mở, và được sử dụng để thiết kế các script thực hiện automate một số thao tác trên Window GUI. Các script này sẽ mô phỏng việc sử dụng kết hợp của bàn phím, các thao tác di chuyển chuột, điều khiển cửa sổ giao diện theo các thứ tự xử lý được thiết lập trong script.

Bước 1: Tải và cài đặt AutoIT. Link ở đây

Bước 2: Sau khi đã cài đặt xong, open Programs – Autoit tool – SciTE Script Editor, sau đó copy đoạn code dưới và lưu lại vào trong một thư mục nào đó trên máy tính của bạn. Ví dụ: UploadFile.au3

WinWaitActive("Open")
Send($CmdLine[1])
Send("{ENTER}")

Giải thích:

• WinWaitActive(“Open”) : hàm này dùng để chờ Open dialog của window hiện lên. Tùy theo browser mà title của window khác nhau. Ví dụ như Chrome sẽ là Open, còn Firefox sẽ là Upload File

• Send($CmdLine[1]): hàm này sẽ input file path vào ô File name textbox. $CmdLine[1] ở đây là 1 biến được truyền vào từ code của mình. Các bạn có thể input đường dẫn tuyệt đối của file vào đây luôn cũng được nhé.
• Send(“{ENTER}”): click Open button để upload file

Bước 3: Compile đoạn code trên để tạo file UploadFile.exe. File này sẽ nằm cùng chỗ với file UploadFile.au3

Lưu ý: Cách này chỉ work với Window. Vì file exe không work với Mac và Linux nhé

Sample code:

@Test
public void TC_03_UploadFileByAutoIT() throws InterruptedException, IOException {
    String chromeAutoIT = System.getProperty("user.dir") + "\\DataFile\\UploadFile.exe";

    // Get file path
    String filePath = System.getProperty("user.dir") + "\\DataFile\\uploadFile1.txt";

    // Open browser
    driver.get("https://mdbootstrap.com/docs/standard/forms/file/");
    Thread.sleep(2000);

    // Find web element
    WebElement elementUploadFile = driver.findElement(By.xpath("//input[@id='customFile']/parent::div"));

    //Click để mở form upload
    elementUploadFile.click();
    Thread.sleep(2000);

    // Upload file
    Runtime.getRuntime().exec(new String[] {chromeAutoIT, filePath});
    Thread.sleep(5000);
}

4. Lời kết

Như vậy chúng ta đã tìm hiểu qua cách xử lý cho việc upload file trên Selenium với Robot, Sikuli và AutoIT. Cảm ơn các bạn đã theo dõi bài viết của mình.  Chúc các bạn thành công. Hẹn gặp lại các bạn ở những chủ đề tiếp theo.