Mouseover and MoveToElement function does not work

Hello,

I just want to move my mouse cursor to the login button, but it doesn’t work in my code below. Hope can someone who help me. Thank you!

Xpath of my element
image

I tried also the mouseOver function but still no luck.

In Katalon Studio, you can move the mouse cursor to a specific element on a web page using the WebUI.hover method. The WebUI.hover method takes a test object as its only parameter, which represents the element you want to move the cursor to. Here is an example of how you could use the WebUI.hover method to move the cursor to a login button:

// Define the locator for the login button
String loginButtonLocator = "//button[@id='login']"

// Find the test object for the login button
TestObject loginButton = findTestObject(loginButtonLocator)

// Move the cursor to the login button
WebUI.hover(loginButton)

It’s important to note that the WebUI.hover method only moves the cursor to the element, it doesn’t perform a click. If you want to simulate a mouse click on an element, you can use the WebUI.click method.

WebUI.click(loginButton)

Also, make sure the element is visible on the screen, if the element is not visible, the script will throw an exception.

If the problem persists, I recommend you to check if the provided locator is correct and if the element is present on the web page when the script is executed. You can also try to use the WebUI.verifyElementPresent method to check if the element is present before trying to move the cursor to it.

WebUI.verifyElementPresent(loginButton)

hi @waqas thanks for your response and suggestion. I tried your code and I got an error. It seems the WebUI.hover is not a valid function in katalon

I also change the WebUI.hover to WebUImouseOver and I got an error “Object is null”


I apologize for the confusion. You are correct, the WebUI.hover method is not a valid method in Katalon Studio. Katalon Studio does not have a built-in method for moving the mouse cursor to a specific element on a web page.

There are several workarounds to achieve this functionality, one way is to use the Actions class from the org.openqa.selenium.interactions package in Selenium. Here is an example of how you can use the Actions class to move the cursor to a login button:

// Define the locator for the login button
String loginButtonLocator = "//button[@id='login']"

// Find the WebElement for the login button
WebElement loginButton = WebUI.findWebElement(loginButtonLocator, 5)

// Create an instance of the Actions class
Actions actions = new Actions(DriverFactory.getWebDriver())

// Move the cursor to the login button
actions.moveToElement(loginButton).perform()

This script will create an instance of the Actions class and use the moveToElement method to move the cursor to the specified element. Then the perform() method is called to execute the action.

Another way is to use the WebUI.executeJavaScript method to simulate the mouse movement. Here is an example of how you can use this method to move the cursor to a login button:

// Define the locator for the login button
String loginButtonLocator = "//button[@id='login']"

// Find the WebElement for the login button
WebElement loginButton = WebUI.findWebElement(loginButtonLocator, 5)

// Define the JavaScript code to move the cursor to the login button
String jsCode = "var event = new MouseEvent('mouseover', {'view': window,'bubbles': true,'cancelable': true});arguments[0].dispatchEvent(event);"

// Execute the JavaScript code
WebUI.executeJavaScript(jsCode, loginButton)

@escalryan

Let me go back to your original post:

You wrote “it does not work”. I do not see what you mean by this.

What did you expected to see?
What did you actually see?
Any error log?


Why I ask this to you? — I tried to reproduce your problem on my side. I made a runnable mimic of your code:

import org.openqa.selenium.By
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement
import org.openqa.selenium.interactions.Action
import org.openqa.selenium.interactions.Actions
import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
TestObject makeTO(String xpath) {
	TestObject to = new TestObject(xpath)
	to.addProperty("xpath", ConditionType.EQUALS, xpath)
	return to
}
WebUI.openBrowser("https://katalon-demo-cura.herokuapp.com/profile.php#login")
WebUI.setViewPortSize(800, 600)
WebUI.setText(makeTO("//input[@id='txt-username']"), "John Doe")
WebUI.setText(makeTO("//input[@id='txt-password']"), "ThisIsNotAPassword")
WebUI.delay(3)
String locatorStr = "//button[contains(text(),'Login')]"
WebUI.verifyElementPresent(makeTO(locatorStr), 5)

// mimic of escalryan's code
WebDriver driver = DriverFactory.getWebDriver()
WebElement locatorTo = driver.findElement(By.xpath(locatorStr))
Actions actions = new Actions(driver)
Action mouseOverHome = actions.moveToElement(locatorTo).build()
mouseOverHome.perform()
// the button becomes grey color by mouseOver

WebUI.delay(5)
WebUI.closeBrowser()

I saw this code works. I cound see that an mouseOver event to the Login button was fired because I saw the button changed its background color from white to grey.

So I wondered why you wrote “it does not work”.


By the way I saw a curious thing. When I executed the above script, I saw the Login button changed its background color from white to grey. But I did NOT see the mouse pointer moved on to the button. It seemed that the mouseOverHome.perform() did NOT visibly move the pointer as if a human moved it by dragging a mouse device, but it DID trigger a mouseOver event to the button element.

