Visual Testing: How to Verify Toggle Colors on Real Devices with Appium and Python

Visual Testing: How to Verify Toggle Colors on Real Devices with Appium and Python

In this blog, we’ll explore how to verify toggle colors on real Android and iOS devices using Appium and Python—for visual testing, a practical guide for mobile automation testers who want to ensure their apps don’t just work, but look right too.

We’ll dive into:

  • Why is color detection essential in domains like e-commerce, healthcare, gaming, and automotive?
  • Three powerful techniques for verifying toggle states:
    • Accessibility Identifiers
    • Image Comparison
    • Pixel-Level RGB Color Extraction

Step-by-step examples for both Android and iOS devices.

Importance of Color Detection in Visual Testing

Color detection plays a crucial role in image verification across various domains, where visual accuracy directly impacts user experience, brand integrity, and functionality. Below are some key applications:

So, let’s dive into verifying toggle colors on Android and iOS app step by step

Set your system for Appium and Python Visual Testing for real Android and IOS testing

For Android testing configuration, use the blog below for reference
How to configure Windows Desktop for Android App Automation using Appium

For IOS testing configuration, use the blog below for reference
How to configure macOS for iOS Mobile App Automation using Appium

Using the Accessibility Identifiers: Utilizing accessibility identifiers (e.g., accessibility_id, content-desc, checked attribute from XPath) to determine the toggle’s state. These identifiers provide semantic information about the element, which is more reliable than relying solely on visual appearance.

Using Image Comparison: Capture a screenshot of the toggle in its “On” state and another in its “Off” state. Then, compare the screenshot of the actual toggle with the stored “On” and “Off” images.

img1 = imageio.imread(ideal_image_path)
img2 = imageio.imread(actual_image_path_repo_root)
if img1.shape != img2.shape:
  	 print("Both images should have the same dimensions")
  	 raise selenium.common.NoSuchElementException('No such element present')
diff = np.sum(np.abs(img1 - img2))
avg = diff / (img1.shape[0] * img1.shape[1] * img1.shape[2])
percentage = (avg / 255) * 100
	
if percentage == 0:
  	 return True
else:
 	  return False

In the above snippet, using opencv library from Python we are comparing the images first using the size of both the images, then calculating the average difference per Pixel for both the images.

Using Pixel Color Extraction:

The RGB (Red, Green, Blue) color model is one of the most widely used systems in digital image processing and display technologies. It is an additive color model, meaning it combines the intensity of these three primary colors(RGB) to create a broad spectrum of colors. Each color in this model is represented as a combination of Red, Green, and Blue values, ranging from 0 to 255 for 8-bit images.

  • For example:
    • (255, 0, 0) represents pure red.
    • (0, 255, 0) represents pure green.
    • (0, 0, 255) represents pure blue.
    • (255, 255, 255) represents white.
    • (0, 0, 0) represents black.

How RGB Detection Works:

RGB detection involves extracting the Red (R), Green (G), and Blue (B) intensity values of individual pixels from digital media such as images or videos. Each pixel acts as a building block of the media, storing its color as a combination of these three values.

  1. For image comparison in Python install pillow package using – from PIL import Image
  2. Load the image – image = Image.open(‘example.jpg’)
  3. Access the pixel at any location – rgb = image.getpixel((50, 50))

This will return the RGB value for that particular point. Open this website https://www.rapidtables.com/web/color/RGB_Color.html. Here you can find the color type according to RGB values, like if this method is returning the (255,215,0), which means it’s GOLD color.

Visual Testing

By entering these values, you can find the color. Also like by entering 0,0,0 you can find the black color.

Visual Testing

For demo purposes, let’s open the settings of android→connections→wifi toggle and check whether it’s turned ON or OFF.

Appium and Python Visual Testing

Use code below for reference of color detection on a real Android device (Python Visual Testing)

Pre-setup for Android Device

  1. Start Appium server using the below command, or you can use Appium GUI as well
    • appium -a 127.0.0.1 -p 4723
  2. Check connected adb devices using the below command, and you should be able to see a  connected device with the  device UDID
    • adb devices
  3. pip install Pillow
