Issue: Duplicate snapshots with Playwright Chromatic takeSnapshot

[dwang6-aspira]

Environment:
Playwright version: 1.53.1
Chromatic version: 13.0.1
Application Architecture: Legacy HTML 4.01

Description:
I am experiencing an issue where all snapshots captured via @chromatic-com/playwright's takeSnapshot are identical to the first one, even though the page content has changed and is visible in the browser.

My application uses an old-school HTML 4.01 structure. The src value and document https value never changed when I go to different page, but the content inside frame[name="mainContent"] navigates and updates.

Here is the simplified structure of my root page:

Here is my playwright script:

// First takeSnapshot
await expect(page.getByTitle('mainContent').contentFrame().locator('...')).toBeVisible({ timeout: 180000 });
await page.waitForTimeout(5000);
await takeSnapshot(page, 'Page 1', testInfo);

// Second takeSnapshot
await page.getByTitle('mainContent').contentFrame().getByRole('...').click();
...
await expect(page.getByTitle('mainContent').contentFrame().getByRole('...').toBeVisible({ timeout: 180000 });
await page.waitForTimeout(5000);
await takeSnapshot(page, 'Page 2', testInfo);

// Third takeSnapshot
await page.getByTitle('mainContent').contentFrame().getByRole('...').click();
...
await expect(page.getByTitle('mainContent').contentFrame().getByRole('...').toBeVisible({ timeout: 180000 });
await page.waitForTimeout(5000);
await takeSnapshot(page, 'Page 3', testInfo);
Expect: These 3 pages' snapshot are different
Actual: The snapshot in Chromatic dashboard shows the InitialPage instead of the page 2 and page 3.
These 3 pages' snapshot are the same(Page 1 snapshot is correct, but page 2 and page 3 snapshot are same with page 1)

Attempted Fixes but all failed:
1.Added page.waitForTimeout(5000) before snapshot - Failed
2.Injected unique data-attributes into the frame's body to break cache - Failed
3.Tried passing the frame locator to takeSnapshot, but it only accepts Page object.
4.npm run chromatic -- --use-real-screenshots ... in local or add chromatic: { useRealScreenshots: true } to playwright.config.ts - Failed

Questions:
1.Is the problem of duplicate snapshot related to the frameset structure?
2.How to handle this issue?

Note:
Playwright's native page.screenshot() works perfectly and captures the correct screenshot, no duplicate issue.