Verify application UI and functionality across multiple device types and screen sizes

Preconditions (3)

Step 1: Open the application on the smartphone device

Step 2: Verify that the main menu is visible and accessible

Step 3: Navigate to the settings page and verify all controls are displayed correctly

Step 4: Repeat steps 1-3 on the tablet device

Step 5: Repeat steps 1-3 on the desktop device

✅ Expected Result: The application UI elements are correctly displayed and functional on all devices without layout issues or missing controls

Automation Requirements - Selenium WebDriver with Appium for mobile devices

Assertions Needed:

Verify visibility of main menu element

Verify accessibility of main menu

Verify all controls on settings page are displayed

Verify no layout breakage or overlapping elements

Best Practices:

Use explicit waits to handle element loading

Use device-specific capabilities in Appium to target different devices

Use Page Object Model to separate page structure from test logic

Avoid hardcoded waits and use responsive locators

Automated Solution

Testing Fundamentals

from appium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

class MainPage:
    def __init__(self, driver):
        self.driver = driver
        self.menu_locator = (By.ID, "main-menu")

    def is_menu_visible(self):
        return WebDriverWait(self.driver, 10).until(
            EC.visibility_of_element_located(self.menu_locator)
        )

class SettingsPage:
    def __init__(self, driver):
        self.driver = driver
        self.controls_locator = (By.CLASS_NAME, "settings-control")

    def are_controls_displayed(self):
        controls = WebDriverWait(self.driver, 10).until(
            EC.presence_of_all_elements_located(self.controls_locator)
        )
        return all(control.is_displayed() for control in controls)


def test_app_on_device(device_capabilities):
    driver = webdriver.Remote('http://localhost:4723/wd/hub', device_capabilities)
    try:
        main_page = MainPage(driver)
        assert main_page.is_menu_visible(), "Main menu is not visible"

        # Navigate to settings page
        settings_button = WebDriverWait(driver, 10).until(
            EC.element_to_be_clickable((By.ID, "settings-button"))
        )
        settings_button.click()

        settings_page = SettingsPage(driver)
        assert settings_page.are_controls_displayed(), "Settings controls are not all displayed"

    finally:
        driver.quit()


if __name__ == "__main__":
    devices = [
        {"platformName": "Android", "deviceName": "Android_Smartphone", "app": "/path/to/app.apk"},
        {"platformName": "iOS", "deviceName": "iPad_Tablet", "app": "/path/to/app.app"},
        {"platformName": "Windows", "deviceName": "Desktop", "app": "C:/path/to/app.exe"}
    ]

    for device in devices:
        test_app_on_device(device)

This test script uses Appium with Selenium WebDriver to automate testing on multiple devices.

The MainPage and SettingsPage classes follow the Page Object Model to keep locators and actions organized.

Explicit waits ensure elements are loaded before interacting or asserting visibility.

The test_app_on_device function runs the test steps on each device using its capabilities.

Assertions check that the main menu is visible and all settings controls are displayed, matching the manual test case expectations.

Finally, the driver quits to clean up after each test run.

Common Mistakes - 3 Pitfalls

Using hardcoded sleep() calls instead of explicit waits

Using device-specific locators that do not work across devices

Not quitting the driver after each test

Bonus Challenge

Now add data-driven testing with 3 different device configurations including different OS versions and screen sizes

Show Hint