import time
from PIL import Image
import io

def app_init_for_android():
   from appium import webdriver
   from appium.webdriver.common.appiumby import AppiumBy

   desired_caps = {
       "appium:deviceName": "my_samsung",
       "appium:udid": "R9ZRskddjk0CHT",
       "platformName": "Android",
       "appium:platformVersion": "13",
       "appium:appPackage": "com.android.settings",  # Settings app package
       "appium:appActivity": "com.android.settings.Settings",  # Main Settings activity
       "automationName": "UiAutomator2"
   }

   # Initialize the Appium driver for the real iOS device
   driver = webdriver.Remote('http://127.0.0.1:4723', desired_caps)
   time.sleep(5)

   driver.find_element(
       AppiumBy.XPATH,
       "//androidx.recyclerview.widget.RecyclerView[@resource-id='com.android.settings:id/recycler_view']/android.widget.LinearLayout[2]"
   ).click()
   time.sleep(5)

   # To install pillow package use: pip install pillow
   element_1 = driver.find_element(AppiumBy.XPATH, "//android.widget.Switch[@content-desc='Wi-Fi']")
   time.sleep(5)
get_rgb_colors(element_1)
def get_rgb_colors(locator):
   element_location = locator.location
   element_size = locator.size

   screenshot = driver.get_screenshot_as_png()
   screenshot_image = Image.open(io.BytesIO(screenshot))
   width, height = screenshot_image.size
   center_x = width // 2
   center_y = height // 2 
   background_color = screenshot_image.getpixel((center_x , center_y))
   return background_color

Let’s break down the code

  • Install the required packages image, io, and time
  • Initialize the Android driver using the correct capability JASON
  • Inspect the locators to navigate to the wi-fi toggle present page
  • Find the center coordinates of the toggle using the locators method
  • Passing those coordinates to the getpixel method will give us the RGB value of that particular pixel
  • Open the website https://www.rapidtables.com/web/color/RGB_Color.html
  • Here you can find the color type according to RGB values

Use the code below for reference of colour detection on a real iOS device (Appium Visual Testing)

Pre-setup for iOS Device

  1. Start Appium server using the below command, or you can use Appium GUI as well
    • appium -a 127.0.0.1 -p 4723
  2. pip install Pillow

We have to use build command to build our project and start our testing on real iOS. For IOS id→xcode→Window→device and simulators→Identifier
(e.g. –xcodebuild -project (path_for_WebDriverAgent.xcodeproj) -scheme WebDriverAgentRunner -destination ‘platform=iOS,id=(id_of_connected_ios) test)

Appium and Python

Consider the code below for color detection on iOS automation

import time
from PIL import Image
import io

def app_init_for_ios():
   from appium import webdriver
   from appium.webdriver.common.appiumby import AppiumBy

desired_caps =
{
   "platformName": "iOS",
   "platformVersion": "ios_devie_version",
   "deviceName": "ios_device_name",
   "udid": "ios_device_udid",
   "bundleId": "com.apple.Preferences",
   "automationName": "XCUITest",
   "xcodeSigningId": "iPhone Developer",
   "xcodeOrgId": "your_xcode_id",
   "autoAcceptAlerts": true,
   "newCommandTimeout": 10000
}

   # Initialize the Appium driver for the real iOS device
   driver = webdriver.Remote('http://127.0.0.1:4723', desired_caps)
   time.sleep(5)
driver.find_element(
       AppiumBy.XPATH,
       "//XCUIElementTypeStaticText[@name="WIFI"]"
   ).click()
   time.sleep(5)

   # To install pillow package use: pip install pillow
   element_1 = driver.find_element(AppiumBy.XPATH, "//XCUIElementTypeSwitch[@name="Wi‑Fi"]")
   time.sleep(5)
get_rgb_colors(element_1)
def get_rgb_colors(locator):
   element_location = locator.location
   element_size = locator.size

   screenshot = driver.get_screenshot_as_png()
   screenshot_image = Image.open(io.BytesIO(screenshot))
   width, height = screenshot_image.size
   center_x = width // 2
   center_y = height // 2 
   background_color = screenshot_image.getpixel((center_x , center_y))
   return background_color

Let’s break down the code – If you see the code, it’s similar to the Android color verification code The two key differences are like first one is the capabilities are different for iOS, and the locator finding strategy is different.

Conclusion

1. Accessibility Identifiers:

This is the most straightforward and reliable approach. Mobile apps often include labels or attributes (like accessibility_id or content-desc) that indicate the current state of a toggle. This method requires no image processing, as it leverages metadata provided by developers—making it both efficient and robust.

2. Image Comparison:

This technique involves capturing screenshots of the toggle in both “on” and “off” states and comparing them to reference images. Tools like OpenCV or scikit-image help analyze visual similarity, accounting for minor differences due to lighting or device variations. It’s especially useful when you need to validate the UI’s visual accuracy.

3. Pixel Color Extraction:

By extracting specific RGB values from toggle regions using libraries like Pillow, this method offers precision at the pixel level. It’s ideal for verifying exact color codes, and the extracted values can be cross-referenced with tools like RapidTables for further validation.
While Android and iOS may differ slightly in setup and element location, the core strategies remain consistent. Depending on your testing needs, you can use these methods individually or in combination to ensure your app displays the correct colors—ultimately contributing to a seamless and visually consistent user experience.

Click here to read more blogs like this.

How to configure Windows Desktop for Android App Automation using Appium?

How to configure Windows Desktop for Android App Automation using Appium?

Setting up Appium for testing on real devices for android app automation can be tricky. Many testers struggle with installing the right software, setting environment variables, and connecting their devices properly. These issues can cause a lot of frustration and slow down the testing process. 

In this blog, we’ll make it easy for you. We’ll walk you through each step, from installing necessary software like the Java Development Kit (JDK) and Android Studio, to setting up your Android device for android app automation. We’ll also show you how to install Appium, configure it correctly, and use tools like Appium Inspector to interact with your app. 

By following this simple guide, you’ll be ready to test your mobile apps on real devices quickly and efficiently. 

What is Appium testing in Android App Automation

Appium is an open-source automation tool used for testing mobile applications. It allows testers to automate native, hybrid, and mobile web applications on iOS and Android platforms using the WebDriver protocol. Appium provides a unified API (Application Programming Interface) that allows you to write tests using your preferred programming language (such as Java, Python, JavaScript, etc.) and test frameworks. It supports a wide range of automation capabilities, including gestures, device rotation, multi-touch actions, and handling various types of mobile elements. Appium enables cross-platform testing, where the same tests can be executed on multiple devices, operating systems, and versions, providing flexibility and scalability in mobile app testing or android testing. 

Advantages of Using Appium in Android App Automation: 

  1. Appium is an open source and free tool available for testers and developers. 
  1. Appium supports both real device and emulators/simulators testing.
  1. Appium is compatible with popular testing frameworks and tools, making it easy to integrate into existing testing workflows and environments.

Advantages of using real device for Android App Automation: 

  1. Real device allows you to check your application under different network like 2G,3G,4G and 5G.
  1. Using real device we can test hardware specific features like GPS, fingerprint and camera.
  1. Using a real device provides more accuracy by taking some factors into consideration like device battery, processor, memory and device size. 

Step→1 

Install Java Development Kit (JDK): 

  • Set JAVA_HOME as environment variable.
Step-1-1-Image Android App Testing
  • Also add jdk’s bin folder path in Path environment variable.
Step-1-2-Image Android app

Step→2 

Install Android Studio: 

  • After successful installation now we will set the ANDROID_HOME environment variable.
Step-2-1-Image
  • Also put platform tools path in path variable.
Step-2-2-Image automation
  • Now open cmd and run adb  in command line and it should get executed successfully. 
Step-2-3-Image

Step→3 

Install Node.js: 

  • If you haven’t already installed Node.js, you can download and install it from the official Node.js website. 
  • Once the installation is complete check node version using command node -v also npm -v.

