[Web Testing] I can't select an item in dropdown list. Please help

Product Forums Katalon Studio
,
1

Hi all,
I am having a problem with selecting an item in a dropdown list.
My case is a bit special that the dropdown list is in the span tag, not the select tag which makes my Select function not working. All comments and suggestions are greatly appreciated. Thank you all beforehand.

The website I am testing: https://www.ourbetterworld.org/gsoty/2018
The HTML:

image
image1366×768 166 KB

My function code:
WebDriver driver = DriverFactory.getWebDriver();
WebElement element = driver.findElement(By.xpath(xpath));
Select selectElement = new Select(element);
selectElement.selectByVisibleText(value);
Thread.sleep(5000);

My error:
2019-08-11 17:01:22.478 DEBUG testcase.Stories_SelectGoodStory - 7: actionKeyword.SelectByXPathKeyword.selectDropdownByXpath(“//select[@id=“edit-field-gsoty-category-target-id”]”, “Animals”)
2019-08-11 17:01:22.627 ERROR com.kms.katalon.core.util.KeywordUtil - :x: Fail to click on element
2019-08-11 17:01:22.628 ERROR k.k.c.m.CustomKeywordDelegatingMetaClass - :x: com.kms.katalon.core.exception.StepFailedException: Fail to click on element
2019-08-11 17:01:22.643 ERROR c.k.katalon.core.main.TestCaseExecutor - :x: Test Cases/Feature_TestCase/TestCase_Stories/Stories_SelectGoodStory FAILED.
Reason:
com.kms.katalon.core.exception.StepFailedException: Fail to click on element
at com.kms.katalon.core.util.KeywordUtil.markFailed(KeywordUtil.java:19)
at com.kms.katalon.core.util.KeywordUtil$markFailed$0.call(Unknown Source)
at actionKeyword.SelectByXPathKeyword.selectDropdownByXpath(SelectByXPathKeyword.groovy:191)
at actionKeyword.SelectByXPathKeyword.invokeMethod(SelectByXPathKeyword.groovy)
at com.kms.katalon.core.main.CustomKeywordDelegatingMetaClass.invokeStaticMethod(CustomKeywordDelegatingMetaClass.java:50)
at Stories_SelectGoodStory.run(Stories_SelectGoodStory: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.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 TempTestCase1565517660941.run(TempTestCase1565517660941.groovy:21)

3

Hi Nguyen Dong Thuc

Check the webpage i see the id of the droplist is always the same ‘select2-edit-field-gsoty-category-target-id-container’ XPATH = //span[@id=‘select2-edit-field-gsoty-category-target-id-container’] but the id for the items inside has four characters that change every time you enter or refresh the page.

dropdown%20list
dropdown%20list1278×679 228 KB

for example All categories item in drop list is id=“select2-edit-field-gsoty-category-target-id-result-lsg6-All” if you refresh or enter again the id change to id=“select2-edit-field-gsoty-category-target-id-result-rfhr-All”

dropdown%20list%20items
dropdown%20list%20items1278×899 318 KB

You need to identify which part of id is constant in this case is id=“select2-edit-field-gsoty-category-target-id-result-XXXX-All”

Once identified need to use a XPATH Expression to identify the dynamic id. In this case is: //li[starts-with(@id, “select2-edit-field-gsoty-category-target-id-result-”) and substring-before(@id, “-All”)]

I put the XPATH for each one:

  • span_All categories (Drop list element) = //span[@id=‘select2-edit-field-gsoty-category-target-id-container’]
  • li_All categories(Element in the list All categories) = //li[starts-with(@id, “select2-edit-field-gsoty-category-target-id-result-”) and substring-before(@id, “-All”)]
  • li_Anilmals(Element in the list Animals) = //li[starts-with(@id, “select2-edit-field-gsoty-category-target-id-result-”) and substring-before(@id, “-267”)]
  • li_India(Element in the list India) = //li[starts-with(@id, “select2-edit-field-gsoty-category-target-id-result-”) and substring-before(@id, “-262”)]
  • li_Malaysia(Element in the list Malaysia) = //li[starts-with(@id, “select2-edit-field-gsoty-category-target-id-result-”) and substring-before(@id, “-264”)]
  • li_Philippines(Element in the list Philippines) = //li[starts-with(@id, “select2-edit-field-gsoty-category-target-id-result-”) and substring-before(@id, “-265”)]
  • **li_Singapore(Element in the list Singapore) = //li[starts-with(@id, “select2-edit-field-gsoty-category-target-id-result-”) and substring-before(@id, “-266”)]

NOTE: before click on a element of the drop list need to click on span_All categories (Drop list element) and after click on a element of the drop list need to use “WebUI.waitForJQueryLoad(10)” to wait load the Stories section.

I attach mi script in txt format:
Script1565634095442.txt (2.5 KB)

I hope this help you. Sorry for any error in redaction or grammar but English is not my native language.

1 Like
4

Thank you @ikelso. it works perfectly.