Create and verify a simple testing portfolio webpage

Preconditions (2)

Step 1: Open a new HTML file in the editor

Step 2: Create a webpage with a header titled 'My Testing Portfolio'

Step 3: Add a section with a list of three testing projects, each with a project name and a short description

Step 4: Add a footer with contact information

Step 5: Save the file as 'portfolio.html'

Step 6: Open 'portfolio.html' in the web browser

Step 7: Verify the header text is exactly 'My Testing Portfolio'

Step 8: Verify there are exactly three projects listed

Step 9: Verify each project has a name and description

Step 10: Verify the footer contains contact information

✅ Expected Result: The webpage displays a header 'My Testing Portfolio', three projects each with name and description, and a footer with contact info

Automation Requirements - Selenium with Python

Assertions Needed:

Header text equals 'My Testing Portfolio'

Exactly three project items are present

Each project item contains a project name and description

Footer contains contact information text

Best Practices:

Use explicit waits to ensure elements are loaded

Use semantic locators like By.TAG_NAME, By.CLASS_NAME

Organize code with setup and teardown methods

Use clear assertion messages

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
import unittest

class TestPortfolioPage(unittest.TestCase):
    def setUp(self):
        self.driver = webdriver.Chrome()
        self.driver.get('file:///path/to/portfolio.html')  # Update path accordingly
        self.wait = WebDriverWait(self.driver, 10)

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

        # Wait for header and verify text
        header = wait.until(EC.visibility_of_element_located((By.TAG_NAME, 'h1')))
        self.assertEqual(header.text, 'My Testing Portfolio', 'Header text does not match')

        # Find project list container
        projects = driver.find_elements(By.CLASS_NAME, 'project')
        self.assertEqual(len(projects), 3, 'There should be exactly 3 projects')

        # Verify each project has name and description
        for i, project in enumerate(projects, start=1):
            name = project.find_element(By.CLASS_NAME, 'project-name').text
            desc = project.find_element(By.CLASS_NAME, 'project-desc').text
            self.assertTrue(name.strip(), f'Project {i} name is empty')
            self.assertTrue(desc.strip(), f'Project {i} description is empty')

        # Verify footer contact info
        footer = driver.find_element(By.TAG_NAME, 'footer')
        self.assertIn('contact', footer.text.lower(), 'Footer does not contain contact information')

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

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

This test script uses Selenium with Python's unittest framework.

setUp: Opens the browser and loads the local portfolio HTML file.

test_portfolio_content: Waits for the header and checks its text. Finds all project elements by class name 'project' and asserts there are exactly three. For each project, it checks that the name and description elements are not empty. Finally, it checks the footer contains the word 'contact' to confirm contact info is present.

tearDown: Closes the browser after the test.

This structure ensures the test is clear, waits for elements properly, and uses semantic locators for maintainability.

Common Mistakes - 3 Pitfalls

Using hardcoded sleep instead of explicit waits

Using brittle XPath selectors that break easily

Not verifying all required elements (e.g., missing project descriptions)

Bonus Challenge

Now add data-driven testing with 3 different portfolio HTML files, each with different project details

Show Hint