5) a) Bitmap Checkpoint for Object / Window using Selenium
What is a Bitmap Checkpoint?
A Bitmap Checkpoint is used to verify the visual appearance of an object or window by comparing
it with a previously saved image (bitmap).
It checks UI appearance, not functionality
Used to detect UI changes like:
o Alignment issues
o Missing buttons
o Color / layout changes
🔹 Bitmap Checkpoint in Selenium IDE
Selenium IDE supports bitmap (visual) checkpoints using Screenshot comparison commands.
Common Commands:
assertScreenshot
verifyScreenshot
assertElementScreenshot
(i) Bitmap Checkpoint for Window
🔸 Aim
To verify whether the entire web page (window) appears the same as expected.
🔸 Steps (Selenium IDE)
1. Open Selenium IDE
2. Create a new project
3. Set Base URL
4. Click Record
5. Open the application page
6. Add the command:
7. assertScreenshot | window | homepage
8. Stop recording
9. Run the test case
➡ Selenium IDE captures the current window image and compares it with the stored bitmap.
(ii) Bitmap Checkpoint for Object (Element)
🔸 Aim
To verify the appearance of a specific web element (button, logo, image, etc.)
🔸 Steps
1. Open Selenium IDE
2. Start recording
3. Right-click on the required object
4. Choose Show all available commands
5. Select assertElementScreenshot
6. Example command:
7. assertElementScreenshot | id=logo | logo_image
8. Stop recording
9. Execute test
➡ Selenium IDE compares the element’s current image with the saved bitmap.
🔹 Example
Command Table
Command Target Value
Open /
assertScreenshot window homepage
assertElementScreenshot id=loginBtn login_button
🔹 Advantages of Bitmap Checkpoint
✔ Detects UI changes
✔ Useful for visual regression testing
✔ Ensures consistent UI appearance
🔹 Limitations
Sensitive to screen resolution
Minor UI changes may fail test
Not suitable for dynamic content
B)
Bitmap Checkpoint for Screen Area using Selenium IDE
Introduction
A Bitmap Checkpoint for Screen Area is used to verify a specific portion of the web page (not the
full window and not just one element) by comparing its visual appearance with a previously stored
bitmap image.
It helps in validating UI regions such as banners, headers, menus, or panels.
Aim
To verify the visual appearance of a selected screen area using a bitmap checkpoint in Selenium IDE.
Pre-requisites
Selenium IDE installed
Web application URL
Stable screen resolution and browser zoom
Execution Steps
1. Open Selenium IDE.
2. Create a New Project and set the Base URL.
3. Click on the Record button.
4. Open the required web page.
5. Right-click on the page near the required screen area.
6. Select Show all available commands.
7. Choose assertScreenshot command.
8. Provide the target as screen coordinates or area reference.
9. Give a meaningful image name (e.g., header_area).
10. Stop recording and run the test case.
Example Selenium IDE Command
assertScreenshot | css=body | screen_area
(or)
assertScreenshot | window | banner_section
The selected screen area is captured and stored as a bitmap image during the first run.
Diagram / Screenshot Explanation
Selenium IDE captures only the selected region of the screen as a bitmap image.
During execution, the current screen area is compared with the stored image.
If both images match → Test Pass
If any visual difference is detected → Test Fail
Advantages
Useful for validating UI sections
Detects unintended visual changes
Helps in visual regression testing
Limitations
Sensitive to resolution and zoom level
Minor UI changes may fail the test
Not suitable for dynamic or animated content
Result
Thus, the bitmap checkpoint for screen area was successfully implemented using Selenium IDE.