- Project Overview
- Prerequisites
- Installation
- Environment Setup
- Docker Support
- Project Structure
- Test Architecture
- Running Tests
- Test Reports
- Linting and Formatting
- Git Hooks
- Best Practices
- Contributing
This project contains end-to-end (E2E) tests for the Sauce Labs checkout process using Playwright, a modern browser automation library. The tests are written in TypeScript and follow the Page Object Model (POM) design pattern for better maintainability.
Key Features:
- Cross-browser testing (Chromium, Firefox, WebKit)
- GitHub Actions integration
- ESLint and Prettier for code quality
- Husky Git hooks
- Comprehensive test reporting
Before you begin, ensure you have the following installed:
- Node.js (v18 or higher)
- npm (v9 or higher) or yarn
- Git
- Clone the repository:
git clone https://github.com/gedom2012/playwright.git cd playwright - Install dependencies:
npm install
- Verify Playwright browsers are installed:
npx playwright install
The project requires environment variables for authentication. Follow these steps:
-
Create your .env file:
cp .env.example .env
-
Edit the .env file with your credentials:
USERNAME=your_actual_username PASSWORD=your_actual_password
-
Important: Never commit your .env file to version control!
The project includes Docker configuration for containerized test execution:
-
Dockerfile: Based on official Playwright image with all dependencies
-
docker-compose.yaml: Defines the test service with volume mounts
- Build the Docker Image
docker-compose build- Run Tests in Container
docker-compose up- Override the default command:
docker-compose run playwright-test npm run test-firefoxReports are saved to your host machine through mounted volumes:
-
./playwright-report/ - HTML test reports
-
./test-results/ - Test artifacts and screenshots
- Stop containers and remove volumes:
docker-compose down -v.github/ # GitHub Actions workflows
.husky/ # Git hooks configuration
.vscode/ # VS Code settings
node_modules/ # Project dependencies
page-objects/ # Page object model classes
playwright-report/ # HTML test reports
test-results/ # Test artifacts and screenshots
tests/ # Test specifications
.env.example # Environment variables template
.gitignore # Git ignore rules
.eslint.config.mjs # ESLint configuration
package.json # Project metadata and scripts
package-lock.json # Dependency lock file
playwright.config.ts # Playwright configuration
prettierrc # Prettier configuration
Dockerfile # Docker configuration
docker-compose.yaml # Docker compose setupDive deeper about of this test architecture with the following diagram
The project includes some test scripts configured in package.json:
- Run tests in Chromium:
npm run test-chrome- Run tests in Firefox:
npm run test-firefox- Run tests in WebKit:
npm run test-webkit- Run tests in all browsers in parallel:
npm run test-all- Run specific test file:
npx playwright test tests/checkout.spec.ts- Run in headed mode (visible browser):
npx playwright test --headed- Generate trace for debugging:
npx playwright test --trace onAfter test execution, you can view detailed reports:
- HTML Report:
npx playwright show-reportThis opens an interactive HTML report showing test results, timelines, and screenshots.
- CI Report:
The GitHub Actions workflow includes a formatted test report in the workflow summary.
The project uses ESLint and Prettier for code quality:
- Run linter:
npm run lint- Format code:
Code is automatically formatted after save
Pre-commit hooks automatically:
- Format code with Prettier
- Prevent commits with linting errors
This project follows these quality engineering best practices:
-
Page Object Model for maintainable selectors
-
Environment variables for sensitive data
-
Cross-browser testing coverage
-
Automated code quality checks
-
CI/CD integration with GitHub Actions
-
Containerized testing with Docker
- Create a new branch for your feature/bugfix
- Write tests for new functionality
- Ensure all tests pass (npm run test-all)
- Run linter (npm run lint)
- Commit using conventional commit messages
- Open a pull request
💡 "Good code is its own best documentation." – Steve McConnell