Jenkins + Playwright: Construire un Pipeline CI de Zéro

Les pipelines Jenkins pour Playwright se définissent dans un Jenkinsfile avec la syntaxe de pipeline déclaratif. Le pipeline est organisé en étapes distinctes : installation des dépendances, configuration des navigateurs, exécution des tests et archivage des artefacts.

Pourquoi Jenkins reste pertinent

De nombreuses entreprises ont des années d'investissement dans leur infrastructure Jenkins
Hébergement on-premise pour les exigences de sécurité et de conformité
Très personnalisable : des plugins pour presque tout
Certaines architectures CI/CD combinent Jenkins et Kubernetes à grande échelle

Si votre entreprise utilise Jenkins, on ne passe pas à GitHub Actions d'un claquement de doigts. On travaille avec ce qu'on a.

Prérequis

Vous aurez besoin de Jenkins installé (on-premise ou via Jenkins dans Docker), d'un projet Playwright dans Git (GitHub, GitLab, Bitbucket, etc.), et des plugins Pipeline, Git, HTML Publisher et JUnit.

Jenkinsfile de base

Les pipelines Jenkins se définissent dans un Jenkinsfile à la racine du dépôt. Deux syntaxes coexistent : Déclarative (structurée) et Scripted (Groovy). Utilisez Déclarative sauf si vous avez besoin d'une logique avancée.

// Jenkinsfile
pipeline {
    agent {
        docker {
            image 'mcr.microsoft.com/playwright:v1.44.0-jammy'
            args '-u root'  // Exécuter en root pour éviter les problèmes de permissions
        }
    }

    environment {
        BASE_URL = credentials('staging-base-url')  // Depuis les credentials Jenkins
        CI = 'true'
    }

    stages {
        stage('Install') {
            steps {
                sh 'npm ci'
            }
        }

        stage('Run Tests') {
            steps {
                sh 'npx playwright test --reporter=list,junit'
            }
            post {
                always {
                    // Publier les résultats JUnit
                    junit 'test-results/results.xml'

                    // Publier le rapport HTML
                    publishHTML([
                        allowMissing: false,
                        alwaysLinkToLastBuild: true,
                        keepAll: true,
                        reportDir: 'playwright-report',
                        reportFiles: 'index.html',
                        reportName: 'Playwright Report'
                    ])
                }
            }
        }
    }

    post {
        failure {
            // Notifier en cas d'échec
            emailext(
                subject: "FAILED: ${env.JOB_NAME} #${env.BUILD_NUMBER}",
                body: "Tests failed. See: ${env.BUILD_URL}",
                to: 'qa-team@mycompany.com'
            )
        }
    }
}

Pipeline multi-étapes

Un pipeline réaliste comporte plus de stages : linting, tests unitaires, puis E2E.

pipeline {
    agent {
        docker {
            image 'mcr.microsoft.com/playwright:v1.44.0-jammy'
            args '-u root'
        }
    }

    environment {
        BASE_URL = credentials('staging-url')
        NODE_ENV = 'test'
    }

    stages {
        stage('Install Dependencies') {
            steps {
                sh 'npm ci'
            }
        }

        stage('Lint') {
            steps {
                sh 'npm run lint'
            }
        }

        stage('Unit Tests') {
            steps {
                sh 'npm run test:unit -- --reporter=junit'
            }
            post {
                always {
                    junit 'unit-test-results/*.xml'
                }
            }
        }

        stage('Smoke Tests') {
            steps {
                sh '''
                    npx playwright test \
                        --grep @smoke \
                        --project=chromium \
                        --reporter=list,junit
                '''
            }
            post {
                always {
                    junit 'test-results/results.xml'
                }
            }
        }

        stage('Full Regression') {
            when {
                anyOf {
                    branch 'main'
                    branch 'release/*'
                }
            }
            steps {
                sh '''
                    npx playwright test \
                        --workers=4 \
                        --reporter=list,junit,html
                '''
            }
            post {
                always {
                    junit 'test-results/results.xml'
                    publishHTML([
                        reportDir: 'playwright-report',
                        reportFiles: 'index.html',
                        reportName: 'Full Regression Report',
                        keepAll: true
                    ])
                }
            }
        }
    }
}

Exécution parallèle des tests

Lancez les tests sur plusieurs navigateurs en parallèle avec le bloc parallel de Jenkins :

stage('Cross-Browser Tests') {
    parallel {
        stage('Chrome') {
            steps {
                sh 'npx playwright test --project=chromium --reporter=junit'
            }
            post {
                always {
                    junit 'test-results/chromium-results.xml'
                }
            }
        }

        stage('Firefox') {
            steps {
                sh 'npx playwright test --project=firefox --reporter=junit'
            }
            post {
                always {
                    junit 'test-results/firefox-results.xml'
                }
            }
        }

        stage('Safari') {
            steps {
                sh 'npx playwright test --project=webkit --reporter=junit'
            }
            post {
                always {
                    junit 'test-results/webkit-results.xml'
                }
            }
        }
    }
}

Pour que ça fonctionne, votre playwright.config.ts doit écrire dans des fichiers séparés par projet :

reporter: [
  ['junit', {
    outputFile: `test-results/${process.env.BROWSER || 'all'}-results.xml`
  }],
],

Et exécuter avec :

BROWSER=chromium npx playwright test --project=chromium

Sharding sur plusieurs agents

Pour les suites de tests volumineuses, répartissez l'exécution sur plusieurs agents Jenkins :

