Skip to content

Commit c68a632

Browse files
akshayp7akshayp7
committed
Sharding Changes
1 parent e05c925 commit c68a632

4 files changed

Lines changed: 122 additions & 83 deletions

File tree

‎.github/workflows/playwright.yml‎

Lines changed: 47 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -12,85 +12,75 @@ on:
1212

1313
# Define the jobs to run in this workflow
1414
jobs:
15-
# Define a job named 'build'
16-
build:
17-
# Specify the operating system for this job
15+
playwright-tests:
16+
name: Playwright shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
1817
runs-on: ubuntu-latest
18+
strategy:
19+
fail-fast: false
20+
matrix:
21+
shardIndex: [1, 2, 3, 4]
22+
shardTotal: [4]
1923
env:
20-
SLACK_WEBHOOK_URL: ${{secrets.SLACK_WEBHOOK_URL}}
24+
ENV: "qa"
25+
CI: true
2126

22-
# Define the steps to execute in this job
2327
steps:
24-
# Step to checkout the source code from the repository
2528
- name: Checkout code
2629
uses: actions/checkout@v4
2730

28-
# Step to set up the Node.js version
2931
- name: Install node js v20
3032
uses: actions/setup-node@v4
3133
with:
3234
node-version: "20"
3335

34-
# Step to install Node.js dependencies
3536
- name: Install dependencies
3637
run: npm ci
3738

38-
# Step to install Chrome browser for Playwright
3939
- name: Install Chrome browser for Playwright
40-
run: npx playwright install chrome
40+
run: npx playwright install --with-deps chrome
4141

42-
# Step to run tests with qa as environment variable similarly we can define qa|dev|qaApi|devApi
43-
- name: Run tests
44-
run: npm run test:serial:ci
45-
env:
46-
ENV: "qa"
47-
CI: true
42+
- name: Run tests for this shard
43+
run: npx playwright test --grep @Smoke --workers=1 --project=Chrome --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
4844

49-
# Step to wait for the job to complete
50-
- name: Wait for job completion
51-
# Adjust the wait time as needed
52-
run: sleep 10s
53-
# This step should always run, even if previous steps fail
54-
if: always()
45+
- name: Upload blob report to GitHub Actions artifacts
46+
if: ${{ !cancelled() }}
47+
uses: actions/upload-artifact@v4
48+
with:
49+
name: blob-report-${{ matrix.shardIndex }}
50+
path: blob-report
51+
retention-days: 1
5552

56-
# Check if HTML report exists
57-
- name: Check if HTML report exists
58-
run: |
59-
if [ -d "html-report" ]; then
60-
echo "HTML report exists."
61-
else
62-
echo "HTML report does not exist. Exiting..."
63-
exit 1
64-
fi
65-
if: always()
53+
merge-reports:
54+
if: ${{ !cancelled() }}
55+
needs: [playwright-tests]
56+
runs-on: ubuntu-latest
6657

67-
# Step to zip html-report folder
68-
- name: Zip HTML report
69-
run: zip -r html-report.zip html-report
70-
# This step should always run, even if previous steps fail
71-
if: always()
58+
steps:
59+
- name: Checkout code
60+
uses: actions/checkout@v4
7261

