[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81528":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":11,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":13,"stars30d":13,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":14,"rankGlobal":9,"rankLanguage":9,"license":15,"archived":16,"fork":16,"defaultBranch":17,"hasWiki":18,"hasPages":16,"topics":19,"createdAt":9,"pushedAt":9,"updatedAt":20,"readmeContent":21,"aiSummary":22,"trendingCount":13,"starSnapshotCount":13,"syncStatus":23,"lastSyncTime":24,"discoverSource":25},81528,"playwright-typescript-framework","marcoveraz\u002Fplaywright-typescript-framework","marcoveraz","Scalable UI automation framework built with Playwright and TypeScript using POM and multi-environment support",null,"TypeScript",27,13,0,43.44,"MIT License",false,"main",true,[],"2026-06-12 04:01:34","# 🎭 Playwright Automation Framework\n\n![Playwright](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPlaywright-Automation-green?style=for-the-badge&logo=playwright)\n![TypeScript](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-Framework-blue?style=for-the-badge&logo=typescript)\n![Status](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FStatus-Active-success?style=for-the-badge)\n\n## 👨‍💻 Author\n\nMarco Adán Vera Zboralski  \nSenior QA Automation Engineer\n\n[LinkedIn](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmarco-adan-vera\u002F)\n\n---\n\n## 💡 Overview\n\nThis project demonstrates a scalable UI automation framework built with Playwright and TypeScript.\n\nIt follows real-world best practices such as Page Object Model (POM), multi-environment configuration, and reusable components to ensure maintainability and reliability.\n\n---\n\n## 🚀 Framework Design\n\nThis project follows a scalable and maintainable automation architecture:\n\n- ✅ Page Object Model (POM)\n- ✅ Separation of concerns (tests, pages, models, utils)\n- ✅ Dynamic DOM handling to avoid fragile locators\n- ✅ Multi-environment support (dev, qa, stage, prod)\n- ✅ Reusable utility classes\n\n---\n\n## 📁 Project Structure\n\n```text\nproject-root\u002F\n│── .github\u002F                 # GitHub workflows, PR templates, CODEOWNERS\n│── data\u002F                    # Test data files\n│\n│── src\u002F\n│   ├── api\u002F\n│   │   ├── clients\u002F\n│   │   │   └── jsonplaceholder\u002F   # API client classes\n│   │   ├── fixtures\u002F              # API fixtures\n│   │   ├── models\u002F\n│   │   │   └── jsonplaceholder\u002F   # API data models\u002Finterfaces\n│   │   ├── payloads\u002F\n│   │   │   └── jsonplaceholder\u002F   # API request payload builders\n│   │   ├── utils\u002F                 # API-specific utilities\n│   │   └── base.api.ts            # Base API functionality\n│   │\n│   ├── config\u002F\n│   │   └── saucedemo\u002F             # Environment\u002Fconfiguration files\n│   │\n│   ├── fixtures\u002F\n│   │   └── saucedemo\u002F             # Playwright UI fixtures\n│   │\n│   ├── models\u002F                    # Shared UI\u002Fdomain models\n│   │\n│   ├── pages\u002F\n│   │   └── saucedemo\u002F             # Page Object Model classes\n│   │\n│   └── utils\u002F                     # Shared utilities and helpers\n│\n│── tests\u002F\n│   ├── api\u002F\n│   │   └── jsonplaceholder\u002F       # API test specs\n│   └── ui\u002F\n│       └── saucedemo\u002F             # UI test specs\n│\n│── test-results\u002F                  # Test execution artifacts\n│── playwright-report\u002F             # Playwright HTML reports\n│── allure-results\u002F                # Allure raw results\n│── allure-report\u002F                 # Allure generated reports\n│\n│── .gitignore\n│── .prettierrc\n│── package.json\n│── package-lock.json\n│── playwright.config.ts\n│── README.md\n```\n\n---\n\n## 🧪 Test Strategy\n\n- 🔄 End-to-End flows (login, checkout)\n- 🎲 Dynamic product selection using randomization\n- ✅ Validation across UI layers\n- 📝 BDD-style comments (Given \u002F When \u002F Then)\n\n---\n\n## ⚙️ Features\n\n- 🌐 Multi-environment execution\n- 🎲 Randomized test execution\n- 🔍 Product validation across pages\n- 🛠️ Utilities for random data, waits, and calculations\n- 🎬 Playwright features:\n  - Video recording\n  - Trace viewer\n  - Screenshots on failure\n\n---\n\n## 📦 Installation\n\n```bash\n# Clone the repository\ngit clone \u003Crepository-url>\n\n# Navigate to project directory\ncd playwright-automation-framework\n\n# Install dependencies\nnpm install\n\n# Install Playwright browsers\nnpx playwright install\n```\n\n---\n\n## ▶️ Running Tests\n\n### Basic Commands\n\n```bash\n# Run all tests\nnpx playwright test\n\n# Run a specific test file\nnpx playwright test tests\u002Fsaucedemo\u002Flogin-page.spec.ts\n\n# Run tests by name\nnpx playwright test -g \"login\"\n\n# Run in headed mode (visible browser)\nnpx playwright test --headed\n\n# Run with specific number of workers\nnpx playwright test --workers=4\n```\n\n### Debug Mode\n\n```bash\n# Run in debug mode\nnpx playwright test --debug\n\n# Run with verbose output\nnpx playwright test --reporter=list\n```\n\n---\n\n## 🌎 Running Tests by Environment\n\nThis framework supports multiple environments using the `ENV` variable.\n\n**Available environments:**\n\n- `dev` (default)\n- `qa`\n- `stage`\n- `prod`\n\n### Windows (Command Prompt)\n\n```bash\n# Set environment and run all tests\nset ENV=qa && npx playwright test\n\n# Set environment and run specific test name\nset ENV=qa && npx playwright test -g \"checkout\"\n\n# Set environment and run specific file\nset ENV=qa && npx playwright test tests\u002Fsaucedemo\u002Flogin-page.spec.ts\n```\n\n### Windows (PowerShell)\n\n```powershell\n# Set environment and run tests\n$env:ENV=\"qa\"; npx playwright test\n\n# Run specific test\n$env:ENV=\"stage\"; npx playwright test -g \"checkout\"\n```\n\n### Mac \u002F Linux\n\n```bash\n# Run all tests in QA environment\nENV=qa npx playwright test\n\n# Run specific test in staging\nENV=stage npx playwright test -g \"checkout\"\n\n# Run specific file in production\nENV=prod npx playwright test tests\u002Fsaucedemo\u002Fcheckout.spec.ts\n```\n\n---\n\n## 📦 NPM Scripts\n\nCommon scripts are defined in `package.json`.\n\nExamples:\n\n```bash\nnpm run test\nnpm run test:dev\nnpm run test:qa\nnpm run test:stage\nnpm run test:prod\nnpm run test:headed\nnpm run report:playwright\n```\n\n> Environment-specific scripts use `cross-env` to support Windows, macOS, Linux, and CI\u002FCD environments.\n\n## 📊 Reports & Artifacts\n\n### View HTML Report\n\n```bash\nnpx playwright show-report\n```\n\n### Artifacts Location\n\n```\ntest-results\u002F\n├── videos\u002F # .webm video recordings\n├── traces\u002F # Playwright trace files\n└── screenshots\u002F # Failure screenshots\n```\n\n### View Trace\n\n```bash\n# Open trace viewer\nnpx playwright show-trace test-results\u002Ftraces\u002Ftrace.zip\n```\n\n---\n\n## 🎯 Purpose\n\n- 🧪 Demonstrate automation framework design\n- 💻 Practice Playwright + TypeScript\n- 📋 Showcase testing best practices\n- 📂 Serve as a portfolio project\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! This project is intended to grow with additional real-world test scenarios.\n\n**You can:**\n\n- 🧪 Add new test flows\n- 🔨 Improve existing tests\n- ✅ Enhance validations\n- 💡 Suggest improvements\n\n---\n\n## 🧠 Notes\n\n- 🎯 Uses dynamic locators to avoid fragile selectors\n- 🏗️ Focus on maintainability and scalability\n- 🌐 Designed to simulate real-world automation scenarios\n- 📚 Follows testing best practices and design patterns\n\n---\n\n## 📄 License\n\nThis project is open source and available under the MIT License.\n\n---\n\n## 📞 Contact\n\n**Marco Adán Vera Zboralski**\n🔗 [LinkedIn](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmarco-adan-vera\u002F)\n","该项目是一个基于Playwright和TypeScript构建的可扩展UI自动化框架。它采用了页面对象模型（POM）设计模式，支持多环境配置，并提供了一系列可复用组件，确保了代码的维护性和测试的稳定性。项目结构清晰，将关注点分离，包括测试、页面、模型及工具类等，同时通过动态DOM处理来避免定位器脆弱性问题。此框架适用于需要在不同环境下进行可靠且高效用户界面自动化测试的场景，如开发、质量保证、预发布和生产阶段。",2,"2026-06-11 04:05:24","CREATED_QUERY"]