gem-hunter
Language: TypeScript
MVP for Playwright Automation Framework. Features TypeScript, Page Object Model Design Patter, Custom Fixtures, REST API Testing and Mocking, Schema Validation with Zod, Environment Utilization and CI/CD integration with GitHub Actions
MVP(Minimal Viable Product) for Playwright Automation Framework. Features TypeScript, Page Object Model Design Pattern, Custom Fixtures, REST API Testing and Mocking, Schema Validation with Zod, Environment Utilization, and CI/CD integration with GitHub Actions and GitLab CI/CD.
This repository contains a Playwright framework written in TypeScript. The framework follows the Page Object Model design pattern and uses .env files for managing environment-specific variables. For example purpose is used the following webapp - https://conduit.bondaracademy.com/
This Framework was developed during my practice as an Automation QA and is based on invaluable lessons learned from:
Feel free to use or update the provided framework to best suit your needs.
Before you begin, ensure you have the following installed:
Clone the repository:
git clone https://github.com/idavidov13/Playwright-Framework.git
cd Playwright-FrameworkInstall dependencies:
npm install
Install Playwright Browsers:
npx playwright install --with-deps
This command ensures all necessary browser binaries and dependencies are installed.
Set up environment variables:
Create a .env.{environmentName} file in the env/ directory and add your environment-specific variables. Refer to the Environment Variables section for details.
Playwright-Framework/
├── .github/
│ ├── actions
| | └── playwright-setup
| └── workflows
│ ├── playwright-container.yml
│ ├── playwright-custom-runner.yml
│ └── playwright-runner.yml
│
├── env/
│ └── .env.dev
│
├── fixture/
│ ├── api
│ | ├── api-request-fixture.ts
│ | ├── plain-function.ts
│ | ├── schemas.ts
│ | └── types-guards.ts
│ └── pom
│ ├── page-object-fixture.ts
│ └── test-options.ts
|
├── pages/
│ └── clientSite/
| ├── articlePage.ts
| ├── homePage.ts
| └── navPage.ts
|
├── tests-data/
│ ├── articleData.json
│ └── invalidCredentials.json
|
├── tests/
│ ├── auth.setup.ts
│ ├── API/
│ | ├──article.spec.ts
│ | └──authentication.spec.ts
| |
│ └── ClientSite/
│ ├──article.ts
│ ├──home.spec.ts
│ └──nav.spec.ts
|
├── .gitignore
├── .prettierrc
├── LICENSE
├── package-lock.json
├── package.json
├── playwright.config.ts
└── README.md
Define your page objects:
Create your page object classes in the pages/ directory. Each class should encapsulate the interactions and assertions for a single page.
Write your tests:
Write your tests in the tests/ directory. Import your page objects and use them to interact with the application.
The framework uses .env files for managing environment-specific variables. Create a folder env/ in the root directory and add .env.{environmentName} files. Example for .env.dev:
# .env.dev
URL=https://conduit.bondaracademy.com/
API_URL=https://conduit-api.bondaracademy.com/
USER_NAME={your username}
EMAIL={your email}
PASSWORD={your password}
The default environment name should be DEV (.env.dev). The script is built to use the file if process.env.VARIABLE_NAME is undefined.
These variables can be accessed in your tests and page objects using process.env.VARIABLE_NAME.
To set desired environment, run the following command into terminal, before starting the tests:
$env:ENVIRONMENT='{environmentName}'
You can verify the set variable with:
echo $env:ENVIRONMENT
To run tests, use the following commands (defined in the scripts section of package.json):
npm run test # Run all tests npm run smoke # Run smoke tests npm run sanity # Run sanity tests npm run api # Run API tests npm run regression # Run regression tests npm run fullTest # Run the full test suite
The framework includes four GitHub Actions workflows for CI/CD (you can find the repository with implemented GitHub Actions here):
The framework includes GitLab pipeline for CI/CD (you can find the repository with implemented GitLab CI/CD here):
Type Annotations: Always use type annotations for variables, function parameters, and return types.
function add(a: number, b: number): number { return a + b; }
Type Inference: Let TypeScript infer types when it's obvious.
let count = 0; // TypeScript infers count as number
Interfaces and Types: Prefer interface for object shapes and type for unions or intersections.
interface User { id: number; name: string; } type Result<T> = | { success: true; value: T } | { success: false; error: string };
Naming Conventions:
camelCase for variables and functions.PascalCase for classes and interfaces.Readability:
Documentation: Use JSDoc for documenting code.
/** * Adds two numbers together. * @param a - First number * @param b - Second number * @returns The sum of the two numbers */ function add(a: number, b: number): number { return a + b; }
Test Tags: Each test must have at least one tag. The default tags, which are used are: [@Smoke, @Sanity, @Api, @Regression]