Skip to content

Commit a0ec815

Browse files
emmanuelknafoemmanuelknafo
committed
feat: Add Playwright 101 workshop materials and setup
- Created LICENSE file with MIT License. - Added README.md for workshop overview and quick start instructions. - Configured _config.yml for site settings and navigation. - Included custom head script for Mermaid diagrams. - Developed facilitator guide for 1-hour workshop delivery. - Created index.md for home page with workshop details. - Established Lab 00: Prerequisites for environment setup. - Developed Lab 01: From User Stories to Test Cases for mapping requirements. - Implemented Lab 02: Your First Playwright Test for hands-on testing. - Created Lab 03: GitHub Copilot for Testing to leverage AI in test authoring. - Added Lab 04: CI/CD Pipeline for automating tests with GitHub Actions. - Configured Playwright test suite with package.json and playwright.config.ts. - Developed test cases for Ontario.ca search functionality in ontario-search.spec.ts. - Set up TypeScript configuration for Playwright tests.
1 parent 132a0c0 commit a0ec815

18 files changed

Lines changed: 1229 additions & 0 deletions

File tree

‎.github/workflows/playwright-tests.yml‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
name: Playwright Tests
2+
on:
3+
push:
4+
branches: [main]
5+
pull_request:
6+
branches: [main]
7+
jobs:
8+
test:
9+
runs-on: ubuntu-latest
10+
defaults:
11+
run:
12+
working-directory: playwright-tests
13+
steps:
14+
- uses: actions/checkout@v4
15+
- uses: actions/setup-node@v4
16+
with:
17+
node-version: 20
18+
- name: Install dependencies
19+
run: npm ci
20+
- name: Install Playwright browsers
21+
run: npx playwright install --with-deps chromium
22+
- name: Run Playwright tests
23+
run: npx playwright test
24+
- name: Upload test report
25+
uses: actions/upload-artifact@v4
26+
if: always()
27+
with:
28+
name: playwright-report
29+
path: playwright-tests/playwright-report/
30+
retention-days: 30

‎.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,27 @@ MigrationBackup/
384384
.ionide/
385385

386386
# Fody - auto-generated XML schema
387+
388+
# Node.js
389+
node_modules/
390+
package-lock.json
391+
392+
# Playwright
393+
playwright-tests/test-results/
394+
playwright-tests/playwright-report/
395+
playwright-tests/blob-report/
396+
playwright-tests/.playwright/
397+
398+
# Jekyll
399+
_site/
400+
.sass-cache/
401+
.jekyll-cache/
402+
.jekyll-metadata
403+
Gemfile.lock
404+
405+
# OS
406+
.DS_Store
407+
Thumbs.db
387408
FodyWeavers.xsd
388409

389410
# VS Code files for those working on multiple tools

