There are cases where the colors of text and images, such as in the picture below, need to be checked to ensure they appear as intended.
While MagicPod does not currently have a command to check a color by its hex code directly, you can accomplish this using the following alternative methods.
- Use the "Assert with AI" command
- Set the exclusion areas in the "Assert there is no visual diff" command
- Use the "If UI element's attribute satisfies condition" command
Use the "Assert with AI" command
You can perform color testing with the "Assert with AI" command (AI Assertion).
Suppose you have a case where you want to verify that the "New" button is blue and the "Details" button is green in a UI like this.
Add the "Assert with AI" command and write "The New button is blue and the Details button is green."
After test execution, you can check the AI's thought process that determined whether the check succeeded or failed in the log.
Assertion passed: I need to verify whether the 'New' button is blue and the 'Details' button is green.
Looking at the image:
1) In the top right corner, there is a button labeled 'Add New', and it is clearly displayed in blue color.
2) In the rightmost column labeled 'Details', there are three buttons corresponding to each product row (Strawberry, Grape, Banana), and all three of these buttons are displayed in green color.
Both conditions specified in the criteria are met: the New button is blue, and the Details buttons are green.For detailed usage instructions, please refer to the help page: AI Assertion
Set the exclusion areas in the "Assert there is no visual diff" command
By specifying areas to exclude from the diff check, you can limit the visual diff check to targeted area.
Reference: Set a diff threshold and exclusion areas
Use the "If UI element's attribute satisfies condition" command
When the UI element has a color information, you can check it with the "If UI element's attribute satisfies condition" command.
The figures below show examples of the command setup.
（Example1）When the color attribute is set
（Example2）When the class attribute contains color information
For example, if you know that the alert-message class is always assigned with the color #ff0000, you can set up the command as follows: