Selenium + Java: How to automate custom file upload/attach field?

Question

I'm trying to automate a custom file upload field with SELENIUM and JAVA on UBUNTU.

Let's take Yahoo mail as an example. The flow to automate would be to compose an email, attach a file to it and then send it.

I tried to look up Autoit, but it wouldn't work with UBUNTU (Linux).

I also tried this,

driver.findElement(By.id("id here")).sendKeys("/full/path/to/the/file.extension");

This also doesn't work as the file attachment field is not an <input type=file> element. It is a custom built element and hence I'm not able to automate the file browser window to select the file from.

Please help me with a solution.

My current code is,

WebDriver driver;
            System.setProperty("webdriver.chrome.driver", System.getProperty("user.dir") + "//chromedriver");
            driver = new ChromeDriver();
            driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

            driver.get("https://mail.yahoo.com");
            driver.manage().window().maximize();
            driver.findElement(By.id("login-username")).sendKeys("[email protected]");
            driver.findElement(By.id("login-signin")).click();
            Thread.sleep(5000);
            driver.findElement(By.id("password")).sendKeys("XXXXXXXX");
            driver.findElement(By.id("btnLogin")).click();
            Thread.sleep(10000);
            driver.findElement(By.linkText("Compose")).click();
            Thread.sleep(2000);
            driver.findElement(By.id("message-to-field")).sendKeys("[email protected]");
            driver.findElement(By.cssSelector("button[data-test-id=btn-cc]")).click();
            driver.findElement(By.id("message-cc-field")).sendKeys("[email protected]");
            driver.findElement(By.cssSelector("input[data-test-id=compose-subject]")).sendKeys("Test Subject");
            driver.findElement(By.xpath("/html/body/div[1]/div/div[1]/div/div[2]/div/div[2]/div[1]/div/div/div[2]/div[1]/div/div[2]/div/div[1]/div/div/div[1]")).click();
            //driver.findElement(By.cssSelector("div[aria-label=Message body]")).click();
            //driver.findElement(By.xpath("//*[@id=\"editor-container\"]/div[1]/div/div/div[1]")).sendKeys("Test Message");
            WebElement message = driver.findElement(By.xpath("/html/body/div[1]/div/div[1]/div/div[2]/div/div[2]/div[1]/div/div/div[2]/div[1]/div/div[2]/div/div[1]/div/div/div[1]"));
            Actions actions = new Actions(driver);
            actions.moveToElement(message);
            actions.click();
            actions.sendKeys("SOME DATA");
            actions.build().perform();
            //driver.findElement(By.cssSelector("div[aria-label=Message body]")).sendKeys("Test Message");
            driver.findElement(By.cssSelector("button[data-test-id=icon-btn-attach]")).click();
            driver.findElement(By.xpath("/html/body/div[1]/div/div[1]/div/div[7]/div/div[1]/div/ul/li[5]/button/span/span")).click();
            //Send button
        driver.findElement(By.cssSelector("button[data-test-id=compose-send-button]")).click();

Answer 1

First upload the file and click inspect , and see if you are able to see the input tag

If you see the input tag then:

you can create the input tag without triggering the click event by using javascript executor:

Eg: if the new element created after uploading the file is :

<form enctype="multipart/form-data" id="form-upload" ><input type="file" name="file" /></form>

Thenkn use below code:

body=driver.find_element_by_tag_name('body');

driver.execute_script("$(arguments[0]).prepend('<form enctype=\"multipart/form-data\" id=\"form-upload\" style=\"display: block;\"><input type=\"file\" name=\"file\" /></form>')", body);

Note:

I have set style=\"display: block;\" to make sure the input element is visible in UI for you make sure this script is valid. Once you are satisfied you can replace the block with 'none' as in your question. This time you cannot see the file after upload.

Answer 2

After trying a lot of things I took help from a friend and he suggested Robot Framework keyboard shortcuts.

Guess what, that did the trick. With keyboard shortcuts I was able to select and attach a file in the Yahoo Mail's custom file upload field.

Here is the sample code,

WebDriver driver;
System.setProperty("webdriver.chrome.driver", System.getProperty("user.dir") + "//chromedriver");
driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
    
driver.get("https://mail.yahoo.com");
driver.manage().window().maximize();
driver.findElement(By.id("login-username")).sendKeys("[email protected]");
driver.findElement(By.id("login-signin")).click();
Thread.sleep(5000);
driver.findElement(By.id("password")).sendKeys("XXXXXXXX");
driver.findElement(By.id("btnLogin")).click();
Thread.sleep(10000);
driver.findElement(By.linkText("Compose")).click();
Thread.sleep(2000);
driver.findElement(By.id("message-to-field")).sendKeys("[email protected]");
driver.findElement(By.cssSelector("button[data-test-id=btn-cc]")).click();
driver.findElement(By.id("message-cc-field")).sendKeys("[email protected]");
driver.findElement(By.cssSelector("input[data-test-id=compose-subject]")).sendKeys("Test Subject");
driver.findElement(By.xpath("/html/body/div[1]/div/div[1]/div/div[2]/div/div[2]/div[1]/div/div/div[2]/div[1]/div/div[2]/div/div[1]/div/div/div[1]")).click();
//driver.findElement(By.cssSelector("div[aria-label=Message body]")).click();
//driver.findElement(By.xpath("//*[@id=\"editor-container\"]/div[1]/div/div/div[1]")).sendKeys("Test Message");
WebElement message = driver.findElement(By.xpath("/html/body/div[1]/div/div[1]/div/div[2]/div/div[2]/div[1]/div/div/div[2]/div[1]/div/div[2]/div/div[1]/div/div/div[1]"));
Actions actions = new Actions(driver);
actions.moveToElement(message);
actions.click();
actions.sendKeys("SOME DATA");
actions.build().perform();

driver.findElement(By.cssSelector("button[data-test-id=icon-btn-attach]")).click();
driver.findElement(By.xpath("/html/body/div[1]/div/div[1]/div/div[7]/div/div[1]/div/ul/li[5]/button/span/span")).click();
        
//Attach file
StringSelection sel = new StringSelection("/home/sub-folder/sub-folder/filename.xlsx");
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(sel,null);
System.out.println("selection" +sel);
Robot robot = new Robot();
Thread.sleep(1000);
robot.delay(3000);
    
System.out.println("Open Goto window");
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_L);
robot.keyRelease(KeyEvent.VK_CONTROL);
robot.keyRelease(KeyEvent.VK_L);
System.out.println("Paste the clipboard value");
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_V);
robot.keyRelease(KeyEvent.VK_CONTROL);
robot.keyRelease(KeyEvent.VK_V);
System.out.println("Press Enter key to close the Goto window and Upload window");
robot.keyPress(KeyEvent.VK_ENTER);
robot.keyRelease(KeyEvent.VK_ENTER);
Thread.sleep(10000);
        
driver.findElement(By.cssSelector("button[data-test-id=compose-send-button]")).click();
System.out.println(" ...Email sent...");