QA Test Plan: Simple To-Do List Application

1. Introduction

This document outlines the testing strategy for the Simple To-Do List application. This is a basic web application that allows users to add, delete, and mark tasks as complete. The application is built with HTML, CSS, and JavaScript, and it uses local storage to persist data.

2. Scope

This test plan covers the functional and UI testing of the To-Do List application on the Google Chrome browser (latest version) on macOS.

3. Test Approach

• Manual Testing: All test cases will be executed manually.
• Functional Testing: To verify that all features work as expected.
• UI Testing: To ensure the application's user interface is clean, consistent, and user-friendly.

4. Features to be Tested

• Adding a new task.
• Marking a task as complete.
• Un-marking a task as complete.
• Deleting a task.
• Persisting tasks after reloading the page.
• Handling empty input.

5. Features not to be Tested

• Cross-browser compatibility (testing will only be on Chrome).
• Performance testing.
• Security testing.
• API testing (as there is no API).

6. Tools

• Test Case Management: Google Sheets (or any spreadsheet application).
• Bug Reporting: GitHub Issues (or a simple document).
• Browser: Google Chrome (latest version).

7. Pass/Fail Criteria

• Pass: The actual result matches the expected result.
• Fail: The actual result does not match the expected result.

8. Future QA Considerations

With the current functional test cases passing, here are areas for future quality assurance efforts:

• Exploratory Testing: Engage in unstructured testing to discover unexpected behaviors or issues not covered by formal test cases.
  • Examples: Trying unusual click sequences (e.g., clicking add multiple times rapidly), using keyboard navigation instead of mouse, or interacting with elements in an unexpected order.
• Edge Case / Negative Testing: Test the application's robustness by providing unusual or invalid inputs, or by pushing boundaries.
  • Examples:
    • Input Validation: Entering very long task names (e.g., 1000+ characters), tasks with special characters (e.g., !@#$%^&*()), tasks with only spaces, or empty tasks after initial input.
    • Quantity: Adding a very large number of tasks (e.g., 100, 500, 1000) to observe performance.
    • Rapid Actions: Rapidly adding, deleting, or marking tasks as complete/incomplete.
• UI/UX Review: Conduct a dedicated review of the user interface and overall user experience for intuitiveness, consistency, and visual appeal.
  • Examples: Checking responsiveness on different screen sizes (mobile, tablet, desktop), ensuring consistent styling, verifying clear error messages, and assessing accessibility (e.g., keyboard navigation, screen reader compatibility).
• Expanding Test Cases: Develop additional formal test cases based on new features, identified edge cases, or deeper functional requirements.
  • Examples: Writing test cases for new features like task editing, task categorization, or search functionality if implemented.
• Code Review: Perform a review of the application's source code (index.html, style.css, script.js) for maintainability, best practices, and potential areas of improvement or future bugs.

9. Automated UI Testing with Playwright

To enhance the testing capabilities and build a robust QA portfolio, automated UI testing has been introduced using Playwright. Playwright is a powerful Node.js library that enables reliable end-to-end testing across modern web browsers.

Setup and First Tests:

1. Node.js Environment: Confirmed Node.js (v22.18.0) is installed.
2. Project Initialization: A package.json file was created to manage project dependencies.
3. Playwright Installation: Playwright (@playwright/test) was installed as a development dependency.
4. Browser Binaries: Essential browser binaries (Chromium, Firefox) were installed for cross-browser testing.
5. Test File Creation: A new test file (tests/example.spec.js) was created with two initial automated tests:
   • Verifying the application's title.
   • Verifying the ability to add a new task.
6. Local Server Setup: A simple Python HTTP server was started to serve the application locally for testing (http://localhost:8000).
7. Test Execution: The automated tests were executed using npx playwright test.

Result: Both initial Playwright tests passed successfully, demonstrating the foundational setup for automated UI testing in this project.