Outlining current Test Object/element

Product Forums Katalon Studio
, ,
1

Hi @Russ_Thomas I am using the following Custom Keyword that works fine, but how would I use Outline Property instead? Not sure of what syntax should be used, so far no luck in what I have tried.

package com.reusableComponents
import org.openqa.selenium.JavascriptExecutor
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement
import org.testng.Assert
import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.common.WebUiCommonHelper
import com.kms.katalon.core.webui.driver.DriverFactory

/**Used for highlighting page elements **/
public class HighlightElement {
	static WebDriver driver = DriverFactory.getWebDriver()
	@Keyword
	public static void HighlightObject(TestObject objectto) {
		try {
			WebElement element = WebUiCommonHelper.findWebElement(objectto, 20);
			for (int i = 0; i < 5; i++) {
				JavascriptExecutor js = (JavascriptExecutor) driver;
				js.executeScript("arguments[0].setAttribute('style','background: yellow; border: 2px solid green;');", element);
			}
		} catch (Exception e) {
			Assert.fail(e.getMessage());
		}
	}
}
2

Hi Dave.

Here is the JavaScript function I wrote:

function highlightElement(selector) {
  var elem = document.querySelector(selector); 
  elem.style.boxShadow = "1px 1px 4px 4px yellow, -1px -1px 4px 4px yellow";
  setTimeout(function() {
    elem.style.boxShadow = "none";
  },5000);
}

Note it uses boxshadow, not outline – you can change it if you like. Also it will highlight the element for 5 seconds before clearing it. You can change that (or, indeed, make it an argument to the function).

2 Likes
3

The syntax for the CSS outline property is here:

1 Like
4

Thanks @Russ_Thomas I will check it out when I have some free-time.

Best regards,
Dave