# Validate Color of an Object

This is an example of a script that detects the color of a specific object and then uses conditional statements to compare it to a reference color.

### Web Designer Script

This is the AIQ designer test script to accomplish this validation. The script uses the `GetCssValue` function.

See [getCssValue for more information about the function.](https://docs.appvance.net/Content/AIQ/TechRef/TestDesignerAPIRef/API_References_New/General/APIRef_GetCSSValue.htm)

The example script uses the Appvance demo site. The object that the script is the comparing color of is a footer which contains the price of an item.

 ![](https://docs.appvance.net/uploads/images/gallery/2026-07/scaled-1680-/11gopdllupNFwcLT-2d396046a175.png)

Download a copy of this script from: [ColorCheckExample.ds](../../Resources/Scripts/ColorCheckExample.ds)

### JS Code

For reference, this is the corresponding java script code for the ColorCheckExample test script.

<div class="codeSnippet" id="bkmrk-copy-%2F%2A%2A%C2%A0%2A-%40aiq.webd"><div class="codeSnippetBody">```
/**<br></br> * @aiq.webdesigner<br></br> * This script requires AIQ Web Designer<br></br>*/<br></br>setShadowDOM(true);<br></br>navigateTo("https://demosite.appvance.net/");<br></br>click(fallback(`div(2, _in(div("product_1"))).xy(0.11, 0.58 )`,<br></br>   `div(2, _in(div({'id':'product_1'}))).xy(0.11, 0.58 )`,<br></br>   `div("panel-footer text-center").xy(0.11, 0.58 )`,<br></br>   `div("$15.99").xy(0.11, 0.58 )`,<br></br>   `byXPath("//div[@id='product_1']/div/div[2]").xy(0.11, 0.58 )`,<br></br>   `byXPath('//*[@class="panel-footer text-center"]').xy(0.11, 0.58 )`,<br></br>   `byXPath('/html/body/div[2]/div/div/div/div[2]/div/div/div[2]').xy(0.11, 0.58 )`,<br></br>   `byXPath("id('product_1')/div[@class='panel panel-default']/div[@class='panel-footer text-center']").xy(0.11, 0.58 )`,<br></br>   `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 )`,<br></br>   `byJQuery('#product_1 > .panel.panel-default > .panel-footer.text-center').xy(0.11, 0.58 )`));<br></br>var FooterColor=getCssValue(byXPath("//div[@class='panel-footer text-center']//span[@class='price selling lead']"), "color");<br></br>log(FooterColor);<br></br>if (FooterColor == "rgb(51, 51, 50)"){<br></br>   alert("The color correspond");<br></br>}<br></br>else {<br></br>   alert(“Those are not the droids you are looking for");<br></br>}<br></br>
```

 </div> </div><div id="bkmrk-last-updated%3A-februa">---

Last updated: <span class="mc-variable General.NewDateTimeVariable variable">February 25, 2025</span>

If you have any feedback on this topic, please contact us at <documentation@appvance.ai>

</div>