Captures d'écran de PR

Intégrez des captures d'écran avant/après dans les descriptions de pull request pour que les relecteurs voient le changement visuel sans avoir besoin de récupérer la branche.

Quand utiliser cette compétence

Utilisez cette compétence quand une PR change quelque chose de visible :

Mise en page, style, CSS
Graphiques, tableaux de bord, visualisations de données
Composants UI, formulaires, modales
Messages d'erreur, sortie CLI, formatage des logs

Modèle de description PR

Placez les captures d'écran directement dans le corps de la description PR. Évitez de les envelopper dans un collapse <details> — les relecteurs sont plus susceptibles de regarder des images visibles sans avoir besoin de cliquer.

**Before** — brève description du problème :

![before](url-to-before-image)

**After** — brève description de la correction :

![after](url-to-after-image)

Gardez le texte bref. Une ou deux phrases par image décrivant ce que le lecteur devrait remarquer. Laissez l'image porter la majorité de la communication.

Plusieurs changements

Pour les PR avec plusieurs changements visuels, utilisez des paires avant/après distinctes avec des titres :

## Alignement de la barre de filtres

**Before** — conflit de bordure 1px entre boutons adjacents :

![before-filters](url)

**After** — bordures qui se chevauchent proprement, teinte de surbrillance ajoutée :

![after-filters](url)

## Info-bulle du graphique

**Before** — info-bulle coupée au bord du conteneur :

![before-tooltip](url)

**After** — info-bulle repositionnée pour rester visible :

![after-tooltip](url)

Dimensionnement des images

Prenez des captures d'écran à la résolution native 1x — ne redimensionnez pas avec PIL (crée des artefacts)
Contrôlez la taille d'affichage en HTML quand les images sont trop grandes :
```
<img src="url" width="600" alt="description">
```
Les paires avant/après doivent utiliser la même largeur de viewport et le même cadrage — sinon la comparaison n'a pas de sens

Téléchargement d'images

Azure DevOps

Téléchargez les images en tant que pièces jointes PR via l'API REST :

$token = az account get-access-token `
    --resource "499b84ac-1321-427f-aa17-267ca6975798" `
    --query accessToken -o tsv

$base = "https://{org}.visualstudio.com/{projectId}/_apis/git/repositories/{repoId}"
$url = "$base/pullRequests/{prId}/attachments/screenshot.png?api-version=7.1-preview.1"

# Utilisez HttpClient — Invoke-RestMethod peut corrompre les données binaires
$client = New-Object System.Net.Http.HttpClient
$client.DefaultRequestHeaders.Authorization = `
    New-Object System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", $token)
$content = New-Object System.Net.Http.ByteArrayContent(
    , [System.IO.File]::ReadAllBytes("screenshot.png")
)
$content.Headers.ContentType = `
    [System.Net.Http.Headers.MediaTypeHeaderValue]::new("application/octet-stream")
$resp = $client.PostAsync($url, $content).Result

Référencez dans la description PR :

![description](https://{org}.visualstudio.com/{projectId}/_apis/git/repositories/{repoId}/pullRequests/{prId}/attachments/screenshot.png)

Pièges d'Azure DevOps :

Utilisez {org}.visualstudio.com PAS dev.azure.com/{org} — le moteur de rendu markdown d'AzDO utilise .visualstudio.com. Le format dev.azure.com se charge notablement plus lentement
Utilisez POST pas PUT (PUT retourne 405)
La version d'API doit être 7.1-preview.1
Impossible de retélécharger avec le même nom de fichier — utilisez un nouveau nom (p. ex. screenshot-v2.png)
Utilisez HttpClient pas Invoke-RestMethod — IRM peut corrompre les données binaires
Les chemins relatifs au repository ne fonctionnent pas dans les descriptions PR — vous devez utiliser des URLs complètes
Ne validez pas les images sur la branche juste pour les captures d'écran PR

GitHub

⚠️ Travail en cours. Le téléchargement d'images par glisser-déposer de GitHub utilise des endpoints internes qui nécessitent des cookies de navigateur. Il n'y a pas encore d'API publique propre pour télécharger des images dans les descriptions PR.

Solution actuelle : Validez les images sur une branche orpheline pr-assets et référencez via des URLs blob (github.com/{owner}/{repo}/blob/pr-assets/{file}?raw=true). Cela fonctionne mais est peu élégant — les contributions pour une meilleure approche sont les bienvenues.

Directives

Capturez l'état avant AVANT de faire les changements — c'est facile d'oublier, et reconstruire l'état d'origine plus tard est lent et sujet à erreurs
Gardez les descriptions brèves — une ou deux phrases par image indiquant ce qui a changé suffisent
Préférez les images visibles aux sections réduites — les captures d'écran derrière des balises <details> sont faciles à ignorer
Annotez quand le changement est subtil — utilisez la compétence image-annotations pour ajouter des appels quand la différence n'est pas immédiatement évidente
Faites correspondre le viewport et le cadrage entre les paires avant/après pour que la comparaison soit significative

Limitations

Le téléchargement d'images GitHub nécessite des solutions de contournement (pas d'API publique pour les images de description PR)
Les noms de fichiers des pièces jointes Azure DevOps ne peuvent pas être réutilisés — planifiez la dénomination à l'avance
Les très grandes images (>10MB) peuvent ne pas s'afficher en ligne sur certaines plates-formes

pr-screenshots