Trying to upload file - Error is "element not interactable"

Hi, I cant upload files, all I get is "element not interactable"

I tried all combinations, XPath, Attributres and CSS. Nothing will make the filename appear on the upload field/area
That is a drag/and-drop and also acts as button that can be clicked and browse for files.
I managed to get the Windows popup upload window but it will not navigate/select the files I need

I uploaded a GIF so its clear that the button/menu displaying the uploaded file has drag-and-drop capability and acts as regular button too.

What am I doing wrong here and how can i make this work, even if is just 1 file at a time.

----------------------- Begin web page HTML content

  • Click, or drag images from your computer

    Drop files here to upload
  • ------------------------ Begin test case script
    import static com.kms.katalon.core.testobject.ObjectRepository.findWindowsObject
    import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
    import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
    import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
    import com.kms.katalon.core.model.FailureHandling as FailureHandling
    import com.kms.katalon.core.testcase.TestCase as TestCase
    import com.kms.katalon.core.testdata.TestData as TestData
    import com.kms.katalon.core.testobject.TestObject as TestObject
    import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
    import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
    import com.kms.katalon.core.windows.keyword.WindowsBuiltinKeywords as Windows
    import internal.GlobalVariable as GlobalVariable
    import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
    import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
    import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
    import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
    import com.kms.katalon.core.checkpoint.CheckpointFactory as CheckpointFactory
    import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as MobileBuiltInKeywords
    import com.kms.katalon.core.testcase.TestCaseFactory as TestCaseFactory
    import com.kms.katalon.core.testdata.TestDataFactory as TestDataFactory
    import com.kms.katalon.core.testobject.ObjectRepository as ObjectRepository
    import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WSBuiltInKeywords
    import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUiBuiltInKeywords

    WebUI.uploadFile(findTestObject(‘19_Presentation/p_Click, or drag images from your computer’), ‘C:\Upload\Graphic_10.jpg’)

    ------------------------------- Begin Katalon Studio error log

    =============== ROOT CAUSE =====================
    Caused by: org.openqa.selenium.ElementNotInteractableException: element not interactable
    At object: ‘Object Repository/19_Presentation/p_Click, or drag images from your computer’

    For trouble shooting, please visit: https://docs.katalon.com/katalon-studio/docs/troubleshoot-common-execution-exceptions-web-test.html

    10-15-2020 02:21:56 PM Test Cases/19_Presentation/19_Presentation

    Elapsed time: 2.458s

    Test Cases/19_Presentation/19_Presentation FAILED.
    Reason:
    com.kms.katalon.core.exception.StepFailedException: Unable to upload file ‘C:\Upload\Graphic_10.jpg’ to object ‘Object Repository/19_Presentation/p_Click, or drag images from your computer’
    at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.stepFailed(WebUIKeywordMain.groovy:64)
    at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.runKeyword(WebUIKeywordMain.groovy:26)
    at com.kms.katalon.core.webui.keyword.builtin.UploadFileKeyword.uploadFile(UploadFileKeyword.groovy:87)
    at com.kms.katalon.core.webui.keyword.builtin.UploadFileKeyword.execute(UploadFileKeyword.groovy:68)
    at com.kms.katalon.core.keyword.internal.KeywordExecutor.executeKeywordForPlatform(KeywordExecutor.groovy:73)
    at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.uploadFile(WebUiBuiltInKeywords.groovy:3402)
    at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords$uploadFile.call(Unknown Source)
    at 19_Presentation.run(19_Presentation:29)
    at com.kms.katalon.core.main.ScriptEngine.run(ScriptEngine.java:194)
    at com.kms.katalon.core.main.ScriptEngine.runScriptAsRawText(ScriptEngine.java:119)
    at com.kms.katalon.core.main.RawTestScriptExecutor.runScript(RawTestScriptExecutor.java:34)
    at com.kms.katalon.core.main.RawTestScriptExecutor.doExecute(RawTestScriptExecutor.java:29)
    at com.kms.katalon.core.main.TestCaseExecutor.processExecutionPhase(TestCaseExecutor.java:309)
    at com.kms.katalon.core.main.TestCaseExecutor.accessMainPhase(TestCaseExecutor.java:301)
    at com.kms.katalon.core.main.TestCaseExecutor.execute(TestCaseExecutor.java:235)
    at com.kms.katalon.core.main.TestCaseMain.runTestCaseRawScript(TestCaseMain.java:151)
    at com.kms.katalon.core.main.TestCaseMain$runTestCaseRawScript$0.call(Unknown Source)
    at TempTestCase1602793305783.run(TempTestCase1602793305783.groovy:56)
    Caused by: org.openqa.selenium.ElementNotInteractableException: element not interactable
    (Session info: chrome=85.0.4183.121)
    Build info: version: ‘3.141.59’, revision: ‘e82be7d358’, time: ‘2018-11-14T08:25:53’
    System info: host: ‘ISO-D’, ip: ‘169.254.71.207’, os.name: ‘Windows 10’, os.arch: ‘amd64’, os.version: ‘10.0’, java.version: ‘1.8.0_181’
    Driver info: com.kms.katalon.core.webui.driver.ExistingRemoteWebDriver
    Capabilities {javascriptEnabled: true, platform: ANY, platformName: ANY}
    Session ID: c1e550b22d070b5d7e6c2294c8d618f8
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.createException(W3CHttpResponseCodec.java:187)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:122)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:49)
    at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:158)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:552)
    at com.kms.katalon.core.webui.driver.ExistingRemoteWebDriver.execute(ExistingRemoteWebDriver.java:108)
    at org.openqa.selenium.remote.RemoteWebElement.execute(RemoteWebElement.java:285)
    at org.openqa.selenium.remote.RemoteWebElement.sendKeys(RemoteWebElement.java:106)
    at org.openqa.selenium.support.events.EventFiringWebDriver$EventFiringWebElement.lambda$new$0(EventFiringWebDriver.java:404)
    at com.sun.proxy.$Proxy10.sendKeys(Unknown Source)
    at org.openqa.selenium.support.events.EventFiringWebDriver$EventFiringWebElement.sendKeys(EventFiringWebDriver.java:429)
    at com.kms.katalon.core.webui.keyword.builtin.UploadFileKeyword$_uploadFile_closure1.doCall(UploadFileKeyword.groovy:80)
    at com.kms.katalon.core.webui.keyword.builtin.UploadFileKeyword$_uploadFile_closure1.call(UploadFileKeyword.groovy)
    at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.runKeyword(WebUIKeywordMain.groovy:20)
    … 16 more

    Your test code is probably too fast for the browser. Try this as a little test, BEFORE the line in question:

    WebUI.delay(10)
    

    If that makes it work, you need to find a better way than using a fixed delay. WebUI.waitForElementVisible() perhaps? Or WebUI.waitForElementClickable()

    Hi @Russ_Thomas

    Adding the delay does nothing
    Im running the test from right click "Run from here" - That one specific line Im manually adding a file, which means the element is rendered/generated and as I mentioned before, I can make Katalon studio open the upload window, which means the DOM is visible and element clickable/selectable but thats all.

    Any other approaches to solve this issue ? Thanks.

    Strange. Let’s give these guys a shout…

    @ThanhTo @duyluong @grylion54

    @cat

    Does the page support drag and drop ? From the description of the Test Object it seems to do. In that case, try to use WebUI.uploadFileWithDragAndDrop to see if it helps ?

    @ThanhTo Thanks for the quick answer.

    Almost there, I dont get the errors anymore but I dont get the images showing either, even after refreshing the page.

    The GIF is 19 seconds long

    @cat

    I see in the provided screenshot that one of the images is uploaded ? Can you confirm that, or that’s not it ? To upload multiple images, please try to refer to the section Upload Multiple Files At Once.

    @ThanhTo - Thanks.

    I manually uploaded that, yes, is not through Katalon.
    I will look at that, play a little with the XPath selectors, maybe im not hitting the right area and come back here if I still have problems.

    @ThanhTo

    I tried the example on the page you posted, doesnt work for me.
    For a brief moment I see an “Upload file … no file selected” button and text appearing at the top of the page
    The test passes but the image does not get attached. I tried with multiple images too
    Only red line I see on the log is “2020-10-20 23:59:57.703 WARN c.k.k.core.testobject.ObjectRepository - Test object with id ‘Object Repository/’ does not exist”

    Folder/file does exist for sure.

    What else I can do ? Thanks.

    --------------------- Begin Katalon script

    import static com.kms.katalon.core.testobject.ObjectRepository.findWindowsObject
    import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
    import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
    import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
    import com.kms.katalon.core.model.FailureHandling as FailureHandling
    import com.kms.katalon.core.testcase.TestCase as TestCase
    import com.kms.katalon.core.testdata.TestData as TestData
    import com.kms.katalon.core.testobject.TestObject as TestObject
    import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
    import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
    import com.kms.katalon.core.windows.keyword.WindowsBuiltinKeywords as Windows
    import internal.GlobalVariable as GlobalVariable
    import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
    import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
    import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
    import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
    import com.kms.katalon.core.checkpoint.CheckpointFactory as CheckpointFactory
    import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as MobileBuiltInKeywords
    import com.kms.katalon.core.testcase.TestCaseFactory as TestCaseFactory
    import com.kms.katalon.core.testdata.TestDataFactory as TestDataFactory
    import com.kms.katalon.core.testobject.ObjectRepository as ObjectRepository
    import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WSBuiltInKeywords
    import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUiBuiltInKeywords
    import com.kms.katalon.core.configuration.RunConfiguration as RunConfiguration
    import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
    import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

    def filePath = RunConfiguration.getProjectDir() + ‘/Upload/Graphic_10.jpg’
    def concatenatedFilePath = (filePath)
    WebUI.uploadFileWithDragAndDrop(concatenatedFilePath)
    WebUI.verifyElementPresent(findTestObject(‘Object Repository/19_Presentation/p_Click, or drag images from your computer’), 10)

    --------------------- Begin object locator - p_Click, or drag images from your computer

    //*[@id=“slides”]/li/p

    --------------------- Begin console log

    2020-10-20 23:59:57.151 INFO c.k.k.core.main.RawTestScriptExecutor - --------------------
    2020-10-20 23:59:57.154 INFO c.k.k.core.main.RawTestScriptExecutor - START Test Cases/19_Presentation/19_Presentation
    2020-10-20 23:59:57.501 DEBUG testcase.19_Presentation - 1: filePath = getProjectDir() + “/Upload/”
    2020-10-20 23:59:57.502 DEBUG testcase.19_Presentation - 2: concatenatedFilePath = filePath
    2020-10-20 23:59:57.503 DEBUG testcase.19_Presentation - 3: uploadFileWithDragAndDrop(concatenatedFilePath)
    2020-10-20 23:59:57.703 WARN c.k.k.core.testobject.ObjectRepository - Test object with id ‘Object Repository/’ does not exist
    2020-10-20 23:59:58.630 INFO c.k.k.core.webui.driver.DriverFactory - sessionId = 56b31d7eb11b2f9fa02e6a3a42673622
    2020-10-20 23:59:58.655 INFO c.k.k.core.webui.driver.DriverFactory - browser = Chrome 85.0.4183.121
    2020-10-20 23:59:58.655 INFO c.k.k.core.webui.driver.DriverFactory - platform = Windows 10
    2020-10-20 23:59:58.656 INFO c.k.k.core.webui.driver.DriverFactory - seleniumVersion = 3.141.59
    2020-10-20 23:59:58.658 INFO c.k.k.core.webui.driver.DriverFactory - proxyInformation = ProxyInformation { proxyOption=NO_PROXY, proxyServerType=HTTP, username=, password=********, proxyServerAddress=, proxyServerPort=0, executionList="", isApplyToDesiredCapabilities=true }
    2020-10-20 23:59:58.763 DEBUG testcase.19_Presentation - 4: verifyElementPresent(findTestObject(“Object Repository/19_Presentation/p_Click, or drag images from your computer”), 10)
    2020-10-20 23:59:59.294 INFO c.k.k.core.main.RawTestScriptExecutor - END Test Cases/19_Presentation/19_Presentation

    The error message means that KS cannot find the pathway to an object within the Object Repository. I think it is on the concatenatedFilePath reference. You could try (note the double slashes in the pathway):

    def filePath = RunConfiguration.getProjectDir() + '\\Upload\\Graphic_10.jpg'

    You can display the reference to see what you have by using:

    WebUI.comment("File path is " + filePath)