Forum Discussion

sedens's avatar
sedens
Contributor
3 years ago

How to check property for text color or yellow highlight in Keyword Test for web tests

I have a web application that contains a page that shows the results of a search. The search results will show text in red to indicate a close match otherwise is black text highlighted in yellow. How can I check the search results to verify the search results will show either red text or black text highlighted in yellow in a keyword test? Otherwise, is there a script that can be run to check this? Thanks!

Checkpoints
Keyword Tests
web testing
  • AlexKaras's avatar
    AlexKaras
    3 years ago

    Hi,

     

    As this is a web application, unless the color is explicitly provided in the markup (of the element itself or some parent), I think that you need to check the style of the element you are verifying.

    This is the code to get the style that works for me:

    //-----------------------------------------------------------------------------

// From: http://support.smartbear.com/viewarticle/62849/
function getStyle(element, styleProp) {
  var document, style;
  var result;

  document = element.ownerDocument;

  if (aqObject.IsSupported(document, "defaultView")) {
    // Internet Explorer 9+, Firefox, Chrome, Safari, Opera
    style = document.defaultView.getComputedStyle(element, "");
    if (aqObject.IsSupported(style, styleProp))
      result = eval(aqString.Format("style.%s", styleProp));
    else if (aqObject.IsSupported(style, "getPropertyValue"))
      result = style.getPropertyValue(styleProp);
    else
      Log.Error(aqString.Format("%s element does not support %s style property",
          aqString.Quote(element.Name), aqString.Quote(styleProp)),
          aqString.Format("Element: %s\r\nComputed style:\r\n%s", element.FullName, style.cssText),
          BuiltIn.pmNormal, null, element.Parent.Picture());
  }
  else
    // Internet Explorer 7 - 8
    result = element.currentStyle.getPropertyValue(styleProp);

  return result;
}
//-----------------------------------------------------------------------------

     

    element parameter is web page element for which you are getting its style.

    styleProp is a name of the style you are looking for.

    For example:

    strFontSize = getStyle(oCell, "Font-size");
    strFontColorAct = getStyle(oCell, "Color");
    strBGColorAct = getStyle(oCell, "backgroundColor");

     

  • sedens's avatar
    sedens
    3 years ago

    Thank you! I found it, it was another child element that had the background color. Inspecting the element in the developer tools showed there were two different elements for the same field. Just needed to map to the correct element. 

  • SBegley's avatar
    SBegley
    Staff
    3 years ago

    Hi sedens 

     

    I hope you are keeping well.

     

    Yes there is the following TextColor Property which you could use to assess the colour of the text;

    https://support.smartbear.com/testcomplete/docs/reference/user-forms/properties/textcolor.html

     

    As per the documentation this will give you  "An integer value that specifies the needed color" which you could check against to see if text is red or black.

     

    We also have the following guide which contains further information on working with colours 

    https://support.smartbear.com/testcomplete/docs/scripting/colors.html

     

    Please let me know if this resolves your query or if you have any additional questions.

     

    Thanks,

    Shane

  • AlexKaras's avatar
    AlexKaras
    Champion Level 3
    3 years ago

    Hi,

     

    As this is a web application, unless the color is explicitly provided in the markup (of the element itself or some parent), I think that you need to check the style of the element you are verifying.

    This is the code to get the style that works for me:

    //-----------------------------------------------------------------------------

// From: http://support.smartbear.com/viewarticle/62849/
function getStyle(element, styleProp) {
  var document, style;
  var result;

  document = element.ownerDocument;

  if (aqObject.IsSupported(document, "defaultView")) {
    // Internet Explorer 9+, Firefox, Chrome, Safari, Opera
    style = document.defaultView.getComputedStyle(element, "");
    if (aqObject.IsSupported(style, styleProp))
      result = eval(aqString.Format("style.%s", styleProp));
    else if (aqObject.IsSupported(style, "getPropertyValue"))
      result = style.getPropertyValue(styleProp);
    else
      Log.Error(aqString.Format("%s element does not support %s style property",
          aqString.Quote(element.Name), aqString.Quote(styleProp)),
          aqString.Format("Element: %s\r\nComputed style:\r\n%s", element.FullName, style.cssText),
          BuiltIn.pmNormal, null, element.Parent.Picture());
  }
  else
    // Internet Explorer 7 - 8
    result = element.currentStyle.getPropertyValue(styleProp);

  return result;
}
//-----------------------------------------------------------------------------

     

    element parameter is web page element for which you are getting its style.

    styleProp is a name of the style you are looking for.

    For example:

    strFontSize = getStyle(oCell, "Font-size");
    strFontColorAct = getStyle(oCell, "Color");
    strBGColorAct = getStyle(oCell, "backgroundColor");

     

    • sedens's avatar
      sedens
      Contributor
      3 years ago

      Thank you, that worked for the most part. I can retrieve the correct font-size, font-name, color but for some reason it will not retrieve the background color of the text. It returns rgba(0, 0, 0, 0) each time. I've tried both "background" and "background-color" as the styleProp but still returns rgba(0, 0, 0, 0).

       

      Any other ideas would be appreciated!

      • AlexKaras's avatar
        AlexKaras
        Champion Level 3
        3 years ago

        Hi,

         

        And what is the actual background color?

        rgba(0, 0, 0, 0) corresponds to black.

         

  • sedens's avatar
    sedens
    Contributor
    3 years ago

    The color is shown as this in the source:

    style="background-color: rgb(255, 255, 0);"

     

    This color corresponds to yellow. 

    • AlexKaras's avatar
      AlexKaras
      Champion Level 3
      3 years ago

      Maybe you need to work with some other element? Parent or child?

      Example lines in my message are real ones and provided me with expected values for background color.

       

      P.S. Almost sure in this:

      As per https://rgbacolorpicker.com/rgba-to-hex

      rgba(0,0,0,0) is completely transparent black. So the yellow that you see is most probably provided by some other element.

       

      • sedens's avatar
        sedens
        Contributor
        3 years ago

        Thank you! I found it, it was another child element that had the background color. Inspecting the element in the developer tools showed there were two different elements for the same field. Just needed to map to the correct element.