Usability Testing for Website Navigation

Preconditions (2)

Step 1: Open the website homepage

Step 2: Locate the main navigation menu

Step 3: Click on the 'Products' menu item

Step 4: Verify that the 'Products' page loads within 3 seconds

Step 5: Use the keyboard tab key to navigate through the menu items

Step 6: Check that each menu item is highlighted when focused

Step 7: Click on the 'Contact Us' link in the footer

Step 8: Verify that the contact form is visible and accessible

Step 9: Attempt to submit the contact form without filling required fields

Step 10: Verify that appropriate error messages are displayed

Step 11: Fill in the required fields with valid data

Step 12: Submit the contact form

Step 13: Verify that a success message is displayed confirming submission

✅ Expected Result: The website navigation is easy to use with visible focus states, pages load quickly, error messages appear for invalid input, and the contact form submits successfully with confirmation.

Automation Requirements - Selenium with Python

Assertions Needed:

Page loads within 3 seconds

Menu items highlight on keyboard focus

Error messages appear when submitting empty form

Success message appears after valid form submission

Best Practices:

Use explicit waits to handle page load and element visibility

Use keyboard actions to simulate tab navigation

Use clear and maintainable locators (id, name, CSS selectors)

Structure code with setup and teardown for browser management

Automated Solution

Testing Fundamentals

from selenium 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
from selenium.webdriver.common.keys import Keys
import time
import unittest

class UsabilityTest(unittest.TestCase):
    def setUp(self):
        self.driver = webdriver.Chrome()
        self.driver.maximize_window()
        self.wait = WebDriverWait(self.driver, 10)

    def test_navigation_and_contact_form(self):
        driver = self.driver
        wait = self.wait

        # Open homepage
        driver.get('https://example.com')

        # Verify main navigation menu is present
        nav_menu = wait.until(EC.visibility_of_element_located((By.ID, 'main-nav')))

        # Click 'Products' menu item and measure load time
        products_link = nav_menu.find_element(By.LINK_TEXT, 'Products')
        start_time = time.time()
        products_link.click()
        wait.until(EC.url_contains('/products'))
        load_time = time.time() - start_time
        self.assertLessEqual(load_time, 3, f"Products page load time too long: {load_time}s")

        # Keyboard navigation through menu items
        driver.get('https://example.com')  # back to homepage
        nav_menu = wait.until(EC.visibility_of_element_located((By.ID, 'main-nav')))
        nav_menu.click()  # focus on nav menu

        # Press tab to focus first menu item
        nav_menu.send_keys(Keys.TAB)

        # Check focus highlight on each menu item
        menu_items = nav_menu.find_elements(By.TAG_NAME, 'a')
        for i, item in enumerate(menu_items):
            item.send_keys(Keys.TAB)
            focused = driver.switch_to.active_element
            self.assertEqual(focused, item, f"Menu item {i} is not focused on tab")
            # Check CSS class or style for highlight (example: 'focus' class)
            classes = focused.get_attribute('class')
            self.assertIn('focus', classes, f"Menu item {i} does not have focus highlight")

        # Click 'Contact Us' link in footer
        footer = wait.until(EC.visibility_of_element_located((By.TAG_NAME, 'footer')))
        contact_link = footer.find_element(By.LINK_TEXT, 'Contact Us')
        contact_link.click()

        # Verify contact form is visible
        contact_form = wait.until(EC.visibility_of_element_located((By.ID, 'contact-form')))

        # Submit empty form
        submit_button = contact_form.find_element(By.CSS_SELECTOR, 'button[type=submit]')
        submit_button.click()

        # Verify error messages for required fields
        error_messages = wait.until(EC.visibility_of_all_elements_located((By.CLASS_NAME, 'error-message')))
        self.assertTrue(len(error_messages) > 0, "No error messages shown for empty form submission")

        # Fill required fields
        contact_form.find_element(By.NAME, 'name').send_keys('Test User')
        contact_form.find_element(By.NAME, 'email').send_keys('testuser@example.com')
        contact_form.find_element(By.NAME, 'message').send_keys('This is a test message.')

        # Submit form
        submit_button.click()

        # Verify success message
        success_message = wait.until(EC.visibility_of_element_located((By.CLASS_NAME, 'success-message')))
        self.assertIn('Thank you', success_message.text, "Success message not displayed after form submission")

    def tearDown(self):
        self.driver.quit()

if __name__ == '__main__':
    unittest.main()

This test script uses Selenium with Python's unittest framework to automate usability testing steps.

Setup opens a Chrome browser and maximizes it for visibility.

The test method performs these actions:

Opens the homepage and waits for the main navigation menu to appear.
Clicks the 'Products' link and measures page load time, asserting it is under 3 seconds.
Uses keyboard tab key to navigate through menu items, checking that each item receives focus and has a visible highlight (via CSS class).
Clicks the 'Contact Us' link in the footer and waits for the contact form to appear.
Attempts to submit the form empty and verifies error messages appear.
Fills required fields with valid data and submits the form.
Verifies a success message confirms the submission.

Explicit waits ensure elements are ready before interacting, avoiding flaky tests.

Teardown closes the browser after the test.

Common Mistakes - 4 Pitfalls

Using fixed sleep times instead of explicit waits

Using brittle XPath locators that break easily

Not simulating keyboard navigation for accessibility testing

Not verifying error messages when submitting empty forms

Bonus Challenge

Now add data-driven testing with 3 different sets of valid contact form inputs.

Show Hint