‎Gemfile‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
source "https://rubygems.org"
2+
gem "github-pages", group: :jekyll_plugins
3+
gem "webrick", "~> 1.8"

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 devopsabcs-engineering
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: "Playwright 101 Workshop"
3+
description: "From User Stories to Automated Tests with Playwright, GitHub Copilot & Azure DevOps"
4+
ms.date: 2026-04-20
5+
---
6+
7+
# Playwright 101 Workshop
8+
9+
**From User Stories to Automated Tests with Playwright, GitHub Copilot & Azure DevOps**
10+
11+
[![Playwright Tests](https://github.com/devopsabcs-engineering/playwright-101/actions/workflows/playwright-tests.yml/badge.svg)](https://github.com/devopsabcs-engineering/playwright-101/actions/workflows/playwright-tests.yml)
12+
[![GitHub Pages](https://img.shields.io/badge/Workshop_Site-GitHub_Pages-blue)](https://devopsabcs-engineering.github.io/playwright-101/)
13+
14+
This hands-on workshop guides manual QA professionals through the transition to automated testing with Playwright. In approximately one hour, participants move from writing user stories and acceptance criteria to generating, running, and maintaining automated browser tests. The workshop integrates GitHub Copilot for AI-assisted test generation and Azure DevOps for continuous integration pipelines.
15+
16+
## Quick Start
17+
18+
```bash
19+
git clone https://github.com/devopsabcs-engineering/playwright-101.git
20+
cd playwright-101/playwright-tests
21+
npm install
22+
npx playwright install
23+
npx playwright test
24+
```
25+
26+
## Workshop Site
27+
28+
Access the full workshop content at [devopsabcs-engineering.github.io/playwright-101](https://devopsabcs-engineering.github.io/playwright-101/).
29+
30+
## Workshop Modules
31+
32+
| Module | Duration | Description |
33+
|--------|----------|-------------|
34+
| Lab 00: Environment Setup | 10 min | Install Node.js, VS Code, Playwright extension, and GitHub Copilot |
35+
| Lab 01: User Stories & Test Cases | 10 min | Write user stories with acceptance criteria and derive test cases |
36+
| Lab 02: First Playwright Tests | 15 min | Generate and run browser tests against a live site |
37+
| Lab 03: GitHub Copilot for Testing | 10 min | Use AI-assisted test generation and refactoring |
38+
| Lab 04: CI/CD with Azure DevOps | 15 min | Configure automated test runs in a CI pipeline |
39+
40+
## Prerequisites
41+
42+
- Node.js 18 or later
43+
- Visual Studio Code with Playwright Test extension
44+
- GitHub Copilot subscription (for Lab 03)
45+
- Azure DevOps account (for Lab 04)
46+
- Git
47+
48+
## License
49+
50+
This project is licensed under the [MIT License](LICENSE).

‎_config.yml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
title: "Playwright 101 Workshop"
2+
description: "From User Stories to Automated Tests with Playwright, GitHub Copilot & Azure DevOps"
3+
remote_theme: just-the-docs/just-the-docs
4+
baseurl: "/playwright-101"
5+
url: "https://devopsabcs-engineering.github.io"
6+
exclude:
7+
- playwright-tests/
8+
- delivery/
9+
- node_modules/
10+
- package.json
11+
- package-lock.json
12+
- Gemfile.lock
13+
- assets/initial-research.md
14+
defaults:
15+
- scope:
16+
path: "images"
17+
values:
18+
nav_exclude: true
19+
heading_anchors: true

‎_includes/head_custom.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<script type="module">
2+
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
3+
mermaid.initialize({ startOnLoad: true });
4+
</script>

‎delivery/one-hour.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
layout: default
3+
title: "Facilitator Guide — 1-Hour Delivery"
4+
nav_exclude: true
5+
description: "Instructor guide for delivering the Playwright 101 workshop in a 1-hour session with timing, setup checklist, and talking points."
6+
---
7+
8+
## Audience
9+
10+
This guide is intended for the workshop facilitator or instructor delivering the
11+
Playwright 101 workshop in a 1-hour format.
12+
13+
## Pre-Workshop Checklist
14+
15+
- Verify ontario.ca/search is accessible (load
16+
<https://www.ontario.ca/search?query=driver+licence> in a browser)
17+
- Confirm the GitHub Pages site is live at
18+
<https://devopsabcs-engineering.github.io/playwright-101/>
19+
- Test all Playwright tests pass locally: `cd playwright-tests && npx playwright test`
20+
- Ensure attendees received the prerequisites link (Lab 00 URL)
21+
- Verify Wi-Fi and projector or screen sharing work
22+
23+
## Agenda
24+
25+
| Time | Activity | Notes |
26+
|------|----------|-------|
27+
| 0:00–0:02 | Welcome and overview | Share GitHub Pages URL |
28+
| 0:02–0:12 | Lab 01: Test Planning | Instructor-led walkthrough |
29+
| 0:12–0:32 | Lab 02: Playwright Basics | Hands-on with instructor support |
30+
| 0:32–0:47 | Lab 03: Copilot Testing | Hands-on; have fallback for no Copilot |
31+
| 0:47–0:57 | Lab 04: CI Pipeline | Demo + guided configuration |
32+
| 0:57–1:00 | Wrap-up and Q&A | Share resources |
33+
34+
## Key Talking Points
35+
36+
### Lab 01: Test Planning
37+
38+
Automation starts with good requirements. User stories bridge the gap between
39+
business needs and test cases. Encourage participants to think about acceptance
40+
criteria before writing any code.
41+
42+
### Lab 02: Playwright Basics
43+
44+
Highlight Playwright's auto-waiting behavior, which eliminates the need for
45+
explicit waits. Walk through multiple locator strategies (role, text, CSS, test ID)
46+
and demonstrate the Trace Viewer for debugging failed tests.
47+
48+
### Lab 03: Copilot-Assisted Testing
49+
50+
Introduce the two-prompt technique: provide context first, then make the request.
51+
Remind participants to always validate Copilot output against the live site, because
52+
generated selectors may not match current page structure.
53+
54+
### Lab 04: CI Pipeline
55+
56+
CI/CD ensures tests run on every code change, catching regressions early. Artifacts
57+
provide historical test reports that the team can review without re-running tests.
58+
59+
## Common Issues and Solutions
60+
61+
| Issue | Solution |
62+
|-------|----------|
63+
| Node.js version mismatch | Verify `node --version` shows v20+; use nvm to switch |
64+
| Tests timeout on first run | ontario.ca React SPA needs warm-up; increase timeout or retry |
65+
| Language splash page appears | Cookie handling in beforeEach should prevent this; verify cookie domain is `.ontario.ca` |
66+
| Selector not found | ontario.ca may update HTML; check selectors against live page |
67+
| npm install fails | Clear node_modules and package-lock.json, retry |
68+
| Copilot not available | Provide manual code snippets as fallback; lab exercises include expected output |
69+
70+
## Fallback Plan
71+
72+
If ontario.ca is down during the workshop:
73+
74+
- Use cached screenshots to demonstrate concepts
75+
- Discuss the test approach theoretically
76+
- Show the test code and explain expected behavior
77+
- Reschedule hands-on execution for a follow-up session
78+
79+
## Resources and Further Learning
80+
81+
- [Playwright Documentation](https://playwright.dev)
82+
- [Microsoft Learn: End-to-end testing with Playwright](https://learn.microsoft.com/en-us/training/modules/build-with-playwright/)
83+
- [GitHub Actions Documentation](https://docs.github.com/en/actions)
84+
- [Azure Test Plans](https://learn.microsoft.com/en-us/azure/devops/test/overview)

‎index.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
layout: default
3+
title: Home
4+
nav_order: 1
5+
description: "Playwright 101 — From User Stories to Automated Tests"
6+
permalink: /
7+
---
8+
9+
# Playwright 101 Workshop
10+
11+
From User Stories to Automated Tests with Playwright, GitHub Copilot & Azure DevOps
12+
{: .fs-6 .fw-300 }
13+
14+
## Workshop Overview
15+
16+
This hands-on workshop guides manual QA professionals through the transition from
17+
manual testing to browser automation with Playwright. You will start with user stories,
18+
translate them into structured test cases, and then implement those tests using
19+
Microsoft's open-source end-to-end testing framework.
20+
21+
Along the way, you will use GitHub Copilot to accelerate test authoring and learn how
22+
AI-assisted development fits into a modern testing workflow. The final module connects
23+
your tests to an Azure DevOps CI/CD pipeline so they run automatically on every code
24+
change.
25+
26+
No prior automation experience is required. The workshop takes approximately one hour
27+
to complete and covers the full journey from requirement analysis to continuous test
28+
execution in a live pipeline.
29+
30+
## Workshop Modules
31+
32+
| Module | Title | Duration | Description |
33+
|--------|-------|----------|-------------|
34+
| Lab 00 | [Prerequisites](labs/lab-00-prerequisites/) | Pre-workshop | Environment setup |
35+
| Lab 01 | [From User Stories to Test Cases](labs/lab-01-test-planning/) | 10 min | Map requirements to tests |
36+
| Lab 02 | [Your First Playwright Test](labs/lab-02-playwright-basics/) | 20 min | Hands-on test authoring |
37+
| Lab 03 | [GitHub Copilot for Testing](labs/lab-03-copilot-testing/) | 15 min | AI-assisted test generation |
38+
| Lab 04 | [CI/CD Pipeline](labs/lab-04-ci-pipeline/) | 15 min | Automated test execution |
39+
40+
## Target Application
41+
42+
All labs use the Ontario.ca search page (`https://www.ontario.ca/search`) as the
43+
system under test. This publicly accessible React single-page application provides
44+
rich interactive elements (search input, filters, pagination, dynamic results) without
45+
requiring authentication or special access. Every participant tests against the same
46+
live environment, which keeps setup minimal and results consistent.
47+
48+
## Quick Start
49+
50+
Clone the repository, install dependencies, and verify your environment:
51+
52+
```bash
53+
git clone https://github.com/devopsabcs-engineering/playwright-101.git
54+
cd playwright-101/playwright-tests
55+
npm install
56+
npx playwright install --with-deps chromium
57+
npx playwright test
58+
```
59+
60+
All tests should pass on a fresh clone. If any test fails, review the
61+
[Prerequisites](labs/lab-00-prerequisites/) lab for detailed setup instructions.

0 commit comments

Comments
 (0)