Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/swissspidy/wp-performance-testing
Boilerplate for running WordPress performance tests with Playwright
https://github.com/swissspidy/wp-performance-testing
Last synced: 1 day ago
JSON representation
Boilerplate for running WordPress performance tests with Playwright
- Host: GitHub
- URL: https://github.com/swissspidy/wp-performance-testing
- Owner: swissspidy
- License: gpl-2.0
- Created: 2023-10-27T15:02:25.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-04-29T08:39:23.000Z (5 months ago)
- Last Synced: 2024-05-02T00:41:34.906Z (5 months ago)
- Language: TypeScript
- Size: 1.81 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WordPress Performance Testing Example
Example repository demonstrating how to set up performance testing in a WordPress project.
## Overview
Read the introduction blog post to learn more about this setup.
In short, running `npm run wp-env start` and `npm run test:performance` is all that's needed for performance testing.
After running tests, you will get a nicely formatted output such as this:
**Performance Test Results**
**Frontend Tests**
| wpLoadAlloptionsQuery | wpDbQueries | wpMemoryUsage | wpBeforeTemplate | wpTemplate | wpTotal | largestContentfulPaint | timeToFirstByte | lcpMinusTtfb |
| --------------------- | ----------- | ------------- | ---------------- | ---------- | ------- | ---------------------- | --------------- | ------------ |
| 0.96 ms | 26 | 3.75 MB | 26.70 ms | 12.89 ms | 41.36 ms | 125.95 ms | 48.55 ms | 76.55 ms |
### Sharding
By default, performance tests are run in sequence in order to not skew results with multiple simultaneous requests.
However, on Continuous Integration platforms like GitHub Actions it might be desired to run them in parallel on multiple machines.
In Playwright, this mode of operation is called [sharding](https://playwright.dev/docs/test-sharding).
To shard the test suite, pass `--shard=x/y` to the command line. For example, to split the suite into four shards, each running one fourth of the tests:
```
npm run test:performance -- --shard=1/4
npm run test:performance -- --shard=2/4
npm run test:performance -- --shard=3/4
npm run test:performance -- --shard=4/4
```
In this example, each test shard has its own test report. To have a combined report showing all the test results from all the shards, you can merge them.
```
npm run test:performance -- --shard=1/4 --reporter=blob
npm run test:performance -- --shard=2/4 --reporter=blob
npm run test:performance -- --shard=3/4 --reporter=blob
npm run test:performance -- --shard=4/4 --reporter=blob
npm run test:performance:merge-results
```
The blob reporter is the special glue that collects all test information in a special format so that they can be later merged.
`npm run test:performance:merge-results` then reads all blob reports and merges them into a single report.
#### GitHub Actions example
GitHub Actions supports [sharding tests between multiple jobs](https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs) using the [`jobs..strategy.matrix`](https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstrategymatrix) option.
The matrix option will run a separate job for every possible combination of the provided options.
```yaml
# .github/workflows/playwright.yml
name: Playwright Tests
on:
push:
branches: [ main, master ]
pull_request:
branches: [ main, master ]
jobs:
playwright-tests:
timeout-minutes: 60
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
shard: [1/4, 2/4, 3/4, 4/4]
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Install Playwright browsers
run: npx playwright install --with-deps
- name: Start WordPres
run: npm run wp-env start
- name: Run Playwright tests
run: npx playwright test --shard ${{ matrix.shard }}
- name: Upload blob report to GitHub Actions Artifacts
if: always()
uses: actions/upload-artifact@v3
with:
name: all-blob-reports
path: blob-report
retention-days: 1
merge-reports:
# Merge reports after playwright-tests, even if some shards have failed
if: always()
needs: [playwright-tests]
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Download blob reports from GitHub Actions Artifacts
uses: actions/download-artifact@v3
with:
name: all-blob-reports
path: all-blob-reports
- name: Merge into single performance report
run: npm run test:performance:merge-reports
- name: Upload performance report
uses: actions/upload-artifact@v3
with:
name: performance-report-${{ github.run_attempt }}
path: artifacts/performance-results.json
retention-days: 14
```
You can now see the reports have been merged and a combined performance report is available in the GitHub Actions Artifacts tab.