Step→4 

Install Appium for real device testing using command npm install -g appium in command line:

  • Verify appium version using appium -v  in command line.
  • Now run the command appium  in command line using this command your server should start and we are ready to do testing.
Step-4-1-Image Android app automation

Step→5

Install Appium for real device testing using command npm install -g appium in command line:

  • Now run appium-doctor  in command line to check weather every dependency required for appium has been installed successfully.
Step-5-1-Image Android app automation

Step→6 

Now we need to install UIAutomator driver which allows to interact with the UI elements of Android apps during automated testing. It provides improved stability and performance compared to the original UIAutomator driver. To install it use this command appium driver install uiautomator2  in command line.

Step→7 

Now for real device testing we also need to make some changes on device side too so we need to enable  developer option for this:

  • Open setting and click on about phone.
Stedp-7-1-Image
  • Click on software information.
  • Click on Build number 5 times to enable developer mode.
Step-7-2-Image
  • Now once this option is enabled we need to enable usb debugging option as well.
Step-7-3-Image Android App Automation

Note: Above information to enable the developer mode its for SAMSUNG device it will be different for other device type.

What is Appium Inspector in Android App Testing?

Appium inspector is a tool which provides testers with a graphical user interface  for inspecting and interacting with elements within mobile applications.

Step→8 

Install appium inspector for windows using below link  appium inspector.

Step→9

Start the appium session using command appium -a 127.0.0.1 -p 4723

Step-9-1-Image
  • Alternatively we can use appium GUI  Appium GUI to start the server 

i. Enter the host as 127.0.0.1 

ii. Enter port number as 4723

Step-9-2-Image Android

iii. If you are using Appium GUI for start server.we need to also add remote path for Appium inspector

Step-9-3-Image

Step→10

Open the appium inspector enter remote host as 127.0.0.1 and port as 4723.

Step-10-1-Image

Configuring Desired Capabilities using Appium for Android App Automation: 

When setting up automation with Appium for Android devices, it’s crucial to define the desired capabilities appropriately. These capabilities act as parameters that instruct Appium on how to interact with the device and the application under test. 

deviceName: This parameter specifies the name of the device being used for testing. It’s essential to provide an accurate device name to ensure that Appium connects to the correct device. 

udid: The Unique Device Identifier (UDID) uniquely identifies the device among all others. Appium uses this identifier to target the specific device for automation. Make sure to input the correct UDID of the device you intend to automate. 

platformName: Here, the platform name is set to “Android,” indicating that the automation is targeted towards the Android platform. 

platformVersion: This parameter denotes the version of the Android platform installed on the device. 

automationName: Appium supports multiple automation frameworks, and here, “UiAutomator2” is specified as the automation name. UiAutomator2 is a widely used automation framework for testing Android apps. 

appPackage: The app package is the unique identifier for the application under test. It’s essential for Appium to know which app to launch and interact with during automation.  

appActivity: This parameter specifies the main activity of the application that needs to be launched. 

  • For device udid run adb device command  in command line 
  • For device name and version we can check software information from android settings 
  • For application package and appActivity we can download Apk Info application from play store 
appActivity-1 Android App
  • For application bundle Id and App activity  
appActivity-2
appActivity-3

Step→11

Once you enter the remote host and port number enter below capabilities to open calculator application from your android devic for android testing.

The images below illustrate how I started the Appium server using the Appium GUI and successfully opened the Calculator app in Appium Inspector with the specified capabilities and now it’s ready to inspect your app to prepare for automated testing efficiently. 

Step-11-1-Image app automation
Step-11-2-Image Android app automation

Conclusion:

Setting up Appium for testing on real Android devices can initially seem daunting due to the numerous steps involved and the technical nuances of configuring software and environment variables. However, by following this step-by-step guide, the process becomes manageable and straightforward.  

Investing the time and effort to configure Appium correctly pays off by significantly enhancing the efficiency and effectiveness of your mobile testing strategy. This setup not only improves the

Click here for more blogs of software testing and test automation.