Validate Color of an Object

Validate

This theis Coloran example of an Object in Scenario Editor

Use this article when a Scenarioscript Editorthat test needs to confirmdetects the visual color of a pagespecific object. Prefer stable CSS or DOM-based validation when available,object and usethen image-baseduses validationconditional onlystatements whento thecompare renderedit appearanceto a reference color.

Web Designer Script

This is the actualAIQ requirement.

designer

Recommendedtest guidance

script

• Identifyto whetheraccomplish this validation. The script uses the requirementGetCssValue function.

  See getCssValue for more information about the function.

  The example script uses the Appvance demo site. The object that the script is CSSthe value,comparing computedcolor style,of imageis color,a orfooter visualwhich state.

• Use stable locators and validatecontains the objectprice of an item.

  

  Download a copy of this script from: ColorCheckExample.ds

  JS Code

  For reference, this is visiblethe beforecorresponding checkingjava color.

• Accountscript code for themes,the hover/focusColorCheckExample states,test browserscript. differences,
  and

  /**
   anti-aliasing.

• Use* tolerances@aiq.webdesigner
   for* imageThis orscript screenshot-basedrequires AIQ Web Designer
  */
  setShadowDOM(true);
  navigateTo("https://demosite.appvance.net/");
  click(fallback(`div(2, _in(div("product_1"))).xy(0.11, 0.58 )`,
     `div(2, _in(div({'id':'product_1'}))).xy(0.11, 0.58 )`,
     `div("panel-footer text-center").xy(0.11, 0.58 )`,
     `div("$15.99").xy(0.11, 0.58 )`,
     `byXPath("//div[@id='product_1']/div/div[2]").xy(0.11, 0.58 )`,
     `byXPath('//*[@class="panel-footer text-center"]').xy(0.11, 0.58 )`,
     `byXPath('/html/body/div[2]/div/div/div/div[2]/div/div/div[2]').xy(0.11, 0.58 )`,
     `byXPath("id('product_1')/div[@class='panel panel-default']/div[@class='panel-footer text-center']").xy(0.11, 0.58 )`,
     `byJQuery('div[class="row"] > div[class="col-md-3 col-sm-6 col-xs-6 product-list-item"] > div[class="panel panel-default"] > div[class="panel-footer text-center"]').xy(0.11, 0.58 )`,
     `byJQuery('#product_1 > .panel.panel-default > .panel-footer.text-center').xy(0.11, 0.58 )`));
  var FooterColor=getCssValue(byXPath("//div[@class='panel-footer text-center']//span[@class='price selling lead']"), "color");
  log(FooterColor);
  if (FooterColor == "rgb(51, 51, 50)"){
     alert("The color checkscorrespond");
  }
  else when{
     exactalert(“Those pixelsare may vary.
• Capture evidence when a color mismatch indicates a UI regression.

Validation workflow

1. Locatenot the targetdroids objectyou andare confirmlooking thefor");
   }
   

expected state.Read the