ARIA Snapshot and Screenshot locator based option

[R4tZz]

Hello,
First of all, thank you for the great work on the tool, I’m really enjoying it so far.

I would like to request an enhancement related to the ARIA Snapshot and screenshot functionalities.
It would be very helpful to have an option to capture a snapshot or screenshot of a specific area of the page, rather than the entire view.

The goal is to enable something similar to a manual test step, where a user can capture a targeted region of the UI and compare it against an existing snapshot to identify differences.

Best regards.

[pavelfeldman]

You can already capture a screenshot for the specific element, and AI can definitely extract snapshot for a given element!

[R4tZz]

Thank you Pavel for you comment.

But are you able to clarify how would you do that? From I what seen in the core commands in the docs the playwright cli does not support specifying a locator from a page.

Best regards

[pavelfeldman]

We require ref. Where does LLM get locator otherwise?

[R4tZz]

Actually with a closer a look, for the screentshot does provide the REF argument, but not for the ARIA snapshot.
For example:

❯ playwright-cli snapshot --help
playwright-cli snapshot

Capture page snapshot to obtain element ref

Options:
  --filename  

vs

playwright-cli screenshot --help
playwright-cli screenshot [ref]

screenshot of the current page or element

Arguments:
  [ref]                       exact target element reference from the page snapshot.
Options:
  --filename                  file name to save the screenshot to. defaults to `page-{timestamp}.{png|jpeg}` if not specified.
  --full-page                 when true, takes a screenshot of the full scrollable page, instead of the currently visible viewport.

Mainly the goal would be to do something like this:

await page.goto('https://playwright.dev/');
await expect(page.getByRole('banner')).toMatchAriaSnapshot(`
  - banner:
    - heading /Playwright enables reliable end-to-end/ [level=1]
    - link "Get started"
    - link "Star microsoft/playwright on GitHub"
    - link /[\\d]+k\\+ stargazers on GitHub/
`);

Does this help to clarify?