microsoft / microsoft/playwright

[Feature]: maintain top-level `children: deep-equal` when udpating snapshots

Open
#36,442 7 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

P3-collecting-feedback
Dominant language
TypeScript
Stars
96.3k
Forks
6.5k
Avg merge
1d 6h
Merged PRs (30d)
180

Description

### Version

1.53.1

### Steps to reproduce

1. clone https://github.com/lukeapage/pw-bug-snapshot-children-deep
2. run npm install
3. run `npm run playwright -- --update-snapshots`

### Expected behavior

I expect `- /children` to not be removed when snapshots are updated.

I expect that whenever `- /children` is present at the top level it is always applied.

### Actual behavior

The first test generates a diff:

![Image](https://github.com/user-attachments/assets/54c2f881-f58d-4b4a-aa55-96e3394c73a6)

You can see the diff removes -/children: deep-equal so the deep equal is working, but the snapshot clears it.

This makes it a tedious job to review pr's - point out that someone has accidentally removed the children equal and get them to manually put it back again.

I've tested even when children deep equal is not at the top level this happens.

In the 2nd test, no updated snapshot is generated.

It seems if you target a element e.g. main and snapshot it and put children deep equal as the first statement - it is silently ignored. But if you target a parent element to ones shown in the snapshot (like in the first test), it is applied.

I'd like to just enforce all snapshots start with children deep-equal and then I know the behavior of all snapshots is deep equal which causes less mental overhead for developers considering we use jest for unit testing and its snapshots are always deep equal.

### Additional context

_No response_

### Environment

```shell
Tested on the previous version on mac and windows, I don't believe this is a environment issue.
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction repository, run npm install, then run npm run playwright -- --update-snapshots to observe both reported cases. Trace the snapshot update path and verify that a top-level children: deep-equal directive is preserved and applied, including when nested or targeting an element such as main.

Written by the indexing model from the issue text.

Assessment

Tech stack
playwright, typescript
Domain
testing-qa
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.