[Feature]: `Update snapshot` sticky header in UI Mode Attachments panel

Abierto
  • ¿Algo no está bien?
#43,833 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@microsoft-playwright-automation ya está trabajando en esto.

Desde el 1/11/2026.

  • #43835 de @microsoft-playwright-automation — abierto

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
32/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend, testing

Línea de trabajo

Start in the UI Mode Attachments panel, where each IMAGE DIFF section renders its Diff, Actual, Expected, Side by side and Slider views. Read how the existing run-level updateSnapshots option from issue #37007 and PR #37098 writes expected snapshots, since the new action must replace only one screenshot. Done when the sticky IMAGE DIFF header shows an Update snapshot button that updates just that snapshot, and no other attachment types show it. Check the design with maintainers first, because the earlier attempt in PR #42421 was archived and the issue was closed as not planned.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

needs-triage
🚀 Feature Request

Add an Update snapshot action to each IMAGE DIFF section in UI Mode's Attachments panel.

The existing IMAGE DIFF header would remain sticky while scrolling through the comparison, with Update snapshot replacing that screenshot's expected snapshot with the actual screenshot.

This follows existing UI Mode patterns where actions are placed in a sticky header for the content they operate on, for example the Source panel actions:

https://github.com/user-attachments/assets/8d2c998b-2e56-4132-bccc-d3b23305bb1c

Example

After a failed test run with failing snapshots:

  1. Review a failed screenshot using the existing Diff / Actual / Expected views
  2. Click Update snapshot for any intentional change which should have the current snapshot replaced by the Actual snapshot
  3. Continue reviewing the remaining image diffs individually

The existing Attachments panel:

Image

The proposed action would be added to the existing IMAGE DIFF header:

IMAGE DIFF                                         Update snapshot
──────────────────────────────────────────────────────────────────
           Diff  Actual  Expected  Side by side  Slider

The header would remain sticky while scrolling through a large comparison. The action only appears for IMAGE DIFF sections, not other attachments.

Alternative designs can be seen in prior art:

Motivation

When several screenshot assertions fail, UI Mode lets you review each diff, but not update an intentional change directly from that diff.

Checked against Playwright v1.64.1: the Image diff section in UI Mode's Attachments panel still has no update action.

I'm aware that Playwright v1.56+ supports updateSnapshots in UI Mode (issue #37007 + PR #37098), but the current workflow has a few drawbacks:

  1. If users enable it before running, snapshots are updated before users know whether the changes are correct
  2. If users run tests normally to failure and review first, accepting a change requires enabling it and running the test again, which can be slow, flaky, and interrupts the review flow
  3. Because updating is run-level, other changed snapshots can be updated before users have reviewed them
History

Re-filed from #42393, which was closed in the P3-collecting-feedback cleanup (#43813). Before that, #42393 was scheduled for release:

  1. 2026-08-26: @dcrousso opened PR #42421 (feat(ui-mode): update individual snapshots) implementing it
  2. 2026-08-31: assigned to @dcrousso, scheduled for v1.64
  3. 2026-10-02: moved from v1.64 to v1.65
  4. 2026-10-05: #42421 archived for inactivity
  5. 2026-10-20: v1.65 replaced with P3-collecting-feedback
  6. 2026-10-31: closed as not planned
Lenguaje dominante
TypeScript
Estrellas
99.1k
Forks
6.8k
Merge medio
15 h 37 min
PR fusionados (30 d)
329

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/playwright

Todos los issues de microsoft/playwright

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.