feat(tests): [WD-22649] Screenshot automation tests by Kxiru · Pull Request #1377 · canonical/lxd-ui

Kxiru · 2025-07-15T00:59:10Z

Done

Captures screenshots for the LXD docs (UI sections)
- Instances (6) ✔️
- Networks (9) ✔️
- Storage (18)
  - Pools (4) ✔️
  - Volumes (8) ✔️
  - Volume snapshots (6) ✔️
- Tutorial (13) ✔️
- UI (20) ✔️

Fixes lack of screenshot automation in the UI.

QA

Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @Kxiru or @edlerd for access.
- With a local copy of this branch, build and run as described in the docs.
Perform the following QA steps:
- Locally run tests in docs-screenshots.spec.ts and observe the generated screenshots in screenshots/doc/images/...

Screenshots

Locally run tests in docs-screenshots.spec.ts and observe the generated screenshots in screenshots/doc/images/...

webteam-app · 2025-07-15T00:59:14Z

Demo

Jenkins

demos.haus

edlerd

Good progress on this one.

tests/docs-screenshots-clustered.spec.ts

tests/docs-screenshots.spec.ts

edlerd

Please also note the linting error below.

/home/runner/work/lxd-ui/lxd-ui/tests/docs-screenshots.spec.ts
  523:24  error  Replace `'Allow·custom·restrictions·on'` with `"Allow·custom·restrictions·on"`  prettier/prettier

Kxiru · 2025-08-06T17:25:46Z

Let's isolate this into a dedicated test

@edlerd , "LXD - Tutorial - Graphical consoles" is the dedicated test 😅 . The only thing occuring in this test is setup for the Ubuntu desktop (one screenshot is taken as a part of this setup) and the rest is just attempting to start the Desktop console.

Did some testing and with a cached desktop image the boot only takes ~40 seconds. So should be within the timeout of two minutes if the image is cached. I think we can make it a prerequisite, the desktop image is cached. And as we schedule the job later in CI, we can add a pre-run command that is downloading the image.

This is good news, though I am unable to locally get the graphical console to appear so I cannot yet do the required navigation. I'll have another go with this tomorrow.

edlerd

This is really nice, well done! Some nitpicks on code and a couple of screens or paths don't match what is in the LXD docs yet. Especially in the networking / forward, there were some more screens with differences.

tests/docs-screenshots.spec.ts

edlerd

Good progress, I really like the automated screens. Some tuning seems needed to get the timings right, then this seems good to merge.

tests/docs-screenshots.spec.ts

Kxiru · 2025-08-19T19:40:11Z

This is still unresolved.

The instance summary appears in my local screenshots.

I have replaced this with OpenInstanceDetailPanel for potentially more consistency, but as for the summary page appearing at all, this should have been fixed in my last push.

edlerd

LGTM, the screens now all line up with the docs 👍

Just one issue with the cleanup of a test below and on the same test an idea to simplify.

tests/docs-screenshots.spec.ts

edlerd

LGTM, thanks for the automated doc screenshots :)

Signed-off-by: Nkeiruka <nkeiruka.whenu@canonical.com>

Kxiru requested a review from edlerd July 15, 2025 00:59

Kxiru self-assigned this Jul 15, 2025

Kxiru added Review: Code needed Review: QA needed labels Jul 15, 2025

Kxiru changed the title ~~feat: [WD-22649] Screenshot automation tests~~ feat(tests): [WD-22649] Screenshot automation tests Jul 15, 2025

Kxiru force-pushed the screenshot-automation branch 3 times, most recently from 8e11ced to a72efac Compare July 17, 2025 00:34

Kxiru force-pushed the screenshot-automation branch 7 times, most recently from 618941c to e0757f8 Compare August 4, 2025 14:17

Kxiru marked this pull request as ready for review August 4, 2025 14:18

Kxiru force-pushed the screenshot-automation branch from e0757f8 to 9abbbfe Compare August 4, 2025 21:54

edlerd reviewed Aug 5, 2025

View reviewed changes

tests/docs-screenshots-clustered.spec.ts Outdated Show resolved Hide resolved

tests/docs-screenshots.spec.ts Outdated Show resolved Hide resolved

edlerd reviewed Aug 5, 2025

View reviewed changes

Kxiru force-pushed the screenshot-automation branch 3 times, most recently from dfd036f to 80a04ed Compare August 5, 2025 22:07

Kxiru force-pushed the screenshot-automation branch 3 times, most recently from 813f7cd to 253ab54 Compare August 11, 2025 14:10

Kxiru requested a review from edlerd August 11, 2025 14:10

Kxiru force-pushed the screenshot-automation branch from 253ab54 to b37f711 Compare August 11, 2025 15:17

edlerd reviewed Aug 12, 2025

View reviewed changes

Kxiru force-pushed the screenshot-automation branch 2 times, most recently from 53136bf to 97a3e22 Compare August 13, 2025 22:43

Kxiru requested a review from edlerd August 13, 2025 22:43

edlerd reviewed Aug 14, 2025

View reviewed changes

Kxiru force-pushed the screenshot-automation branch from 97a3e22 to 845a172 Compare August 18, 2025 16:27

Kxiru requested a review from edlerd August 18, 2025 16:27

Kxiru force-pushed the screenshot-automation branch from 845a172 to dbe841c Compare August 18, 2025 16:28

edlerd reviewed Aug 19, 2025

View reviewed changes

tests/docs-screenshots.spec.ts Outdated Show resolved Hide resolved

tests/docs-screenshots.spec.ts Show resolved Hide resolved

tests/docs-screenshots.spec.ts Show resolved Hide resolved

tests/docs-screenshots.spec.ts Show resolved Hide resolved

Kxiru force-pushed the screenshot-automation branch from dbe841c to 2ef5c78 Compare August 19, 2025 19:47

Kxiru requested a review from edlerd August 19, 2025 22:24

edlerd reviewed Aug 20, 2025

View reviewed changes

tests/docs-screenshots.spec.ts Outdated Show resolved Hide resolved

tests/docs-screenshots.spec.ts Show resolved Hide resolved

Kxiru force-pushed the screenshot-automation branch from 2ef5c78 to e3f248b Compare August 20, 2025 14:07

Kxiru requested a review from edlerd August 20, 2025 14:22

Kxiru force-pushed the screenshot-automation branch from e3f248b to 07a0412 Compare August 20, 2025 14:43

edlerd approved these changes Aug 20, 2025

View reviewed changes

Kxiru added 3 commits August 20, 2025 16:50

feat: [WD-22649] Screenshot automation tests

3d1818a

Signed-off-by: Nkeiruka <nkeiruka.whenu@canonical.com>

addition: LXD Tutorial screenshots

1291d9f

Signed-off-by: Nkeiruka <nkeiruka.whenu@canonical.com>

addition: LXD UI Folder Screenshots

79db40c

Signed-off-by: Nkeiruka <nkeiruka.whenu@canonical.com>

Kxiru force-pushed the screenshot-automation branch from 07a0412 to 79db40c Compare August 20, 2025 15:51

Kxiru merged commit c7b6355 into canonical:main Aug 20, 2025
12 checks passed

Conversation

Kxiru commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Done

QA

Screenshots

Uh oh!

webteam-app commented Jul 15, 2025

Demo

Jenkins

demos.haus

Uh oh!

edlerd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

edlerd left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kxiru commented Aug 6, 2025

Uh oh!

edlerd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

edlerd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Kxiru commented Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edlerd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

edlerd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Kxiru commented Jul 15, 2025 •

edited

Loading

edlerd left a comment •

edited

Loading

Kxiru commented Aug 19, 2025 •

edited

Loading