{"id":31663975,"url":"https://github.com/oponcefranco/playwright-typescript-demo","last_synced_at":"2026-05-14T21:36:18.994Z","repository":{"id":315976408,"uuid":"1060978117","full_name":"oponcefranco/playwright-typescript-demo","owner":"oponcefranco","description":"Sample automation project using Playwright and Typescript","archived":false,"fork":false,"pushed_at":"2025-10-07T05:21:35.000Z","size":82,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-07T06:21:01.956Z","etag":null,"topics":["playwright","playwright-tests","playwright-typescript","test-automation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oponcefranco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-21T01:37:57.000Z","updated_at":"2025-10-07T05:16:15.000Z","dependencies_parsed_at":"2025-09-22T01:14:51.231Z","dependency_job_id":"fc63e73e-948c-4a7f-900d-6802bf716b30","html_url":"https://github.com/oponcefranco/playwright-typescript-demo","commit_stats":null,"previous_names":["oponcefranco/playwright-typescript-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oponcefranco/playwright-typescript-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oponcefranco%2Fplaywright-typescript-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oponcefranco%2Fplaywright-typescript-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oponcefranco%2Fplaywright-typescript-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oponcefranco%2Fplaywright-typescript-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oponcefranco","download_url":"https://codeload.github.com/oponcefranco/playwright-typescript-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oponcefranco%2Fplaywright-typescript-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278846320,"owners_count":26056090,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["playwright","playwright-tests","playwright-typescript","test-automation"],"created_at":"2025-10-07T20:52:50.177Z","updated_at":"2025-10-07T20:52:52.630Z","avatar_url":"https://github.com/oponcefranco.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![CircleCI](https://dl.circleci.com/status-badge/img/gh/oponcefranco/playwright-typescript-demo/tree/main.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/oponcefranco/playwright-typescript-demo/tree/main)\n\n# Playwright TypeScript Demo\n\nA demo of a Playwright test automation framework built with TypeScript, diplaying best practices for functional and e2e testing using the Page Object Model (POM) pattern.\n\n## Overview\n\nThis project demonstrates a Playwright testing framework featuring:\n\n- **Page Object Model (POM)** architecture for maintainable test code\n- **TypeScript** for type safety and better developer experience\n- **Docker** support for consistent testing environments\n- **GitHub Actions** CI/CD pipeline with optimized caching\n- **ESLint \u0026 Prettier** for code quality and formatting\n- **Modular test structure** with reusable components\n\n## Tech Stack\n\n- **Test Framework**: [Playwright](https://playwright.dev/) v1.55.0\n- **Language**: TypeScript 5.9+\n- **Runtime**: Node.js 18+\n- **Code Quality**: ESLint + Prettier\n- **CI/CD**: GitHub Actions\n- **Containerization**: Docker + Docker Compose\n- **Environment Management**: dotenv\n\n## Installation\n\n### Prerequisites\n\n- Node.js 18.0.0 or higher\n- npm or yarn package manager\n\n### Install\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/oponcefranco/playwright-typescript-demo.git\n   cd playwright-typescript-demo\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Install Playwright browsers**\n\n   ```bash\n   npx playwright install\n   ```\n\n4. **Set up environment variables**\n   ```bash\n   cp .env.example .env\n   ```\n\n## Environment Setup\n\n### Environment Variables\n\nCreate a `.env` file in the project root:\n\n```bash\n# Base URL for your application under test\nBASE_URL=\u003cTEST_URL_HERE\u003e\n```\n\n### Configuration\n\nThe project uses `playwright.config.ts` for test configuration:\n\n- **Test Directory**: `./src/tests`\n- **Base URL**: Configured via `BASE_URL` environment variable\n- **Browsers**: Currently optimized for Chromium (Firefox and WebKit available)\n- **Reports**: HTML reporter with screenshots on failure\n- **Parallel Execution**: Enabled for faster test runs\n\n## Running Tests\n\n### Test Execution Examples\n\n```bash\n# Run specific test file\nnpx playwright test homePage.spec.ts\n\n# Run tests matching a pattern\nnpx playwright test --grep \"homepage\"\n\n# Run tests in headed mode\nnpx playwright test --headed\n\n# Run tests with specific number of workers\nnpx playwright test --workers=2\n```\n\n## Page Object Model\n\nThis project implements a robust Page Object Model (POM) architecture:\n\n### Base Classes\n\n- **`BasePage`**: Foundation class for all page objects with common functionality\n- **`ScenarioPage`**: Manages test scenarios, screenshots, and shared data\n- **`base.ts`**: Test fixtures that automatically inject page objects\n\n### Example Page Object\n\n```typescript\n// src/pom/homepage/home.ts\nexport class HomePage extends BasePage {\n  constructor(page: Page, scenarioPage: ScenarioPage) {\n    super(page, scenarioPage)\n  }\n\n  async open() {\n    await this.page.goto('/')\n  }\n\n  async verifyHeaderIsDisplayed(headerText: string) {\n    const header = this.page.locator(locators.header, {\n      hasText: headerText,\n    })\n    await expect(header).toBeVisible()\n  }\n}\n```\n\n### Usage in Tests\n\n```typescript\n// src/tests/homePage.spec.ts\nimport test from '../pom/common/base'\n\ntest.describe('Homepage Tests', () =\u003e {\n  test('should display homepage elements', async ({ homepage }) =\u003e {\n    await homepage.open()\n    await homepage.verifyHomeIconIsDisplayed()\n    ...\n  })\n})\n```\n\n### Key Benefits\n\n- **Maintainability**: Page changes require updates in one location\n- **Reusability**: Page objects can be shared across multiple test files\n- **Type Safety**: TypeScript provides compile-time error checking\n- **Auto-injection**: Page objects are automatically available in tests\n\n## Docker Support\n\nThis project includes Docker support for testing environments.\n\n### Docker Usage\n\n```bash\n# Build and run tests\ndocker build -t playwright-demo .\ndocker run --rm -e BASE_URL=https://example.com playwright-demo\n\n# Using Docker Compose (recommended)\ndocker-compose run --rm playwright-tests\n```\n\nFor detailed Docker instructions, see [DOCKER.md](DOCKER.md).\n\n## CI/CD Integration\n\n### GitHub Actions\n\nThe project includes a GitHub Actions workflow (`.github/workflows/playwright.yml`) featuring:\n\n- **Lint and TypeScript checks** before running tests\n- **Browser caching** for faster CI runs\n- **Matrix strategy** for multi-browser testing (currently optimized for Chromium)\n- **Artifact uploads** for test reports and results\n- **Optimized caching** for dependencies and Playwright browsers\n\n#### Test Github Actions Locally\n\n```bash\nact -W '.github/workflows/playwright.yml' --container-architecture linux/amd64\n```\n\n## Code Quality\n\n### ESLint Config\n\n- TypeScript-specific rules\n- Prettier integration for consistent formatting\n- Custom rules for Playwright best practices\n\n### Commands\n\n```bash\n# Check for linting errors\nnpm run eslint-check-only\n\n# Fix auto-fixable linting issues\nnpm run eslint-fix\n\n# Format code with Prettier\nnpm run prettier\n```\n\n### TypeScript Config\n\n- Strict mode enabled for type safety\n- Modern ES modules support\n- Optimized for Node.js environment\n- Source maps for debugging\n\n### Workflow\n\n1. **Fork and clone** the repository\n2. **Create a feature branch**: `git checkout -b feature/your-feature`\n3. **Install dependencies**: `npm install`\n4. **Run tests**: `npm test`\n5. **Check code quality**: `npm run eslint-check-only`\n6. **Format code**: `npm run prettier`\n7. **Commit changes**: Follow conventional commit format\n8. **Push and create PR**: Target the `main` branch\n\n### Best Practices\n\n- Follow the existing Page Object Model structure\n- Add tests for new page objects\n- Update documentation for significant changes\n- Ensure all tests pass before submitting PR\n- Follow TypeScript best practices\n\n### Adding New Tests\n\n1. Create page objects in `src/pom/[page-name]/`\n2. Add locators in separate files (e.g., `locators.ts`)\n3. Write tests in `src/tests/` using the base test fixture\n4. Follow the existing naming conventions\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foponcefranco%2Fplaywright-typescript-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foponcefranco%2Fplaywright-typescript-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foponcefranco%2Fplaywright-typescript-demo/lists"}