Element identification issue on Safari Browser

Hi,

I am doing POC on web responsive application using Katalon and the test i created works well with all browsers (chrome, firefox, edge) except for safari browser on mac. Test also work on mobile ios simulator using safari web browser

Issue on Safari: When i try to click on sign in button another button gets clicked

Any help is really appreciated

Mac OS - Catalina
Safari Version - 13.05
Katalon Version - 7.2.1

Element:
<"“button _ngcontent-c5=”" class=“button expand-for-small” tabindex=“3” type=“submit”>

<""span _ngcontent-c5=""> Sign in

</button"">

Locator I am using to identify and which is working on chrome, firefox and edge:
//button[@type=‘submit’]

Button which is getting clicked on safari:
<"“a _ngcontent-c5=”" class=“create-account button expand-for-small” routerlink="/registration" tabindex=“5” href="/registration">Create an Account</a"">

Thanks

Use CSS locators (and JS).

Browsers don’t use XPath and they don’t have issues finding things using sizzle engines (CSS).

Bite me. :sunglasses:

Hi Thomas,

I tried using CSS and looks like its able to identify the element but not able to perform click operation. I dont see any failures in log. Element present and click works fine without any errors but nothing happens on the browser

As i said same code works fine on other browsers and mobile browsers

I have tried css and it doesn’t work only on safari browser.

Any configuration required for Katalon Safari browser which i am missing?

Thanks

This is the harsh reality of test automation. There’s really no way around this, aside from multiple solutions to the same problem, or trying to implement a universal approach, which isn’t always possible.

There isn’t any configurable setting that would help you with this problem. There’s definitely a lot of other useful settings you could add though.

This usually indicates that you are clicking on an element other than the one you are expecting (css found a different element). Your original xpath looks fine to me, but if you can do the following it might give us a hint:

1.) Share your test script at the point where you are locating and clicking the button.
2.) Share a screenshot of the HTML in question, instead of typing it out (much easier for you to share and for us to read it this way).

Thanks!

Script:

WebUI.openBrowser(‘’)

WebUI.navigateToUrl(GlobalVariable.url)

WebUI.waitForElementPresent(findTestObject(‘Landing/a_Create an Account’), GlobalVariable.defaultTimeout)

WebUI.click(findTestObject(‘Landing/a_Create an Account’))

WebUI.waitForElementPresent(findTestObject(‘Registration/i_Toggle navigation_fa fa-user-plus’), GlobalVariable.defaultTimeout)

WebUI.click(findTestObject(‘Landing/img_Toggle navigation_branding’))

WebUI.waitForElementPresent(findTestObject(‘Landing/button_Sign in’), GlobalVariable.defaultTimeout)

WebUI.click(findTestObject(‘Landing/button_Sign in’))

WebUI.waitForElementPresent(findTestObject(‘Landing/div_The email address or password you entered is incorrect’), GlobalVariable.defaultTimeout)

Screenshot:

Element Inspection:

@narras1

I had a similar issue on Safari… Buttons worked in all browsers, but was very inconsistent or didn’t work at all in safari.

Few things I did to solve this was adding multiple attributes that I can have the automation identify the button with, then instead of using the standard WebUI.click command I created a custom keyword that I can recycle/reuse for all button across the site.

Here is an example of how I changed the Locator from xpath to attribute and added multiple qualifiers.

Custom Keyword:

package buttons
import org.openqa.selenium.JavascriptExecutor as JavascriptExecutor
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement

import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.common.WebUiCommonHelper as WebUiCommonHelper
import com.kms.katalon.core.webui.driver.DriverFactory


class button_SearchPlans {


	/**
	 Click on Button using js
	 **/

	
	@Keyword
	def clickUsingJS(TestObject to, int timeout) {
		WebDriver driver = DriverFactory.getWebDriver()
		WebElement element = WebUiCommonHelper.findWebElement(to, timeout)
		JavascriptExecutor executor = ((driver) as JavascriptExecutor)
		executor.executeScript('arguments[0].click()', element)
	}
}

This is called in my test script:

CustomKeywords.‘buttons.button_SearchPlans.clickUsingJS’(findTestObject(‘Buttons/Page_Enrollment/button_See Plans’), 3)

CustomKeyword.“PackageName”.“KeywordName”.“FunctionFromWithInKeywordName”'(findTestObject(‘YourTestObject’),"TimeOutLimit")

I don’t know if this solution will help you or not, but it worked wonders for us at getting rid of our inconsistencies.

Thanks Shahin!

Using JS i am able to get element click working on safari but it waits for long to click. Now other browsers are not working

Looks like i have play around with different attributes combinations to make it work on all browsers

That’s like saying JavaScript is not working in the more popular browsers. You have something wrong somewhere. Using a CSS selector and issuing a JavaScript click is almost trivial. Take a huge step back, cut out all the unnecessary code and get that single click working. Then rebuild your test.