Element is clickable but not interactable

[pac.chen]

Hi there,
Issue 1:
I keep getting element not interactable while the shopping cart is not empty.
However, the element is interactable when the shopping cart is empty.

error code enclosed below:
05-24-2019 11:30:01 AM Test Cases/Registered account checkout by CC

Elapsed time: 19.349s

Test Cases/Registered account checkout by CC FAILED.

Reason:

com.kms.katalon.core.exception.StepFailedException: Unable to click on object ‘Object Repository/Page_WMH AU Tier 2 - Milly Dent Well Made Clothes/a_Checkout’

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.ClickKeyword.click(ClickKeyword.groovy:86)

at com.kms.katalon.core.webui.keyword.builtin.ClickKeyword.execute(ClickKeyword.groovy:67)

at com.kms.katalon.core.keyword.internal.KeywordExecutor.executeKeywordForPlatform(KeywordExecutor.groovy:56)

at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.click(WebUiBuiltInKeywords.groovy:616)

at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords$click$2.call(Unknown Source)

at Registered account checkout by CC.run(Registered account checkout by CC:70)

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.TestCaseExecutor.runScript(TestCaseExecutor.java:337)

at com.kms.katalon.core.main.TestCaseExecutor.doExecute(TestCaseExecutor.java:328)

at com.kms.katalon.core.main.TestCaseExecutor.processExecutionPhase(TestCaseExecutor.java:307)

at com.kms.katalon.core.main.TestCaseExecutor.accessMainPhase(TestCaseExecutor.java:299)

at com.kms.katalon.core.main.TestCaseExecutor.execute(TestCaseExecutor.java:233)

at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:114)

at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:105)

at com.kms.katalon.core.main.TestCaseMain$runTestCase$0.call(Unknown Source)

at TempTestCase1558654198422.run(TempTestCase1558654198422.groovy:21)

Caused by: org.openqa.selenium.ElementNotVisibleException: element not interactable

(Session info: chrome=74.0.3729.169)

