Accordion section collapses immediately after clicking – how to keep it open for dropdown selection?

dt-auto5 · May 9, 2025, 2:31am

Hi all,

I’m working on a Katalon Studio test case for a form in our UWA Apply portal. There’s an accordion section titled:
<h3 class="accordion-list-title">Personal details – Additional questions *</h3>
Clicking it reveals some dropdowns like “Select answer” fields. However, during test execution, the accordion collapses immediately after expanding, making it impossible to select values from the dropdowns.

Here’s what I’m trying:

WebUI.click(findTestObject('Page_Apply/accordion_PersonalDetails')) // to expand
WebUI.selectOptionByIndex(findTestObject('Page_Apply/dropdown_SingleCover'), 1)

But it fails at the dropdown selection — probably because the accordion is no longer visible or interactable.

What I’ve tried so far :

Using delays and waitForElementVisible before interacting with the dropdown.
Trying scrollToElement on the accordion or dropdown.
Confirmed that clicking the accordion manually does reveal the dropdowns in the browser.

Questions :

How do I keep the accordion open long enough for the next dropdown interaction?
Is there a better way to ensure the dropdown remains visible/interactable during automation?

Any help or workaround would be appreciated!

*********************************Xpath Details as below ****************
Element : select_Select answerSingle Type Cover (cove_4e7451

xpath : //select[@id=‘ApplicationServiceQuestions[37].MultichoiceServiceQuestionAnswer’]

accordion : h3_Personal details Additional questions _

xpath : //h3[(text() = ‘Personal details – Additional questions *’ or . = ‘Personal details – Additional questions *’)]

*********FULL CODE OF THE Test case as below ****************************

ErrorKatalon6May.log (306.1 KB)

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 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.testng.keyword.TestNGBuiltinKeywords as TestNGKW

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 org.openqa.selenium.Keys as Keys

import org.openqa.selenium.support.ui.Select as Select

import com.kms.katalon.core.webui.driver.DriverFactory as DriverFactory

//<<<<<<<<<<<<<<<<< Personal Details >>>>>>>>>>>>>>>>>>>>>

WebUI.click(findTestObject(‘PersonalDetails/Page_Apply The University of Western Australia/h3_Personal details _’))

WebUI.setText(findTestObject(‘PersonalDetails/Page_Apply The University of Western Australia/input_UWA Student ID’), ‘0312345678’)

WebUI.click(findTestObject(‘PersonalDetails/Page_Apply The University of Western Australia/button_Save_PersonalDetails’))

WebUI.click(findTestObject(‘PersonalDetails/Page_Apply The University of Western Australia/h3_Address details _’))

WebUI.click(findTestObject(‘PersonalDetails/Page_Apply The University of Western Australia/button_Save_AddressDetails’))

WebUI.click(findTestObject(‘PersonalDetails/Page_Apply The University of Western Australia/h3_Personal details Additional questions _’))

WebUI.delay(5)

WebUI.selectOptionByIndex(findTestObject(‘PersonalDetails/Page_Apply The University of Western Australia/select_Select answerSingle Type Cover (cove_4e7451’),

1)/>

dineshh · May 9, 2025, 5:29am

to resolve the accordion collapse issue and interact with the dropdown in Katalon Studio:

1. Use JavaScript Click for Accordion

Avoid potential event interference by directly triggering the click via JavaScript:

TestObject accordion = findTestObject('Page_Apply/accordion_PersonalDetails')
WebUI.executeJavaScript('arguments[0].scrollIntoView(true);', [accordion])
WebUI.executeJavaScript('arguments[0].click();', [accordion])

2. Add Explicit Waits for Visibility/Interactivity

Wait for the dropdown to be fully rendered before interacting:

TestObject dropdown = findTestObject('Page_Apply/dropdown_SingleCover')

// Wait for dropdown to be interactable
WebUI.waitForElementVisible(dropdown, 10)
WebUI.waitForElementClickable(dropdown, 10)

// Select option
WebUI.selectOptionByIndex(dropdown, 1)

3. Verify Accordion State

Add a check to confirm the accordion is open:

String accordionClass = WebUI.getAttribute(accordion, 'class')
if (!accordionClass.contains('active')) { // Adjust class name based on your UI
    WebUI.click(accordion)
}

4. Retry Mechanism

Handle flaky behavior with a retry loop:

int maxAttempts = 3
int attempts = 0

while (attempts < maxAttempts) {
    try {
        WebUI.click(accordion)
        WebUI.selectOptionByIndex(dropdown, 1)
        break
    } catch (Exception e) {
        attempts++
        WebUI.waitForPageLoad(5)
    }
}

5. Full Modified Code

// Expand accordion using JavaScript
TestObject accordion = findTestObject('Page_Apply/accordion_PersonalDetails')
TestObject dropdown = findTestObject('Page_Apply/dropdown_SingleCover')

// Scroll and click with JS
WebUI.executeJavaScript('arguments[0].scrollIntoView({behavior: "smooth", block: "center"});', [accordion])
WebUI.executeJavaScript('arguments[0].click();', [accordion])

// Wait for dropdown to stabilize
WebUI.waitForElementPresent(dropdown, 10)
WebUI.waitForElementClickable(dropdown, 10)

// Select option
WebUI.selectOptionByIndex(dropdown, 1)

6. Alternative: Use XPath for Dynamic Elements

If the dropdown is dynamically added to the DOM, use direct XPath targeting:

TestObject dynamicDropdown = new TestObject().addProperty('xpath', ConditionType.EQUALS, 
  '//select[@id="ApplicationServiceQuestions[37].MultichoiceServiceQuestionAnswer"]')
WebUI.waitForElementPresent(dynamicDropdown, 10)
WebUI.selectOptionByValue(dynamicDropdown, 'your-value')

Key Fixes

JavaScript Execution: Bypasses Selenium’s native click if event listeners interfere.
Explicit Waits: Ensures elements are interactable before actions.
Accordion State Check: Prevents “collapsed” state during interaction.

Troubleshooting

Animation Delays: Add a small delay after expanding the accordion:

WebUI.delay(1) // 1 second for CSS transitions

Shadow DOM: If the dropdown is in a shadow root, use Katalon’s shadow DOM handling.

grylion54 · May 9, 2025, 3:53pm

I noticed that you are trying to choose “Personal Details”. Maybe there are none available. Perhaps you have to determine there are some first before you try to select one.

WebUI.verifyElementVisible(findTestObject('PersonalDetails/Page_Apply TUWA/select_Select answerSingle Type Cover (cove_4e7451'))

numItems =  WebUI.getNumberOfTotalOption(findTestObject('PersonalDetails/Page_Apply TUWA/select_Select answerSingle Type Cover (cove_4e7451'))
if (numItems >= 1) {
    WebUI.selectOptionByIndex(findTestObject('PersonalDetails/Page_Apply TUWA/select_Select answerSingle Type Cover (cove_4e7451'), 1)
}

Do you know if you have dynamic references?
select_Select answerSingle Type Cover (cove_4e7451

And maybe:

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

import org.openqa.selenium.Keys as Keys

import internal.GlobalVariable as GlobalVariable


//<<<<<<<<<<<<<<<<< Personal Details >>>>>>>>>>>>>>>>>>>>>
WebUI.waitForElementVisible(findTestObject('PersonalDetails/Page_ApplyTUWA/h3_Personal details'), 10)

WebUI.verifyElementVisible(findTestObject('PersonalDetails/Page_ApplyTUWA/h3_Personal details'))

WebUI.verifyElementVisible(findTestObject('PersonalDetails/Page_ApplyTUWA/input_UWA Student ID'))
WebUI.setText(findTestObject('PersonalDetails/Page_ApplyTUWA/input_UWA Student ID'), '0312345678')
WebUI.verifyElementAttributeValue(findTestObject('PersonalDetails/Page_ApplyTUWA/input_UWA Student ID'), 'value', '0312345678', 10)

WebUI.verifyElementVisible(findTestObject('PersonalDetails/Page_ApplyTUWA/button_Save_PersonalDetails'))
WebUI.click(findTestObject('PersonalDetails/Page_ApplyTUWA/button_Save_PersonalDetails'))
WebUI.waitForPageLoad(10)

WebUI.waitForElementVisible(findTestObject('PersonalDetails/Page_ApplyTUWA/h3_Address details'), 10)
WebUI.verifyElementVisible(findTestObject('PersonalDetails/Page_ApplyTUWA/h3_Address details'))

WebUI.verifyElementVisible(findTestObject('PersonalDetails/Page_ApplyTUWA/button_Save_AddressDetails'))
WebUI.click(findTestObject('PersonalDetails/Page_ApplyTUWA/button_Save_AddressDetails'))
WebUI.waitForPageLoad(10)

WebUI.waitForElementVisible(findTestObject('PersonalDetails/Page_ApplyTUWA/h3_Personal details Additional questions'))
WebUI.verifyElementVisible(findTestObject('PersonalDetails/Page_ApplyTUWA/h3_Personal details Additional questions'))
WebUI.click(findTestObject('PersonalDetails/Page_ApplyTUWA/h3_Personal details Additional questions))

WebUI.delay(5)   // some wait statement maybe

WebUI.verifyElementVisible(findTestObject('PersonalDetails/Page_ApplyTUWA/select_Select answerSingle Type Cover (cove_4e7451'))
WebUI.selectOptionByIndex(findTestObject('PersonalDetails/Page_ApplyTUWA/select_Select answerSingle Type Cover (cove_4e7451'), 1)
WebUI.verifyOptionSelectedByIndex(findTestObject('PersonalDetails/Page_ApplyTUWA/select_Select answerSingle Type Cover (cove_4e7451'), 1, false, 10)

kazurayam · May 9, 2025, 9:55pm

I noticed that the movie you shared plays for 3 minutes 30 seconds. Your test took such long time to finish. I suppose you got tired of waiting this long duration. I noticed that your test was waiting long seconds (over 30 seconds) repeatedly.

Why did the test run so slow?

I noticed you were using “Self-Healing” ON.

I would recommend you to try turning the “Self-Healing” OFF.

I suppose your test runs and fail far faster.

It’s better to get the result quicker, isn’t it?

kazurayam · May 9, 2025, 10:00pm

How did you do this exactly? Please show the code you tried this.

Why do I ask this?

I suppose the locator you specified was wrong, or you watied at a wrong timing. Your code would tell us how you tried concretely.

kazurayam · May 9, 2025, 10:12pm

How does the locator (XPath) of this TestObject look like?

Does the locator contain a string cove_4e7451 ?

I guess, the part in the HTML which corresponds to the string cove_4e7451 dynamically changes everytime you open the URL on browser. For example, the HTML may have cove_1g2345 or foo_97321 … Please check.

If the part is dynamically changing, then your Test Object locator with a constant string cove_4e7451will never be valid. You need to change the locator so that it is robust against the changing portion.

kazurayam · May 9, 2025, 11:23pm

Your original XPath is fragile.

In the HTML source, in between the string "quesitions" and the "*", how many whitespace characters are there? 1? 2? or more?

If the HTML contains 2 or more whitespace characters (including tabs and newlines) in between questions and *, your XPath would miss the element.

I would recommend you to change it to:

//h3[contains(normalize-space(.), 'Personal details – Additional questions')]

The XPath I suggested above is robust. It intentionally ignores * at the end of the string to match against; It ignores consecutive whitespaces between words.

I guess, you used Katalon’s built-in Web Recording tool, and you expected the tool to have generated good enough locators.

Let me tell you, the locators generated by the tool are not necessarily the best possible ones. They tend to have a lot of points to be improved. Experienced Katalon users won’t hesitate to edit the generated locators manually to improve them.

kazurayam · May 11, 2025, 12:27pm

This error message indicates that you, @di-auto5, used WebUI.selectOptionByIndex keyword.

Are you aware that this keyword assumes that the target HTML uses <select><option>..</option><option>...</option> elements, like this:

However, you haven’t showed us the HTML source of your taget web page.

Does the page really use <select> tag?

Modern javasript frameworks for webapps including React, Angular, Vue … rarely use the <select> tag. These javascript frameworks usually generates <div> elements that visually look like a drop-down list.

I ask you this because the screenshot you shared shows no <select> tag contained:

I have a doubt, you should not use WebUI.selectOptionXXX keyword for your target HTML.

dt-auto5 · May 12, 2025, 7:38am

Thank you so much for all the troubleshooting , questions you have asked. I am not sure where to begin. Somehow after posting and repeated trying without much changes it magically appeared to be working!. Only step i would have done is to clear the cache.

I am stuck now at the Personal details - Address details section now. Since the other section is working is it ok if i mentioned about the section with issue now please.

Element is this : Address line 1

The value in there is somehow being retained by the browser cache.. so i want to clear it and try to insert something else.

so i used --code as below
WebUI.clearText(findTestObject(‘PersonalDetails/Page_Apply The University of Western Australia/input_Start typing an address’))

WebUI.setText(findTestObject(‘PersonalDetails/Page_Apply The University of Western Australia/input_Start typing an address’),
’ 11 perth road’)

I have tried to put delay and waifforelement etc.. but no use.

XPATH : //input[@id=‘addressLine1’]

—error generated below…

Test Cases/TC09_Apply_PersonalDetail FAILED.

Reason:

com.kms.katalon.core.exception.StepFailedException: Unable to set text ’ 11 perth road’ of object ‘Object Repository/PersonalDetails/Page_Apply The University of Western Australia/input_Start typing an address’

at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.stepFailed(WebUIKeywordMain.groovy:117)

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

at com.kms.katalon.core.webui.keyword.builtin.SetTextKeyword.setText(SetTextKeyword.groovy:86)

at com.kms.katalon.core.webui.keyword.builtin.SetTextKeyword.execute(SetTextKeyword.groovy:39)

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

at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.setText(WebUiBuiltInKeywords.groovy:1056)

at TC09_Apply_PersonalDetail.run(TC09_Apply_PersonalDetail:36)

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:448)

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

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

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

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

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

at com.kms.katalon.core.keyword.builtin.CallTestCaseKeyword$_callTestCase_closure1.doCall(CallTestCaseKeyword.groovy:59)

at com.kms.katalon.core.keyword.builtin.CallTestCaseKeyword$_callTestCase_closure1.call(CallTestCaseKeyword.groovy)

at com.kms.katalon.core.keyword.internal.KeywordMain.runKeyword(KeywordMain.groovy:75)

at com.kms.katalon.core.keyword.builtin.CallTestCaseKeyword.callTestCase(CallTestCaseKeyword.groovy:81)

at com.kms.katalon.core.keyword.builtin.CallTestCaseKeyword.execute(CallTestCaseKeyword.groovy:44)

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

at com.kms.katalon.core.keyword.BuiltinKeywords.callTestCase(BuiltinKeywords.groovy:310)

at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77)

at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

at TC00_UAPAPPLY_MASTER.run(TC00_UAPAPPLY_MASTER:86)