doc: update readme

readme.md

@@ -1,13 +1,137 @@
-#### run each case
-`npx playwright test {name}.spec.ts`
-e.g -> `npx playwright test example.spec.ts`
+# Playwright Testing Project
 
-#### run with codegen
-`npx playwright codegen [Link]{}`
-e.g -> `npx playwright codegen https://ecommerce-playground.lambdatest.io/`
+This project demonstrates automated browser testing using [Playwright](https://playwright.dev/), leveraging TypeScript and the Playwright test runner. It includes example test scripts, configuration, and CI workflow integration.
 
-#### show report
-`npx playwright show-report`
+---
 
-#### run in UI mode
-`npx playwright test --ui`
+## Contents
+
+- [Getting Started](#getting-started)
+- [Project Structure](#project-structure)
+- [Running Tests](#running-tests)
+- [Useful Playwright Commands](#useful-playwright-commands)
+- [Continuous Integration](#continuous-integration)
+- [Examples](#examples)
+- [Configuration](#configuration)
+
+---
+
+## Getting Started
+
+1. **Install dependencies**
+
+   ```bash
+   npm install
+   ```
+
+2. **Install Playwright browsers**
+
+   ```bash
+   npx playwright install --with-deps
+   ```
+
+3. **Run tests**
+   ```bash
+   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**:
+
+```bash
+npx playwright test
+```
+
+To run a **specific test file**:
+
+```bash
+npx playwright test tests/example.spec.ts
+```
+
+To use the **Playwright UI mode**:
+
+```bash
+npx playwright test --ui
+```
+
+To **show the HTML report** after running tests:
+
+```bash
+npx playwright show-report
+```
+
+To run with **codegen** (generate Playwright code by interacting with a site):
+
+```bash
+npx playwright codegen https://target-url.com/
+```
+
+---
+
+## Useful Playwright Commands
+
+- Run a single test case:
+  ```bash
+  npx playwright test {name}.spec.ts
+  ```
+- Code generation:
+  ```bash
+  npx playwright codegen [Link]
+  ```
+- Show report:
+  ```bash
+  npx playwright show-report
+  ```
+- Run in UI mode:
+  ```bash
+  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`](https://github.com/MrMyatNoe/playwright-testing/blob/main/tests/example.spec.ts) — basic Playwright tests for page navigation and assertions
+- [`tests/locator-test.spec.ts`](https://github.com/MrMyatNoe/playwright-testing/blob/main/tests/locator-test.spec.ts) — locator strategies and form interactions
+- [`tests/porfolio.spec.ts`](https://github.com/MrMyatNoe/playwright-testing/blob/main/tests/portfolio.spec.ts) — porfolio testing for my repo [`my-porfolio`](https://github.com/MrMyatNoe/my-porfolio)
+- [`tests-examples/demo-todo-app.spec.ts`](https://github.com/MrMyatNoe/playwright-testing/blob/main/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`](https://github.com/MrMyatNoe/playwright-testing/blob/main/playwright.config.ts) for more details.
+
+---
+
+## Author
+
+[MrMyatNoe](https://github.com/MrMyatNoe)
+
+---