Hi guys,
I am a beginner for katalon automation and recently i started to automate a web application. I have encountered a issue when checking gif loader display when submit the form.
This loader trigger when user click on send button and hidden after several seconds. i have attached images of HTML code before and after click on button.
This is before click on send button
This is after click on send button
before click on button id=loadingImg css style display=none so it didn’t display for the user
After click i think some javascript change css style display to visible and again make hidden
This is the groovy code that i have created so far
CustomKeywords.'commonClass.CommonMethods.initializer'()
WebUI.click(findTestObject('JobSeekerObjects/HomePage/lnkJobseekerLogin'))
WebUI.delay(2)
WebUI.verifyMatch(CustomKeywords.'commonClass.CommonMethods.verifynavigatelogin'(WebUI.getUrl()),
'pass', false)
CustomKeywords.'commonClass.CommonMethods.logintoapp'(GlobalVariable.UserName, GlobalVariable.UserPwd)
CustomKeywords.'commonClass.CommonMethods.afterlogintopost'()
WebUI.switchToWindowTitle('ADVIEW')
WebUI.click(findTestObject('JobSeekerObjects/VacancyAdview/btnSendToFriend'))
String displayemail=WebUI.getAttribute(findTestObject('JobSeekerObjects/VacancyAdview/txtSndToFrndYourEmail'), 'value')
System.out.print(displayemail)
WebUI.verifyMatch(displayemail,GlobalVariable.UserEmail , false)
//Send values to friend email textbox
WebUI.sendKeys(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/txtFrndEmail'),'sendfriend@gmail.com')
//click send button
WebUI.click(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/btnSendToFriendSend'))
WebUI.verifyElementPresent(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/lblMailSentToFriendSuccess'), 10)
//This statement get passed
//get failed below two
WebUI.waitForElementVisible(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/lblMailSentToFriendSuccess'), 10)
WebUI.verifyElementVisible(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/lblMailSentToFriendSuccess'))
After the verify element is present then code get failed, What is the reason that waitForElementVisible cannot capture the loadingImg element. It suppose to be visible after button click
Firstly, that’s a great issue report and post. Well done! 
And your first post too. Excellent.
Now, a word or two about your approach…
Be aware that the faster your environment (client AND server) responds, you (and WebUI) may never see the loadingImg appear then disappear. I’m saying your testing approach is “weak” and will likely cause issues whatever you do to fix it. That said…
From your screenshot, it seems it is the <img id="loadingImg" ...> element that is being manipulated (its style is modified to remove the css “display:none” property).
From your code it seems your test object is looking at something else.
The choice of naming suggests you intend this Test Object to be a label (a span or something like that in HTML language), while the loading icon is an <img> tag. Please provide the Selector of the Test Object above.
Oops i am really sorry, that source code missing some part i have removed them to check remaining statements are getting passed or not, anyway this is the correct source code.
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.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 com.kms.katalon.core.testobject.ConditionType
CustomKeywords.'commonClass.CommonMethods.initializer'()
WebUI.click(findTestObject('JobSeekerObjects/HomePage/lnkJobseekerLogin'))
WebUI.delay(2)
WebUI.verifyMatch(CustomKeywords.'commonClass.CommonMethods.verifynavigatelogin'(WebUI.getUrl()),
'pass', false)
CustomKeywords.'commonClass.CommonMethods.logintoapp'(GlobalVariable.UserName, GlobalVariable.UserPwd)
CustomKeywords.'commonClass.CommonMethods.afterlogintopost'()
WebUI.switchToWindowTitle('ADVIEW')
WebUI.click(findTestObject('JobSeekerObjects/VacancyAdview/btnSendToFriend'))
String displayemail=WebUI.getAttribute(findTestObject('JobSeekerObjects/VacancyAdview/txtSndToFrndYourEmail'), 'value')
System.out.print(displayemail)
WebUI.verifyMatch(displayemail,GlobalVariable.UserEmail , false)
//Send values to friend email textbox
WebUI.sendKeys(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/txtFrndEmail'),'sendfriend@gmail.com')
//click send button
WebUI.click(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/btnSendToFriendSend'))
//--------------------------------------------------------------------------------------------------------------------------
//This statement get passed
WebUI.verifyElementPresent(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/imgLoading'),20)
//Issue occur by this, get failed below two
WebUI.waitForElementVisible(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/imgLoading'),20)
WebUI.verifyElementVisible(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/imgLoading'))
//--------------------------------------------------------------------------------------------------------------------------
//This is to handle another object
WebUI.verifyElementPresent(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/lblMailSentToFriendSuccess'), 10)
WebUI.waitForElementVisible(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/lblMailSentToFriendSuccess'), 10)
WebUI.verifyElementVisible(findTestObject('Object Repository/JobSeekerObjects/VacancyAdview/lblMailSentToFriendSuccess'))
problem still exist
I think one possibility to eliminate is the locator returning another <img> element which is always hidden. Try to use inspection tool on Chrome to see if the locator of the Test Object uniquely identifies the <img> element you want.
Put this code in your browser console and let me know the result:
document.querySelectorAll("#loadingImg")
It should return 1. If it’s greater than 1, the page itself is invalid.