(Driver info: chromedriver=74.0.3729.6 (255758eccf3d244491b8a1317aa76e1ce10d57e9-refs/branch-heads/3729@{#29}),platform=Mac OS X 10.14.5 x86_64) (WARNING: The server did not provide any stacktrace information)

Command duration or timeout: 0 milliseconds

Build info: version: ‘3.7.1’, revision: ‘8a0099a’, time: ‘2017-11-06T21:07:36.161Z’

System info: host: ‘PACMAN.local’, ip: ‘fd64:6d6c:c020:3700:2144:b94d:5437:a9aa%en0’, os.name: ‘Mac OS X’, os.arch: ‘x86_64’, os.version: ‘10.14.5’, java.version: ‘1.8.0_181’

Driver info: com.kms.katalon.selenium.driver.CChromeDriver

Capabilities {acceptInsecureCerts: false, acceptSslCerts: false, applicationCacheEnabled: false, browserConnectionEnabled: false, browserName: chrome, chrome: {chromedriverVersion: 74.0.3729.6 (255758eccf3d24…, userDataDir: /var/folders/2n/nkzkj1js16q…}, cssSelectorsEnabled: true, databaseEnabled: false, goog:chromeOptions: {debuggerAddress: localhost:55366}, handlesAlerts: true, hasTouchScreen: false, javascriptEnabled: true, locationContextEnabled: true, mobileEmulationEnabled: false, nativeEvents: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: MAC, platformName: MAC, proxy: Proxy(direct), rotatable: false, setWindowRect: true, strictFileInteractability: false, takesHeapSnapshot: true, takesScreenshot: true, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unexpectedAlertBehaviour: ignore, unhandledPromptBehavior: ignore, version: 74.0.3729.169, webStorageEnabled: true}

Session ID: 59291d3a959d88f2535fa7b3ca46cb3c

at org.openqa.selenium.remote.ErrorHandler.createThrowable(ErrorHandler.java:214)

at org.openqa.selenium.remote.ErrorHandler.throwIfResponseFailed(ErrorHandler.java:166)

at org.openqa.selenium.remote.http.JsonHttpResponseCodec.reconstructValue(JsonHttpResponseCodec.java:40)

at org.openqa.selenium.remote.http.AbstractHttpResponseCodec.decode(AbstractHttpResponseCodec.java:80)

at org.openqa.selenium.remote.http.AbstractHttpResponseCodec.decode(AbstractHttpResponseCodec.java:44)

at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:164)

at org.openqa.selenium.remote.service.DriverCommandExecutor.execute(DriverCommandExecutor.java:83)

at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:600)

at com.kms.katalon.selenium.driver.CChromeDriver.execute(CChromeDriver.java:20)

at org.openqa.selenium.remote.RemoteWebElement.execute(RemoteWebElement.java:279)

at org.openqa.selenium.remote.RemoteWebElement.click(RemoteWebElement.java:83)

at com.kms.katalon.core.webui.keyword.builtin.ClickKeyword$_click_closure1.doCall(ClickKeyword.groovy:79)

at com.kms.katalon.core.webui.keyword.builtin.ClickKeyword$_click_closure1.call(ClickKeyword.groovy)

at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.runKeyword(WebUIKeywordMain.groovy:20)

… 17 more

Issue 2:
the button is clickable but does not process the order and then the page is supposed to direct to the success page.

test is passed but the actual result is not as expected.

need help. thanks!!

[ThanhTo]

Hi @pac.chen

1st issue: Can you share your script ? In the mean time, try to use some wait conditions through Katalon built-in keywords such as WaitUntilElementPresent or similar waits. The gist here is that you should wait until the element becomes interactable.

2nd issue: If you click manually (on your normal browser and not through recorder) then does the processing happens ? If so then please share us the precise steps to reproduce this problem.

Cheers !

[Brandon_Hein]

It would also be nice to see a screenshot of the element you are trying to interact with, as well as the HTML for the element.

[pac.chen]

When user clicks the label ccredit crad it is supposed to open up the form to fill. The step on katalon is passed but the actual result is failed.

[Russ_Thomas]

Please, pay attention to what @Brandon_Hein is asking you:

… as well as the HTML for the element.

Right-click on the E-WAY element (the circle or the label) and choose “Inspect” from the context menu. Take a screen shot of the dev tools Inspector showing as much of the surrounding HTML as possible and post it here.

For future reference, please read this article - it will save you and us a lot of time.

[TIP] My test is BROKEN! NOTHING WORKS! PLEASE HELP ME!

Yes, there are some pretty smart people on this forum. But even so, they/we are not magicians or wizards or gods. We can’t see your code. We can’t see your errors… Remember: We don’t even know what your application is meant to do even though it might seem perfectly obvious to you. So relax. Follow the advice below and take the time to gather the information we need, before you start writing your post. Here are some things you can do to help us help you… 1 - We need to see what you are d…

[pac.chen]

Hi there,
I have tried either using the Click or Javascript to interact with E-WAY element. I also have tried to add some wait function but it still does not work. And yes, manually click on normal browser is working fine. Here is the keyword I create:

@Keyword
def clickJS(TestObject to, int timeout){
WebElement element = WebUiCommonHelper.findWebElement(to, timeout)
WebUI.executeJavaScript(‘arguments[0].click()’, Arrays.asList(element))
}

Surrounding HTML:

Object property:

My script:
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.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 internal.GlobalVariable as GlobalVariable
import com.kms.katalon.core.webui.common.WebUiCommonHelper as WebUiCommonHelper
import org.openqa.selenium.WebElement as WebElement

‘Open the browser’
WebUI.openBrowser(GlobalVariable.homePage)

‘Maximize the browser’
WebUI.maximizeWindow()

‘Wait for overlapped page is visible’
WebUI.waitForElementVisible(findTestObject(‘Page_Home Well Made Clothes/div_Close Let me explore’), 10)

‘Click to close overlapping page’
WebUI.click(findTestObject(‘Page_Home Well Made Clothes/div_Close Let me explore’))

‘Click shop store’
WebUI.click(findTestObject(‘Page_Home Well Made Clothes/a_Shop’))

‘Wait for page to be visible’
WebUI.waitForElementVisible(findTestObject(‘Page_Home Well Made Clothes/a_All Accessories’), 5)

‘Click all accessories page button’
WebUI.click(findTestObject(‘Page_Home Well Made Clothes/a_All Accessories’))

‘Wait for picture to present’
WebUI.waitForElementPresent(findTestObject(‘Page_Accessories Well Made Clothes/img_AUD 2500_product-collection-image-50077’),
5)

‘Click to item - Milly Dent’
WebUI.click(findTestObject(‘Page_Accessories Well Made Clothes/img_AUD 2500_product-collection-image-50077’))

‘Add item to bag’
WebUI.click(findTestObject(‘Page_WMH AU Tier 2 - Milly Dent Well Made Clothes/button_Add to Bag’))

‘Wait for item added into bag’
WebUI.waitForElementPresent(findTestObject(‘Page_WMH AU Tier 2 - Milly Dent Well Made Clothes/a_Checkout’), 5)

‘Click checkout button’
CustomKeywords.‘javaClickbutton.clickTrigger.clickJS’(findTestObject(‘Page_WMH AU Tier 2 - Milly Dent Well Made Clothes/a_Checkout’),
5)

‘Wait for check out page load’
WebUI.waitForElementPresent(findTestObject(‘Page_Shopping Cart Well Made Clothes/button_Pay Securely Now_cart’), 5)

'Click Pay securely ’
WebUI.click(findTestObject(‘Page_Shopping Cart Well Made Clothes/button_Pay Securely Now_cart’))

‘Focus on username input field’
WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input__guestusername’))