73-
# Step to upload artifact
74-
- name: Upload artifact
62+
- name: Install node js v20
63+
uses: actions/setup-node@v4
64+
with:
65+
node-version: "20"
66+
67+
- name: Install dependencies
68+
run: npm ci
69+
70+
- name: Download blob reports from GitHub Actions artifacts
71+
uses: actions/download-artifact@v4
72+
with:
73+
path: all-blob-reports
74+
pattern: blob-report-*
75+
merge-multiple: true
76+
77+
- name: Merge blob reports into HTML report
78+
run: npx playwright merge-reports --reporter html ./all-blob-reports
79+
80+
- name: Upload merged HTML report
7581
uses: actions/upload-artifact@v4
7682
with:
7783
name: html-report
78-
path: html-report.zip
84+
path: playwright-report
7985
if-no-files-found: error
80-
if: always()
81-
82-
# Step to generate artifact link
83-
- name: Generate artifact link
84-
id: artifact_link
85-
run: echo "artifact_url=https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}" >> $GITHUB_OUTPUT
86-
if: always()
87-
88-
# Send Slack notification with html-reprt url once the tests are completed
89-
- name: Send Slack notification
90-
uses: rtCamp/action-slack-notify@v2
91-
env:
92-
SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
93-
SLACK_CHANNEL: "#playwright-test-reports"
94-
SLACK_USERNAME: Playwright GitHub Actions
95-
SLACK_MESSAGE: "Test results are available in [Artifacts section](${{ steps.artifact_link.outputs.artifact_url }}) as html-report."
96-
if: always()
86+
retention-days: 14

‎README.md‎