I have no idea if this is normal or not. I guess it would be good enough if a mouseOver event is properly triggered regardless if a mouse pointer is observed moving or not.

@escalryan

Which type of browser are you on? Firefox? Chrome?

The following post tells us there is a known issue of moveToElement action for Firefox:

Hi @waqas appreciate your response. I tried both codes, and I encountered an error. :frowning:

No signature of method: static com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.findWebElement() is applicable for argument types: (org.openqa.selenium.By$ByXPath, java.lang.Integer) values: [By.xpath: //span[contains(text(),'Login')], 5]
Possible solutions: findWebElement(com.kms.katalon.core.testobject.TestObject, int), findWebElement(com.kms.katalon.core.testobject.TestObject), findWebElements(com.kms.katalon.core.testobject.TestObject, int)
	

hi @kazurayam I am expecting that the mouse cursor will be moved to the Login button, but what happened was I successfully executed my script without error but nothing happened in the UI. This means the mouse cursor was not moved to the Login button. Does it mean for now in Katalon or any automation tool is not yet supported or capable to move the mouse cursor?

Just want to share my other scenario which is drag and drop, I know this is a separate topic already. I successfully drag the element but I need to manually move the mouse cursor to the target element to be able successfully to drop. It will resolve my problem once I successfully move the mouse cursor to the drag area. But it sound is not yet capable to do that for now :frowning:

BTW I am using the Chrome browser.

Your error message, MissingMethodException, means you have not stated a method correctly, like the number of parameters or the parameter’s data type(s). In this case, you did not state the parameter’s data type correctly. The method, “findWebElement()” expects a TestObject as a parameter (with the second parameter as an “int”), but you gave it a WebElement (using the By.xpath) instead. How about try the below?

import org.openqa.selenium.By as By
import org.openqa.selenium.Keys as Keys
import org.openqa.selenium.WebDriver as WebDriver
import org.openqa.selenium.WebElement as WebElement

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

WebElement loginButton = DriverFactory.getWebDriver().findElement(By.xpath(locatorStr), 5))

Edit: And on the topic of “hover”, just for info, I use the method, WebUI.mouseOver. I know it works because the help text appears. Although, in truth, I don’t see the actual mouse, but that wasn’t what I was looking for.

OK. I understand it.

Is your Web page (HTML+JS+CSS) designed to react when a mouse cursor th-2783055318 is moved over the “Login” element? For example, does the “Login” element changes its background-color when a mouse pointer comes over it? — may be not.

If no reaction is implemented in your target page, then it is likely that you see “nothing happend in the UI”. It depends on how the targeted page is designed, not on the test tools.

I don’t know for sure. All I know is that I saw a case at the page CURA Healthcare Service where a mouse pointer th-2783055318 is not actually moved by “moveCursor” method but the “Login” button reacted.

I guess, the motion of a mouse pointer is controled by OS backed with a mouse device or a trackpad device. I guess, a Selenium-based application software can not control the motion of a mouse pointer.

I would only be interested in if the HTML DOM events (“on mouse over” etc) associated to the “Login” button is actually triggered or not when my test script called the lines:

Action mouseOverHome = actions.moveToElement(locatorTo).build()
mouseOverHome.perform()

I saw, at the page CURA Healthcare Service , that the background colour of the button reacted; it proved that my test script could fire HTML DOM events successfully; it is enough for me. I am not interested in how the mouse pointer th-2783055318 moves.

The method name “mouseOver” and “moveToElement” naturally suggests to us that these method would force the mouse cursor th-2783055318 to go around and we should be able to see its move visibly.

But I think that these names could be inappropriate. I suppose that these methods are designed to fire HTML DOM events AS IF you manually moved a mouse cursor over the element, but these methods possibly do not actually move a black arrow th-2783055318 around.

I think this is acceptable. Enough for Web UI testing. We are not testing OS.

Hi @escalryan
I think WebUI.findWebElement() method in Katalon Studio does not accept a By object as its first parameter, and the error message you are seeing is indicating that this method expects a TestObject instead.

To find a WebElement in Katalon Studio, you can use the findTestObject method, this method will return a TestObject that you can use in your script. Here is an example:

String loginButtonLocator = "//span[contains(text(),'Login')]"
TestObject loginButton = findTestObject(loginButtonLocator)

Then you can use this TestObject in your script.

Actions actions = new Actions(DriverFactory.getWebDriver())
actions.moveToElement(loginButton.getWebElement()).perform()

Just in case the above does not work, you can modify it to

String loginButtonLocator = "//span[contains(text(),'Login')]"
TestObject loginButton = new TestObject(loginButtonLocator)
loginButton.addProperty("xpath", ConditionType.EQUALS, loginButtonLocator)

Use the CRTL + SHIFT + O (oh) keys to get/fix your import statements for the above code.