‘Set user email’
CustomKeywords.‘dateTime.dateTimeKeyword.emailDateTimeGenerator’(findTestObject(‘Page_Checkout Well Made Clothes/input__guestusername’))

‘Click continus button’
WebUI.click(findTestObject(‘Page_Checkout Well Made Clothes/button_Continue_guest’))

WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input__billingfirstname’))

WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input__billingfirstname’), GlobalVariable.billingFirstName)

WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input__billinglastname’))

WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input__billinglastname’), GlobalVariable.billingLastName)

WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input__billingcustomer_password’))

WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input__billingcustomer_password’), GlobalVariable.billingPassword)

WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input__billingconfirm_password’))

WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input__billingcustomer_password’), GlobalVariable.billingPassword)

WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input__billingtelephone’))

WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input__billingtelephone’), GlobalVariable.billingPhone)

WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input__billingstreet’))

WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input__billingstreet’), GlobalVariable.billingStreet)

WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input__billingcity’))

WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input__billingcity’), GlobalVariable.billingCity)

WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input__billingpostcode’))

WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input__billingpostcode’), GlobalVariable.billingZipCode)

not_run: WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/label_Credit Card - eWAY’))

not_run: WebUI.click(findTestObject(‘Page_Checkout Well Made Clothes/label_Credit Card - eWAY’))

CustomKeywords.‘javaClickbutton.clickTrigger.clickJS’(findTestObject(‘Page_Checkout Well Made Clothes/label_Credit Card - eWAY’),
5)

WebUI.delay(5, FailureHandling.STOP_ON_FAILURE)

‘Focus on Name on card field’
WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input_Credit Card - eWAY_paymentcc_owner’))

‘Set name of card owner’
WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input_Credit Card - eWAY_paymentcc_owner’), GlobalVariable.cardName)

‘Focus on card number field’
WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input_Credit Card - eWAY_ewayrapid_ewayone_cc_number’))

‘Set card number’
WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input_Credit Card - eWAY_ewayrapid_ewayone_cc_number’), GlobalVariable.cardNumber)

‘Select expired month’
WebUI.selectOptionByIndex(findTestObject(‘Page_Checkout Well Made Clothes/select_Month’), 12)

‘Select expired year’
WebUI.selectOptionByIndex(findTestObject(‘Page_Checkout Well Made Clothes/select_Year’), 2)

‘Focus on CVV filed’
WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/input_Credit Card - eWAY_ewayrapid_ewayone_cc_cid’))

‘Set CVV’
WebUI.setText(findTestObject(‘Page_Checkout Well Made Clothes/input_Credit Card - eWAY_ewayrapid_ewayone_cc_cid’), GlobalVariable.CVV)

WebUI.delay(10)

'Focus on Pay button ’
WebUI.focus(findTestObject(‘Page_Checkout Well Made Clothes/span_Pay Securely Now’))

‘Click pay button’
CustomKeywords.‘javaClickbutton.clickTrigger.clickJS’(findTestObject(‘Page_Checkout Well Made Clothes/span_Pay Securely Now’),
5)

not_run: WebUI.click(findTestObject(‘Page_Checkout Well Made Clothes/Pay Securely Pay Securely Now’))

If you need more information, please let me know.
Thank you!