Element identification issue on Safari Browser

narras1 · February 7, 2020, 4:41pm

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

Russ_Thomas · February 7, 2020, 5:40pm

Use CSS locators (and JS).

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

Bite me.

narras1 · February 10, 2020, 4:42pm

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

Brandon_Hein · February 10, 2020, 5:23pm

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!

narras1 · February 10, 2020, 6:56pm

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:

shahin.fard · February 10, 2020, 8:18pm

@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.

narras1 · February 11, 2020, 5:49pm

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

Russ_Thomas · February 11, 2020, 7:23pm

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.