Playwright Testing Project

This project demonstrates automated browser testing using Playwright, leveraging TypeScript and the Playwright test runner. It includes example test scripts, configuration, and CI workflow integration.

---

Contents

• Getting Started
• Project Structure
• Running Tests
• Useful Playwright Commands
• Continuous Integration
• Examples
• Configuration

---

Getting Started

1. Install dependencies

   npm install

2. Install Playwright browsers

   npx playwright install --with-deps

3. Run tests

   npx playwright test

---

Project Structure

• tests/ — Contains main test cases (example.spec.ts, locator-test.spec.ts, porfolio.spec.ts)
• tests-examples/ — Additional sample folder for Playwright usage (demo-todo-app.spec.ts)
• .github/workflows/playwright.yml — GitHub Actions workflow for CI
• playwright.config.ts — Playwright configuration file
• .vscode/mcp.json — VSCode MCP server configuration

---

Running Tests

To run all tests:

npx playwright test

To run a specific test file:

npx playwright test tests/example.spec.ts

To use the Playwright UI mode:

npx playwright test --ui

To show the HTML report after running tests:

npx playwright show-report

To run with codegen (generate Playwright code by interacting with a site):

npx playwright codegen https://target-url.com/

---

Useful Playwright Commands

• Run a single test case:

  npx playwright test {name}.spec.ts

• Code generation:

  npx playwright codegen [Link]

• Show report:

  npx playwright show-report

• Run in UI mode:

  npx playwright test --ui

---

Continuous Integration

GitHub Actions workflow at .github/workflows/playwright.yml runs tests automatically on pushes and pull requests to main or master. The workflow installs dependencies, sets up Playwright browsers, runs tests, and uploads the test report as an artifact.

---

Examples

See:

• tests/example.spec.ts — basic Playwright tests for page navigation and assertions
• tests/locator-test.spec.ts — locator strategies and form interactions
• tests/porfolio.spec.ts — porfolio testing for my repo my-porfolio
• tests-examples/demo-todo-app.spec.ts — comprehensive test coverage for a TodoMVC app

---

Configuration

• Test Directory: Specified in playwright.config.ts as ./tests
• Parallel Execution: Enabled by default
• Reporters: HTML report is generated after test runs
• Browsers: Chromium enabled by default; configurations for Firefox, WebKit, mobile, and branded browsers are included as comments for easy enabling

See playwright.config.ts for more details.

---

Author

MrMyatNoe

---