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

[cat]

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

[Russ_Thomas]

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() …

[WebUI] Wait For Element Visible

[WebUI] Wait For Element Clickable

[cat]

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.

[Russ_Thomas]

Strange. Let’s give these guys a shout…

@ThanhTo @duyluong @grylion54

[ThanhTo]

@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 ?

[WebUI] Upload File by Drag-and-Drop

[cat]

@ThanhTo

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

[ThanhTo]

@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.

[WebUI] Upload File by Drag-and-Drop

[cat]

@ThanhTo

Can you confirm that, or that’s not it ?

@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.

[cat]

@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

[grylion54]

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)