https://github.com/hrmeetsingh/playwright-visual-test
Playwright visual test performance benchmarking
https://github.com/hrmeetsingh/playwright-visual-test
Last synced: 10 months ago
JSON representation
Playwright visual test performance benchmarking
- Host: GitHub
- URL: https://github.com/hrmeetsingh/playwright-visual-test
- Owner: hrmeetsingh
- Created: 2024-11-15T05:06:41.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-15T14:41:36.000Z (about 1 year ago)
- Last Synced: 2025-01-21T11:45:09.618Z (11 months ago)
- Language: TypeScript
- Size: 208 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Playwright Visual Test
## Introduction
This project demonstrates how to perform visual testing using Playwright. The example showcases a visual comparison test with timing measurements for both full page and clipped region screenshot comparisons.
## Prerequisites
- Node.js (v18.17.1)
- Playwright (v1.44.1)
## Installation
1. Clone the repository:
```bash
git clone https://github.com/your-repo/playwright-visual-test.git
```
2. Install dependencies:
```bash
npm install
```
3. Run the tests
```bash
npx playwright test
```
## Runtime report
## Use decorator to measure execution time
Test file: tests/visual-test-decorator.spec.ts has a test case that uses a decorator to measure the execution timings of the test case
### Decorator function code
```typescript
function measureExecutionTime(timings: { label: string; duration: number }[]) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = async function (...args: any[]) {
const start = performance.now();
const result = await originalMethod.apply(this, args);
const end = performance.now();
const duration = end - start;
timings.push({ label: propertyKey, duration });
return result;
};
};
}
```
### Decorator usage
This is a simplified example of how to use the decorator to measure the execution time of a visual test case using playwright. The use case is applicable to most test cases arranged in a Page Object Model, where the test case is a method of a Page Object, and hence an abstraction over the playwright provided methods like `page.goto`, `page.waitForLoadState`, `page.toHaveScreenshot` etc.
The design of the decorator allows for multiple test cases to be measured and the results to be aggregated in a single test report.
```typescript
@measureExecutionTime(timings)
async captureFullPage() {
await this.page.goto('https://example.com');
await this.page.waitForLoadState('networkidle');
await expect(this.page).toHaveScreenshot('full-page.png', {
fullPage: true,
timeout: 10000,
animations: 'disabled',
mask: [this.page.locator('.dynamic-content')],
threshold: 0.2
});
}
```