When attempting to click on an element below the visible window:
In Firefox I am seeing the error “Element <…path to element…> could not be scrolled into view.”
In Chrome I am seeing the error “element click intercepted: Element is not clickable at point (285, 769)”
My recollection from the past is that it in most cases it would “automatically” scroll to those elements without me having to do an explicit scrollToElement. In the simple example script below, it does work when I use the explicit scrollToElement, however, on more complex pages with more interactions, that fails to work as well. As I observe the script running, it looks like it is attempting to scroll, but it scrolls in very small increments.
I am running on a MacOS Sonoma 14.6.1 with Katalon Studio Free 9.7.3
Here is the sample script:
import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.coPreformatted textre.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
scroll = false
WebUI.openBrowser('')
WebUI.navigateToUrl('https://journey.missionnext.org/signup/candidate')
WebUI.waitForPageLoad(5)
if(scroll) {
WebUI.scrollToElement(findTestObject('Page_Journey/img_How did you learn about us_field-tooltip'), 0)
WebUI.delay(1)
}
WebUI.click(findTestObject('Page_Journey/img_How did you learn about us_field-tooltip'))
WebUI.delay(2)
The test object’s xpath is “//div[@id=‘group1’]/div[6]/div/img”
Any help would be greatly appreciated.
You set the timeout to be 0
Is the timeout of 0 sec appropriate? I doubt it.
Please try the timeout of 3 secs.
you are setting the value of scroll to ‘false’. This means your block containing scrollToElement is always skipped entirely. Is the element that you are scrolling to actually found though? If the element cannot be found, it cannot scroll to it and you might have to look at alternatives. Please check by opening the page in dev tools and clicking CTRL + F to find the element (or whatever the Mac equivalent is!)
If you can find the element, would suggest removing your if statement entirely as redundant.
If you cannot find the element by scrolling directly to it… some alternatives are to scroll the page by a specified amount (do a search on the forums) or scroll to an intermediate element, then scroll again. Sometimes needed on pages that utilise ‘lazy loading’, where the page code only displays the elements in the immediate viewport rather than the rest of the non-visible page.
Good point!
Please share the execution log. The log would tell us how the script actually ran.
Ah! Your code formatting tricked me.
Why don’t you insert indentations to the statements inside a if like:
if(scroll) {
WebUI.scrollToElement(findTestObject('Page_Journey/img_How did you learn about us_field-tooltip'), 0)
WebUI.delay(1)
}
Proper code formatting is essential for quality programming, I believe.
Right-click the source and find a menue “Source > Format”:
If you chose it, your script will be formatted by the editor as:
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
scroll = false
WebUI.openBrowser('')
WebUI.navigateToUrl('https://journey.missionnext.org/signup/candidate')
WebUI.waitForPageLoad(5)
if (scroll) {
WebUI.scrollToElement(findTestObject('Page_Journey/img_How did you learn about us_field-tooltip'), 0)
WebUI.delay(1)
}
WebUI.click(findTestObject('Page_Journey/img_How did you learn about us_field-tooltip'))
WebUI.delay(2)
Please find the statements are indented.
And right-click to choose Source > Organize imports:
By this operation your code will be shortened to:
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
scroll = false
WebUI.openBrowser('')
WebUI.navigateToUrl('https://journey.missionnext.org/signup/candidate')
WebUI.waitForPageLoad(5)
if (scroll) {
WebUI.scrollToElement(findTestObject('Page_Journey/img_How did you learn about us_field-tooltip'), 0)
WebUI.delay(1)
}
WebUI.click(findTestObject('Page_Journey/img_How did you learn about us_field-tooltip'))
WebUI.delay(2)
As you see, unused import statements will be removed.
The final code is less error-prone, I think.
One other item I think you can use is to enlarge the screen when you open your browser, like
WebUI.openBrowser('')
"like it better when see all the items"
WebUI.maximizeWindow()
And, the below pathway just looks flaky to me (sorry) with the div[6] for the tool tip <img> tag:
So, you could also try a pathway of the below which starts in the textbox beside your <img> and then moves up to position of your div[6] and then, like your pathway, follows down to the <img> tag. Yes it may look more complicated but it’s only using pathway functions which the computer finds very easy to do.
xpath = id("registration_group1_how_did_you_hear_about_missionnext?")/../preceding-sibling::div/img
or
xpath = //*[contains(@id,"registration_group1_how_did_you_hear_about_missionnext")]/../preceding-sibling::div/img
Also, since you are wanting the <img> tag to be in your viewport, I would scroll to an object above it (I try for 1 inch or 2 cm). So, instead of scrolling to the image, how about instead scroll to the Phone Number textbox.
xpath = id("registration_group1_cell_phone")
Thank you for looking at and responding to my question. The sample code was a minimal example of the problem I am having. Maybe it was unclear, but I thought I had explained enough in the initial text for folks to understand that I had run the code both with scroll set to true and false. Also, the elements clearly are found as the errors I listed indicate the problem to be “could not be scrolled into view” or “element click intercepted”.
The code is formatted on my machine, but the copy and paste removed the indentations.
At first, you should write a pair of triple back-ticks.
then in the middle of the pair, you should copy-paste a text.
Any whitespaces inside the pair of triple-backticks will be preseved .
Your element is definitely found if you use browser dev tools and search for the element from the part of the page you normally start at?
There are two version of “scrollTo”. You can use either:
// move to a specific element on the page
WebUI.scrollToElement(findTestObject('...'), 10)
or
// move to somewhere on the page
WebUI.scrollToPosition(200, 2000) // bottom of form
Neither of these have a “true” or “false”, so can you perhaps explain which version of “scrollTo” you are using?
