Skip to content

Practice Project Overview

(avr. time for this section: 1 week)

This section brings together everything you've learned by building and testing a complete web application. You'll create a Task Management application and write comprehensive tests using all four frameworks: Cypress, Playwright, Cucumber, and Capybara.

Project Description

You will build a Task Management Application (similar to Trello/Todoist) with the following features:

Core Features

  1. User Authentication
  2. User registration
  3. Login/logout
  4. Password reset

  5. Profile management

  6. Task Management

  7. Create, read, update, delete tasks
  8. Task status (Todo, In Progress, Done)
  9. Task priority (Low, Medium, High)
  10. Due dates

  11. Task descriptions

  12. Project Organization

  13. Create projects
  14. Assign tasks to projects

  15. Project dashboard

  16. Collaboration

  17. Share projects with other users
  18. Assign tasks to team members

  19. Comments on tasks

  20. Search and Filter

  21. Search tasks
  22. Filter by status, priority, due date
  23. Sort tasks

Technology Stack Options

Choose one of the following stacks:

Frontend: React + TypeScript + Vite
Backend: Node.js + Express + PostgreSQL
Testing: Cypress, Playwright, Cucumber (JS)

Full-stack: Ruby on Rails 7
Frontend: Hotwire (Turbo + Stimulus)
Testing: Capybara, Cucumber (Ruby)

Option C: Next.js Full-Stack

Full-stack: Next.js 14 + TypeScript
Database: PostgreSQL with Prisma
Testing: Cypress, Playwright, Cucumber (JS)

Project Structure

React + Node.js Structure

task-manager/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── hooks/
│   │   ├── services/
│   │   └── types/
│   ├── cypress/
│   │   ├── e2e/
│   │   ├── fixtures/
│   │   └── support/
│   └── tests/
│       └── playwright/
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── routes/
│   │   └── middleware/
│   └── tests/
└── features/
    ├── *.feature
    └── step_definitions/

Rails Structure

task-manager/
├── app/
│   ├── controllers/
│   ├── models/
│   ├── views/
│   └── javascript/
├── spec/
│   ├── features/
│   ├── factories/
│   └── support/
└── features/
    ├── *.feature
    └── step_definitions/

Learning Objectives

By completing this project, you will:

  1. Apply Testing Frameworks
  2. Write E2E tests with Cypress
  3. Write cross-browser tests with Playwright
  4. Implement BDD with Cucumber

  5. Create acceptance tests with Capybara

  6. Practice Test Patterns

  7. Page Object Model
  8. Custom commands/helpers
  9. Fixtures and factories

  10. API mocking

  11. Implement CI/CD

  12. GitHub Actions workflows
  13. Parallel test execution

  14. Test reporting

  15. Handle Real-World Scenarios

  16. Authentication flows
  17. CRUD operations
  18. Real-time updates
  19. Error handling

Assessment Criteria

Your project will be evaluated on:

Criteria Weight
Test coverage (all features tested) 25%
Code quality (clean, maintainable) 20%
Test organization (page objects, helpers) 20%
CI/CD implementation 15%
Documentation 10%
Edge cases and error handling 10%

Timeline

Phase Duration Deliverables
Setup 1 day Project scaffolding, dependencies
Core Features 2 days Authentication, basic CRUD
Testing - Cypress 1 day E2E tests with Cypress
Testing - Playwright 1 day Cross-browser tests
Testing - Cucumber 1 day BDD feature files and steps
Testing - Capybara 1 day Acceptance tests (if Rails)
CI/CD & Documentation 1 day GitHub Actions, README

Getting Started

  1. Choose your technology stack
  2. Follow Setting Up the Test Application to scaffold the project
  3. Implement the core features
  4. Complete the Test Exercises

Resources

Support

If you get stuck:

  1. Review the relevant chapter in this onboarding
  2. Check the framework's official documentation
  3. Search for similar issues on Stack Overflow
  4. Ask for help in the team Slack channel

Good luck! This project will solidify your understanding of QA testing and prepare you for real-world testing challenges.