Lines changed: 69 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,12 @@
1818
<li><a href="#installation">Installation</a>
1919
</ul>
2020
</li>
21-
<li><a href="#usage">Usage</a></li>
21+
<li>
22+
<a href="#usage">Usage</a>
23+
<ul>
24+
<li><a href="#sharding">Sharding</a></li>
25+
</ul>
26+
</li>
2227
<li><a href="#reports">Reports</a></li>
2328
<li><a href="#sonarqube">SonarQube</a></li>
2429
<li><a href="#docker">Docker</a></li>
@@ -197,7 +202,48 @@ $env:ENV="qa"; npm run test:serial
197202
ENV=qa npm run test:serial
198203
```
199204

200-
6. For executing API test cases, please provide "ENV" value as "qaApi" or "devApi". ReqRes API tests also require `REQRES_API_KEY`, because ReqRes expects the `x-api-key` request header:
205+
### Sharding
206+
207+
Sharding is supported in this project for faster execution in CI by splitting the suite into smaller chunks and then merging the reports into a single HTML report.
208+
209+
6. Run a single shard locally:
210+
211+
**Windows CMD:**
212+
```batch
213+
set ENV=qa && set SHARD_INDEX=1 && set SHARD_TOTAL=4 && npm run test:shard
214+
```
215+
216+
**Windows PowerShell:**
217+
```powershell
218+
$env:ENV="qa"; $env:SHARD_INDEX="1"; $env:SHARD_TOTAL="4"; npm run test:shard
219+
```
220+
221+
**Mac/Linux/WSL:**
222+
```bash
223+
ENV=qa SHARD_INDEX=1 SHARD_TOTAL=4 npm run test:shard
224+
```
225+
226+
Playwright uses `--shard=current/total` to split your suite. For example, the project is configured to run 4 shards using the GitHub Actions matrix:
227+
228+
```yaml
229+
strategy:
230+
fail-fast: false
231+
matrix:
232+
shardIndex: [1, 2, 3, 4]
233+
shardTotal: [4]
234+
```
235+
236+
Each shard writes a `blob` report and then the final job downloads all blob reports and merges them using:
237+
238+
```bash
239+
npx playwright merge-reports --reporter html ./all-blob-reports
240+
```
241+
242+
This produces a single HTML report in the `playwright-report` folder.
243+
244+
The CI workflow also keeps custom reporting enabled with the existing custom reporter and Allure reports while using blob reports only for the sharded run. This ensures you can still maintain your custom output while supporting sharding in GitHub Actions.
245+
246+
7. For executing API test cases, please provide "ENV" value as "qaApi" or "devApi". ReqRes API tests also require `REQRES_API_KEY`, because ReqRes expects the `x-api-key` request header:
201247

202248
**Windows CMD:**
203249
```batch
@@ -214,13 +260,13 @@ $env:ENV="qaApi"; $env:REQRES_API_KEY="your_reqres_key"; npm run test:api
214260
ENV=qaApi REQRES_API_KEY=your_reqres_key npm run test:api
215261
```
216262

217-
7. For recording test scripts :
263+
8. For recording test scripts :
218264

219265
```JS
220266
npm run test:record
221267
```
222268

223-
8. To produce and visually compare screenshots execute below command. On first execution reference screenshot will be generated for comparision with subsequent runs.
269+
9. To produce and visually compare screenshots execute below command. On first execution reference screenshot will be generated for comparision with subsequent runs.
224270

225271
**Windows CMD:**
226272
```batch
@@ -237,7 +283,7 @@ $env:ENV="qa"; npm run test:visual
237283
ENV=qa npm run test:visual
238284
```
239285

240-
9. For emulating test cases on any device, in `playwright.config.ts`, under device section provide desired device name and execute :
286+
10. For emulating test cases on any device, in `playwright.config.ts`, under device section provide desired device name and execute :
241287

242288
**Windows CMD:**
243289
```batch
@@ -254,28 +300,28 @@ $env:ENV="qa"; npm run test:device
254300
ENV=qa npm run test:device
255301
```
256302

257-
10. For Allure Report generation execute :
303+
11. For Allure Report generation execute :
258304

259305
```JS
260306
npm run allureReport
261307
```
262-
11. For HTML Report generation execute below command , single static HTML report(index.html) which can be sent via email is generated in "html-report" folder:
263-
12. For debugging test cases add debug points, the press CNTRL+SHIFT+P and type "debug:debug npm script", on the edit box select desired script.
264-
13. Screenshots, Videos and Trace files will be generated in test-results folder.
265-
14. To change your username go to `testConfig.ts` and provide value against `username`
266-
15. To change password, go to `lib/WebActions` in `decipherPassword()` uncomment `ENCRYPT` code block and replace `password` with your password, execute the test case, Encrypted password will be printed on your console . Copy Encrypted password in `testConfig.ts` against `password` field. You can comment Encrypt bloack ater this.
267-
16. For executing Postgres DB test case, navigate to `testConfig.ts` and provide values for `dbUsername, dbPassword, dbServerName, dbPort, dbName`. Refer to `tests/DB.test.ts` for connecting to DB and Firing a Query.
268-
17. For viewing trace files, go to folder where `trace.zip` is generated and execute :
308+
12. For HTML Report generation execute below command , single static HTML report(index.html) which can be sent via email is generated in "html-report" folder:
309+
13. For debugging test cases add debug points, the press CNTRL+SHIFT+P and type "debug:debug npm script", on the edit box select desired script.
310+
14. Screenshots, Videos and Trace files will be generated in test-results folder.
311+
15. To change your username go to `testConfig.ts` and provide value against `username`
312+
16. To change password, go to `lib/WebActions` in `decipherPassword()` uncomment `ENCRYPT` code block and replace `password` with your password, execute the test case, Encrypted password will be printed on your console . Copy Encrypted password in `testConfig.ts` against `password` field. You can comment Encrypt bloack ater this.
313+
17. For executing Postgres DB test case, navigate to `testConfig.ts` and provide values for `dbUsername, dbPassword, dbServerName, dbPort, dbName`. Refer to `tests/DB.test.ts` for connecting to DB and Firing a Query.
314+
18. For viewing trace files, go to folder where `trace.zip` is generated and execute :
269315
```JS
270316
npx playwright show-trace trace.zip
271317
```
272-
18. You can change the Logging Message at Test Case/Test Step Level in CustomReporterConfig.ts file
273-
19. In `tsconfig.json` file in `paths` section we can re-assign the long path imports like '../../' to a variable which starts with '@' and then we can use it to shorten our import statements in respective file.
318+
19. You can change the Logging Message at Test Case/Test Step Level in CustomReporterConfig.ts file
319+
20. In `tsconfig.json` file in `paths` section we can re-assign the long path imports like '../../' to a variable which starts with '@' and then we can use it to shorten our import statements in respective file.
274320
In the below example wherever '../../pageFactory/pageRepository/' import statement is used we can replace it with '@pages'
275321
```JS
276322
"@pages/*":["pageFactory/pageRepository/*"]
277323
```
278-
20. Network Replay :
324+
21. Network Replay :
279325
For using this featre in Playwright we use HAR file.
280326
HAR (HTTP Archive) is a file format used by several HTTP session tools to export the captured data. This can be highly useful in troubleshooting complex issues by obtaining additional information about the network requests that are generated in the browser while an issue occurs.
281327

@@ -292,7 +338,7 @@ await page.routeFromHAR('har/personalInfo.har',{update:false});
292338
where `update:false` means to use the existing HAR from from the path given in first paraeter `har/personalInfo.har`, to see this in action you can turn off your internet and run the script, complete webpage is mocked up along with assertions on the browser of your choice this is done using the Network Replay feature and by using our recorded HAR file.
293339
We can use this feature when webpage is down for some reason and we want to test some scenarios.
294340

295-
21. Logging is implemented in `CustomReporterConfig.ts` using winston logger.
341+
22. Logging is implemented in `CustomReporterConfig.ts` using winston logger.
296342

297343
First we have to create a logger object using winston.createLogger and then provid the configuration you need.
298344
First argument is "level" for which i have provided value as "info", in winston logger every logging level is provided with a numeric value, for info the numeric value is 2, so if we provide level as info then all the logs which are equal to or less than info level will be displayed. In our case logs with error(0) and warn(1) wil also be logged. For more info on logging refer below link
@@ -307,7 +353,7 @@ Once logger object is created I have provided `logger.add(console);` which instr
307353

308354
Once logger object is created you can use this instead of console.log in your framework and these logs will be written both in your console and log file.
309355

310-
22. UI mode in Playwright is lets you explore, run and debug tests, it comes with a built-in watch mode. It opens like Traceviewer where you can use the window to find selectors, its directly integrated to VS Code, all the browsers definned in playwright config will be automatically picked up and you can chosse to run individual test cases in browser of choice and also we can run tests directly from UI mode instead of IDE. I have used the tag `@Smoke` in `test:ui` section of package.json, because all my UI test cases are tagged with `@Smoke` tag and we want to run only Web based test cases. To use UI mode use below command with `ENV` value of your choice
356+
23. UI mode in Playwright is lets you explore, run and debug tests, it comes with a built-in watch mode. It opens like Traceviewer where you can use the window to find selectors, its directly integrated to VS Code, all the browsers definned in playwright config will be automatically picked up and you can chosse to run individual test cases in browser of choice and also we can run tests directly from UI mode instead of IDE. I have used the tag `@Smoke` in `test:ui` section of package.json, because all my UI test cases are tagged with `@Smoke` tag and we want to run only Web based test cases. To use UI mode use below command with `ENV` value of your choice
311357

312358
**Windows CMD:**
313359
```batch
@@ -324,9 +370,9 @@ $env:ENV="qa"; npm run test:ui
324370
ENV=qa npm run test:ui
325371
```
326372

327-
23. For Extracting text from PDF we are using `pdfjs-dist-es5` library. You can run the test case `PdfToText.test.ts` to verify contents of PDF file. `getPDFText()` method in `lib/WebActions.ts` class is used for extracting text from PDF file.
373+
24. For Extracting text from PDF we are using `pdfjs-dist-es5` library. You can run the test case `PdfToText.test.ts` to verify contents of PDF file. `getPDFText()` method in `lib/WebActions.ts` class is used for extracting text from PDF file.
328374

329-
24. Accessibility test case is written in `tests/accessibility/Axe.test.ts`, to run this test use the command
375+
25. Accessibility test case is written in `tests/accessibility/Axe.test.ts`, to run this test use the command
330376

331377
**Windows CMD:**
332378
```batch
@@ -343,10 +389,10 @@ $env:ENV="qa"; npm run test:accessibility
343389
ENV=qa npm run test:accessibility
344390
```
345391

346-
25. GitHub Actions is configured in `.github/workflows/playwright.yml` file and events(trigger points) are set to pus/pull actions on master branch. Changes in command to run test cases can be made in "Run tests" section in this file.
347-
26. Once GitHub Actions job is completed Slack notification is triggered to the assigned channel with build status and html-report link. For enabling Slack you have to configure Incoming Webhooks for your repo, below is the great tutorial on that.
392+
26. GitHub Actions is configured in `.github/workflows/playwright.yml` file and events(trigger points) are set to pus/pull actions on master branch. Changes in command to run test cases can be made in "Run tests" section in this file.
393+
27. Once GitHub Actions job is completed Slack notification is triggered to the assigned channel with build status and html-report link. For enabling Slack you have to configure Incoming Webhooks for your repo, below is the great tutorial on that.
348394
<a>https://www.youtube.com/watch?v=hzIub2noFw8&t=357s&pp=ygUUZ2l0aHViIGFjdGlvbnMgc2xhY2s%3D</a>
349-
27. For Configuring Ortoni HTML Report, navigate to "playwright.config.ts" and provide desired changes "reportConfig" variable, then pass this variable in reporter section as ,['ortoni-report', reportConfig]. For more details on this please refer below video
395+
28. For Configuring Ortoni HTML Report, navigate to "playwright.config.ts" and provide desired changes "reportConfig" variable, then pass this variable in reporter section as ,['ortoni-report', reportConfig]. For more details on this please refer below video
350396
<a>https://www.youtube.com/watch?v=HMaiL6cARZk</a>
351397

352398
## Reports

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
"test:parallel": "cross-env ENV=%ENV% npx playwright test --grep @Smoke --project=Chrome",
1313
"test:serial": "cross-env ENV=%ENV% npx playwright test --grep @Smoke --workers=1 --project=Chrome",
1414
"test:serial:ci": "npx playwright test --grep @Smoke --workers=1 --project=Chrome",
15+
"test:shard": "cross-env ENV=%ENV% npx playwright test --grep @Smoke --workers=1 --project=Chrome --reporter=blob --shard=%SHARD_INDEX%/%SHARD_TOTAL%",
16+
"test:shard:ci": "npx playwright test --grep @Smoke --workers=1 --project=Chrome --reporter=blob --shard=${SHARD_INDEX}/${SHARD_TOTAL}",
17+
"test:merge:reports": "npx playwright merge-reports --reporter html ./all-blob-reports",
1518
"test:ui": "cross-env ENV=%ENV% npx playwright test --grep @Smoke --ui",
1619
"test:api": "cross-env ENV=%ENV% npx playwright test --grep @API --workers=1 --project=API",
1720
"test:db": "cross-env ENV=%ENV% npx playwright test DB.test.ts --project=DB",

‎playwright.config.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ const config: PlaywrightTestConfig = {
4242
retries: 0,
4343

4444
//Reporters
45-
reporter: isCI
46-
? [[`./CustomReporterConfig.ts`], [`allure-playwright`], [`html`, { outputFolder: 'html-report', open: 'never' }]]
47-
: [[`./CustomReporterConfig.ts`], [`allure-playwright`], [`html`, { outputFolder: 'html-report', open: 'never' }],['ortoni-report', reportConfig]],
45+
reporter: isCI
46+
? [[`./CustomReporterConfig.ts`], [`allure-playwright`], [`blob`]]
47+
: [[`./CustomReporterConfig.ts`], [`allure-playwright`], [`html`, { outputFolder: 'html-report', open: 'never' }], ['ortoni-report', reportConfig]],
4848

4949
projects: [
5050
{

0 commit comments

Comments
 (0)