feat: add bilingual labs and Node 24 workflows

.github/workflows/deploy-pages.yml

@@ -17,13 +17,13 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/configure-pages@v5
+      - uses: actions/checkout@v5
+      - uses: actions/configure-pages@v6
       - uses: actions/jekyll-build-pages@v1
         with:
           source: ./
           destination: ./_site
-      - uses: actions/upload-pages-artifact@v3
+      - uses: actions/upload-pages-artifact@v5
 
   deploy:
     environment:
@@ -34,4 +34,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v5

.github/workflows/playwright-tests.yml

@@ -28,10 +28,10 @@ jobs:
       run:
         working-directory: playwright-tests
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v6
         with:
-          node-version: 20
+          node-version: 24
       - name: Install dependencies
         run: npm ci
       - name: Install Playwright browsers
@@ -48,15 +48,15 @@ jobs:
         env:
           JUNIT_PATH: ${{ matrix.junitPath }}
       - name: Upload ${{ matrix.suite }} HTML report
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         if: always()
         with:
           name: playwright-report-${{ matrix.suite }}
           path: playwright-tests/${{ matrix.reportPath }}/
           if-no-files-found: error
           retention-days: 30
       - name: Upload ${{ matrix.suite }} screenshots, traces, and JUnit results
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         if: always()
         with:
           name: test-results-${{ matrix.suite }}

_config.yml

@@ -12,6 +12,14 @@ exclude:
   - Gemfile.lock
   - assets/initial-research.md
 defaults:
+  - scope:
+      path: ""
+    values:
+      lang: en
+  - scope:
+      path: "fr"
+    values:
+      lang: fr
   - scope:
       path: "images"
     values:

_includes/components/sidebar.html

@@ -0,0 +1,43 @@
+{% assign current_language = page.lang | default: 'en' %}
+{% assign english_url = page.url | remove_first: '/fr' %}
+{% assign french_url = '/fr' | append: english_url %}
+{% assign french_page = site.html_pages | where: 'url', french_url | first %}
+{% unless french_page %}{% assign french_url = '/fr/' %}{% endunless %}
+{% if current_language == 'fr' %}
+  {% assign home_url = '/fr/' %}
+  {% assign home_title = 'Atelier Playwright 101' %}
+  {% assign navigation_label = 'Navigation des ateliers' %}
+{% else %}
+  {% assign home_url = '/' %}
+  {% assign home_title = site.title %}
+  {% assign navigation_label = 'Workshop navigation' %}
+{% endif %}
+<header class="side-bar">
+  <div class="site-header">
+    <a href="{{ home_url | relative_url }}" class="site-title lh-tight">{{ home_title }}</a>
+    <button id="menu-button" class="site-button btn-reset" aria-label="Menu" aria-expanded="false">
+      <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
+    </button>
+  </div>
+  <nav aria-label="Language / Langue" class="px-3 py-3">
+    {% if current_language == 'fr' %}
+      <a href="{{ english_url | relative_url }}" lang="en" hreflang="en">English</a>
+      <span aria-hidden="true"> | </span><span lang="fr" aria-current="true">Français</span>
+    {% else %}
+      <span lang="en" aria-current="true">English</span><span aria-hidden="true"> | </span>
+      <a href="{{ french_url | relative_url }}" lang="fr" hreflang="fr">Français</a>
+    {% endif %}
+  </nav>
+  <nav id="site-nav" class="site-nav" aria-label="{{ navigation_label }}">
+    <ul class="nav-list">
+      {% assign navigation_pages = site.html_pages | where: 'lang', current_language | sort: 'nav_order' %}
+      {% for navigation_page in navigation_pages %}
+        {% if navigation_page.nav_order and navigation_page.nav_exclude != true %}
+          <li class="nav-list-item">
+            <a href="{{ navigation_page.url | relative_url }}" class="nav-list-link{% if page.url == navigation_page.url %} active{% endif %}"{% if page.url == navigation_page.url %} aria-current="page"{% endif %}>{{ navigation_page.title }}</a>
+          </li>
+        {% endif %}
+      {% endfor %}
+    </ul>
+  </nav>
+</header>

_layouts/default.html