pipeline {
    agent none  // Chaque stage choisit son propre agent

    stages {
        stage('Test') {
            parallel {
                stage('Shard 1/3') {
                    agent { docker { image 'mcr.microsoft.com/playwright:v1.44.0-jammy' } }
                    steps {
                        sh 'npm ci'
                        sh 'npx playwright test --shard=1/3 --reporter=blob'
                    }
                    post {
                        always {
                            archiveArtifacts 'blob-report/**'
                        }
                    }
                }

                stage('Shard 2/3') {
                    agent { docker { image 'mcr.microsoft.com/playwright:v1.44.0-jammy' } }
                    steps {
                        sh 'npm ci'
                        sh 'npx playwright test --shard=2/3 --reporter=blob'
                    }
                    post {
                        always {
                            archiveArtifacts 'blob-report/**'
                        }
                    }
                }

                stage('Shard 3/3') {
                    agent { docker { image 'mcr.microsoft.com/playwright:v1.44.0-jammy' } }
                    steps {
                        sh 'npm ci'
                        sh 'npx playwright test --shard=3/3 --reporter=blob'
                    }
                    post {
                        always {
                            archiveArtifacts 'blob-report/**'
                        }
                    }
                }
            }
        }

        stage('Merge Reports') {
            agent { docker { image 'mcr.microsoft.com/playwright:v1.44.0-jammy' } }
            steps {
                // Télécharger les artefacts de tous les shards
                copyArtifacts(projectName: env.JOB_NAME, selector: specific(env.BUILD_NUMBER))
                sh 'npx playwright merge-reports --reporter html,junit ./blob-report'
            }
            post {
                always {
                    junit 'test-results/results.xml'
                    publishHTML([
                        reportDir: 'playwright-report',
                        reportFiles: 'index.html',
                        reportName: 'Merged Report'
                    ])
                }
            }
        }
    }
}

Credentials et secrets

Ne jamais mettre des credentials en dur dans le Jenkinsfile. Utilisez le Credentials Manager de Jenkins :

environment {
    // Credential de type string
    BASE_URL = credentials('staging-base-url')

    // Credential username + password (crée deux variables d'environnement)
    ADMIN = credentials('admin-credentials')
    // Crée : ADMIN_USR (username) et ADMIN_PSW (password)
}

steps {
    withCredentials([
        string(credentialsId: 'stripe-test-key', variable: 'STRIPE_KEY'),
        usernamePassword(
            credentialsId: 'db-credentials',
            usernameVariable: 'DB_USER',
            passwordVariable: 'DB_PASS'
        )
    ]) {
        sh 'npx playwright test'
    }
}

Déclencher les tests

À chaque push

triggers {
    // Scruter le SCM toutes les 5 minutes (moins bien que les webhooks)
    pollSCM('H/5 * * * *')
}

Mieux : configurez un webhook dans GitHub/GitLab pour déclencher les builds Jenkins automatiquement.

Runs planifiés (nightly)

triggers {
    // Lancer à 2h du matin tous les soirs
    cron('0 2 * * *')
}

Sur création de PR

Utilisez le plugin GitHub Branch Source ou Multibranch Pipeline. Jenkins lance automatiquement les tests sur chaque PR et rapporte le statut vers GitHub.

Problèmes courants Jenkins + Playwright

"No such file or directory: /home/pwuser/..."

Playwright s'exécute en tant qu'utilisateur non-root dans son image Docker. Ajoutez args '-u root' à l'agent docker, ou ajustez les chemins de fichiers.

"Failed to launch chromium: error while loading shared libraries"

Dépendances système manquantes. Utilisez l'image Docker officielle Playwright : elle contient tout le nécessaire.

Le rapport HTML n'apparaît pas dans Jenkins

La Content Security Policy de Jenkins bloque le JavaScript dans les rapports HTML. Exécutez ceci dans la console de script Jenkins :

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")

Ou configurez le plugin HTML Publisher pour assouplir la CSP.

Les tests passent en local, échouent dans Jenkins

Vérifiez : les variables d'environnement, l'URL de base, les paramètres sandbox du navigateur. Ajoutez le flag --no-sandbox si nécessaire (les conteneurs Docker en ont souvent besoin pour Chromium).

Jenkinsfile minimal fonctionnel

Pour démarrer avec quelque chose qui fonctionne :

pipeline {
    agent {
        docker {
            image 'mcr.microsoft.com/playwright:v1.44.0-jammy'
            args '-u root'
        }
    }
    stages {
        stage('Test') {
            steps {
                sh 'npm ci'
                sh 'npx playwright test --reporter=junit'
            }
            post {
                always {
                    junit 'test-results/results.xml'
                }
            }
        }
    }
}

C'est le minimum. Commencez ici, puis ajoutez les stages, l'exécution parallèle et les notifications selon les besoins.

Récapitulatif

| Concept | Mise en œuvre |

|---------|--------------|

| Agent | Image Docker officielle Playwright |

| Secrets | Jenkins Credentials Manager |

| Résultats | Plugin JUnit + publishHTML |

| Parallèle | Bloc parallel {} ou plusieurs agents |

| Sharding | --shard=X/Y + merge-reports |

| Planification | Trigger cron() |

| Sur PR | Plugin GitHub Branch Source + webhook |

Jenkins demande plus de configuration que GitHub Actions, mais une fois en place, c'est stable et puissant. L'approche Jenkinsfile (pipeline-as-code) signifie que la configuration CI vit dans Git aux côtés des tests : versionnée, révisable et reproductible.