@@ -0,0 +1,43 @@
+---
+layout: table_wrappers
+---
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
+{% include head.html %}
+<body>
+  <a class="skip-to-main" href="#main-content">{% if page.lang == 'fr' %}Aller au contenu principal{% else %}Skip to main content{% endif %}</a>
+  {% include icons/icons.html %}
+  {% if page.nav_enabled == true %}
+    {% include components/sidebar.html %}
+  {% elsif layout.nav_enabled == true and page.nav_enabled == nil %}
+    {% include components/sidebar.html %}
+  {% elsif site.nav_enabled != false and layout.nav_enabled == nil and page.nav_enabled == nil %}
+    {% include components/sidebar.html %}
+  {% endif %}
+  <div class="main" id="top">
+    {% include components/header.html %}
+    <div class="main-content-wrap">
+      {% include components/breadcrumbs.html %}
+      <div id="main-content" class="main-content">
+        <main>
+          {% if site.heading_anchors != false %}
+            {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
+          {% else %}
+            {{ content }}
+          {% endif %}
+          {% if page.has_toc != false %}
+            {% include components/children_nav.html %}
+          {% endif %}
+        </main>
+        {% include components/footer.html %}
+      </div>
+    </div>
+    {% if site.search_enabled != false %}
+      {% include components/search_footer.html %}
+    {% endif %}
+  </div>
+  {% if site.mermaid %}
+    {% include components/mermaid.html %}
+  {% endif %}
+</body>
+</html>

fr/index.md

@@ -0,0 +1,74 @@
+---
+layout: default
+title: Accueil
+nav_order: 1
+description: "Playwright 101 : des récits utilisateurs aux tests automatisés"
+permalink: /fr/
+---
+
+## Atelier Playwright 101
+
+Des récits utilisateurs aux tests automatisés avec Playwright, GitHub Copilot et Azure DevOps
+{: .fs-6 .fw-300 }
+
+## Présentation de l'atelier
+
+Cet atelier pratique accompagne les spécialistes de l'assurance qualité dans le
+passage des tests manuels à l'automatisation du navigateur avec Playwright. Vous
+partirez de récits utilisateurs, les transformerez en cas de test structurés, puis
+implémenterez ces tests avec le cadre de tests de bout en bout libre de Microsoft.
+
+Vous utiliserez GitHub Copilot pour accélérer la rédaction des tests et découvrirez
+comment le développement assisté par l'IA s'intègre au travail de test. Au labo 04,
+choisissez GitHub Actions ou Azure DevOps pour exécuter en parallèle les suites
+fonctionnelle et d'accessibilité. Le labo 05 prolonge l'atelier avec des analyses
+d'accessibilité axe, l'examen des échecs et des vérifications manuelles.
+
+Aucune expérience préalable en automatisation n'est requise. Le parcours principal
+dure environ une heure avec l'un des deux labos CI. Prévoyez 20 minutes de plus
+pour le volet accessibilité.
+
+## Modules de l'atelier
+
+| Module | Titre | Durée | Description |
+| --- | --- | --- | --- |
+| Labo 00 | [Prérequis](labs/lab-00-prerequisites/) | Avant l'atelier | Préparer l'environnement |
+| Labo 01 | [Des récits utilisateurs aux cas de test](labs/lab-01-test-planning/) | 10 min | Relier les exigences aux tests |
+| Labo 02 | [Votre premier test Playwright](labs/lab-02-playwright-basics/) | 20 min | Rédiger des tests en pratique |
+| Labo 03 | [GitHub Copilot pour les tests](labs/lab-03-copilot-testing/) | 15 min | Générer des tests avec l'IA |
+| Labo 04 | [Pipeline CI/CD (GitHub Actions)](labs/lab-04-ci-pipeline/) | 15 min | Automatiser l'exécution des tests |
+| Labo 04 | [Pipeline CI/CD (Azure DevOps)](labs/lab-04-ci-pipeline-ado/) | 15 min | Automatiser l'exécution des tests |
+| Labo 05 | [Tests d'accessibilité](labs/lab-05-accessibility/) | 20 min (complément) | Analyses axe, résultats CI et vérifications manuelles |
+
+## Application cible
+
+Tous les labos utilisent la page de recherche Ontario.ca
+(`https://www.ontario.ca/search`) comme système à tester. Cette application React
+monopage publique propose un champ de recherche, des filtres, une pagination et des
+résultats dynamiques sans authentification ni accès particulier. Les participants
+utilisent le même environnement en ligne pour limiter la configuration nécessaire.
+
+Les tests ciblent la version anglaise du site. Gardez les valeurs de recherche,
+les libellés d'interface et les sélecteurs anglais dans le code, même lorsque vous
+suivez les consignes en français.
+
+## Démarrage rapide
+
+Clonez le dépôt, installez les dépendances et vérifiez votre environnement :
+
+```bash
+git clone https://github.com/devopsabcs-engineering/playwright-101.git
+cd playwright-101/playwright-tests
+npm install
+npx playwright install --with-deps chromium
+npx playwright test
+```
+
+La commande par défaut exécute uniquement les tests fonctionnels, y compris deux
+tests `@failure-demo` qui échouent volontairement. Exécutez
+`npm run test:accessibility` pour les analyses axe, puis
+`npx playwright show-report playwright-report/accessibility` pour consulter leur
+rapport. Le site en ligne peut changer ou présenter des problèmes d'accessibilité.
+Pour les problèmes de configuration, consultez les
+[prérequis](labs/lab-00-prerequisites/); pour les constats d'analyse, consultez le
+[labo 05](labs/lab-05-accessibility/).

fr/labs/lab-00-prerequisites/README.md

@@ -0,0 +1,118 @@
+---
+layout: default
+title: "Labo 00 : Prérequis"
+nav_order: 2
+description: "Préparer votre environnement de développement pour l'atelier Playwright 101"
+permalink: /fr/labs/lab-00-prerequisites/
+---
+
+| | |
+| --- | --- |
+| **Durée** | 15 minutes (à votre rythme) |
+| **Niveau** | Débutant |
+| **Type** | Configuration |
+
+## Objectifs d'apprentissage
+
+À la fin de ce labo, votre environnement de développement sera configuré pour
+rédiger et exécuter des tests Playwright tout au long de l'atelier.
+
+## Prérequis
+
+* Un système Windows, macOS ou Linux
+* Un accès Internet
+* Un compte GitHub (l'offre gratuite suffit)
+
+## Exercices
+
+### Exercice 1 : Installer Node.js 20 ou une version ultérieure
+
+Téléchargez et installez Node.js 20 ou une version ultérieure à partir de
+[nodejs.org](https://nodejs.org). La version LTS (prise en charge à long terme)
+est recommandée. Vérifiez l'installation :
+
+```bash
+node --version
+```
+
+La sortie doit afficher `v20.x.x` ou une version ultérieure.
+
+### Exercice 2 : Installer Visual Studio Code
+
+Téléchargez et installez Visual Studio Code à partir de
+[code.visualstudio.com](https://code.visualstudio.com). Vous utiliserez cet éditeur
+pour rédiger vos tests et interagir avec GitHub Copilot.
+
+### Exercice 3 : Installer les extensions VS Code
+
+Ouvrez VS Code et installez les extensions suivantes à partir du catalogue :
+
+1. **Playwright Test for VS Code** permet d'exécuter et de déboguer les tests,
+   ainsi que de générer du code directement dans l'éditeur.
+2. **GitHub Copilot** permet la rédaction de tests assistée par l'IA au labo 03.
+
+> [!TIP]
+> Recherchez chaque extension par son nom dans le volet Extensions
+> (`Ctrl+Shift+X`), puis sélectionnez **Install** (Installer).
+
+### Exercice 4 : Cloner le dépôt
+
+Ouvrez un terminal et clonez le dépôt de l'atelier :
+
+```bash
+git clone https://github.com/devopsabcs-engineering/playwright-101.git
+```
+
+### Exercice 5 : Installer les dépendances
+
+Accédez au répertoire du projet de tests et installez les dépendances Node.js :
+
+```bash
+cd playwright-101/playwright-tests
+npm install
+```
+
+### Exercice 6 : Installer les navigateurs Playwright
+
+Playwright a besoin des exécutables de navigateur pour lancer les tests. Installez
+Chromium et ses dépendances système :
+
+```bash
+npx playwright install --with-deps chromium
+```
+
+### Exercice 7 : Vérifier la configuration
+
+Exécutez la suite fonctionnelle pour confirmer que les tests démarrent :
+
+```bash
+npx playwright test
+```
+
+La suite comprend sept scénarios normaux et deux tests `@failure-demo` qui échouent
+volontairement pour pratiquer le diagnostic. Pour vérifier uniquement les scénarios
+normaux :
+
+```bash
+npx playwright test --grep-invert @failure-demo
+```
+
+Les tests ciblent la version anglaise d'Ontario.ca. Conservez les chaînes anglaises
+dans le code. Le site en ligne peut évoluer; distinguez un problème de configuration
+d'un échec d'assertion avant de modifier l'environnement.
+
+## Point de vérification
+
+Les sept scénarios normaux démarrent sans erreur de dépendance ni de navigateur.
+Examinez tout échec lié au site en ligne et distinguez-le des deux démonstrations
+intentionnelles. En cas d'erreur de configuration, reprenez l'étape concernée.
+
+## Résumé
+
+Votre environnement comprend Node.js, VS Code avec les extensions requises et
+Chromium pour Playwright. Vous savez exécuter la suite et reconnaître les échecs
+intentionnels.
+
+## Étape suivante
+
+Passez au [labo 01 : Des récits utilisateurs aux cas de test](../lab-01-test-planning/).