docs(e2e): add documentation screenshot capture tool by dj4oC · Pull Request #13894 · owncloud/web

dj4oC · 2026-06-19T09:25:31Z

Description

Adds a small Playwright tool under tests/e2e/docs that automatically captures end-user documentation screenshots from a live ownCloud Web instance, so the screenshots used in the user documentation never drift from the product.

Each "tour" in tours.ts is a documented flow: an ordered list of steps with a title, a caption and a run action that drives the UI. Running the tool logs in, performs each step, saves a screenshot per step under output/<tour-id>/NN-<shot>.png, and writes an output/manifest.json that pairs every screenshot with its caption.

The initial tours mirror the Web for users documentation (whose screenshots are currently outdated):

webtour — top navigation: app switcher, global search, account + storage, preferences/appearance
storagetour — left sidebar: Personal, Shares, Spaces, Deleted files
filesidebar — right sidebar: details, sharing, sharing roles, versions
contextualhelp — the ? help icons and the guidance popovers they open

How to run

It reuses the repository's Playwright install — no new dependencies:

OCIS_URL=https://localhost:9200 OCIS_USER=admin OCIS_PASSWORD=admin pnpm docs:screenshots

It first seeds best-effort, idempotent demo data (a versioned file, a trashed item, a project space and one incoming share) so the tours have something to show. Generated screenshots and the manifest land in tests/e2e/docs/output/ (git-ignored — they are build artefacts, regenerated on demand). Adding a new tour is just another entry in tours.ts.

Notes

Purely additive: a new tests/e2e/docs/ directory, one root package.json script (docs:screenshots), and a changelog item. No existing code or the existing e2e suite is touched.
Not wired into CI; it is a tool to run on demand when refreshing documentation screenshots.

Testing

eslint is clean on the new files; the code is ESM and matches the repo ("type": "module").
The tour/login logic and the seeding API calls (WebDAV upload + versions, OCS share, Graph user/space) were validated against a live oCIS instance, with all four tours capturing successfully.

kw-security · 2026-06-19T09:25:45Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues
✅	Code Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

Adds tests/e2e/docs, a Playwright tool that captures end-user documentation screenshots from a live ownCloud Web instance so the screenshots used in the user documentation never drift from the product. Each "tour" (data in tours.ts) drives the UI through a documented flow and saves a captioned screenshot per step plus a manifest.json. The initial tours mirror the "Web for users" documentation: top navigation, the file sidebars, sharing roles and contextual help. It reuses the repository's Playwright install (run with `pnpm docs:screenshots`) and seeds best-effort demo data so the tours have something to show. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: David Walter <david.walter@kiteworks.com>

sonarqubecloud · 2026-06-19T09:26:38Z

Quality Gate failed

Failed conditions
13.4% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

Fixes the build (prettier --check) and the SonarCloud duplication gate on the documentation screenshot capture tool: - format capture.spec.ts and the support files with prettier - extract the repeated UI sequences (open Personal + select report.md + open the right sidebar, open the Shares panel, navigate a left-sidebar section) into shared helpers in support/oc.ts, so the filesidebar/contextualhelp/ storagetour steps no longer duplicate those blocks No behavioral change to the captured tours. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: David Walter <david.walter@kiteworks.com>

PrajwolAmatya · 2026-06-22T04:01:51Z

+const USER = process.env.OCIS_USER ?? 'admin'
+const PASS = process.env.OCIS_PASSWORD ?? 'admin'


The admin username and password are already defined in tests/e2e/config.js file.

PrajwolAmatya · 2026-06-22T04:08:28Z

+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const outputRoot = path.join(__dirname, 'output')
+const baseURL = process.env.OCIS_URL ?? 'https://localhost:9200'


Suggested change

const baseURL = process.env.OCIS_URL ?? 'https://localhost:9200'

const baseURL = config.baseUrlOcis

PrajwolAmatya · 2026-06-22T04:11:35Z

+  reporter: 'list',
+  timeout: 120_000,
+  use: {
+    baseURL: process.env.OCIS_URL ?? 'https://localhost:9200',


Suggested change

baseURL: process.env.OCIS_URL ?? 'https://localhost:9200',

baseURL: config.baseUrlOcis

PrajwolAmatya · 2026-06-22T04:17:01Z

+
+```bash
+# from the repository root
+OCIS_URL=https://localhost:9200 OCIS_USER=admin OCIS_PASSWORD=admin pnpm docs:screenshots


Suggested change

OCIS_URL=https://localhost:9200 OCIS_USER=admin OCIS_PASSWORD=admin pnpm docs:screenshots

BASE_URL_OCIS=https://localhost:9200 pnpm docs:screenshots

OCIS_USER and OCIS_PASSWORD should not be necessary if we use ADMIN_USERNAME and ADMIN_PASSWORD from the config.js file.

Source the instance URL and admin credentials from tests/e2e/config.js (config.baseUrl / config.adminUsername / config.adminPassword) instead of redefining OCIS_URL / OCIS_USER / OCIS_PASSWORD, so the documentation screenshot capture tool shares the same configuration as the rest of the e2e suite. Addresses review feedback on #13894. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: David Walter <david.walter@kiteworks.com>

dj4oC · 2026-06-22T06:28:42Z

Thanks @PrajwolAmatya — addressed in 23db7bb. The docs capture tool now sources everything from the shared tests/e2e/config.js instead of its own OCIS_URL / OCIS_USER / OCIS_PASSWORD:

support/oc.ts and support/seed.ts use config.adminUsername / config.adminPassword
capture.spec.ts and playwright.config.ts use config.baseUrl for the Playwright baseURL and the API request context
README.md now documents BASE_URL_OCIS (and the shared ADMIN_USERNAME / ADMIN_PASSWORD), dropping the OCIS_* vars

One small deviation from the inline suggestion: I used config.baseUrl rather than config.baseUrlOcis, because baseUrlOcis is the scheme-less host (e.g. host.docker.internal:9200) while config.baseUrl is the getter that applies withHttp() — Playwright's baseURL and the API request context need the full https:// origin.

sonarqubecloud · 2026-06-22T06:29:10Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

PrajwolAmatya

LGTM

dj4oC force-pushed the docs-screenshot-capture branch from 4cd6b3e to 5a86e62 Compare June 19, 2026 09:25

dj4oC requested review from LukasHirt and PrajwolAmatya June 19, 2026 18:46

PrajwolAmatya reviewed Jun 22, 2026

View reviewed changes

dj4oC requested a review from PrajwolAmatya June 22, 2026 06:28

PrajwolAmatya approved these changes Jun 22, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(e2e): add documentation screenshot capture tool#13894

docs(e2e): add documentation screenshot capture tool#13894
dj4oC wants to merge 3 commits into
masterfrom
docs-screenshot-capture

dj4oC commented Jun 19, 2026

Uh oh!

kw-security commented Jun 19, 2026 •

edited

Loading

Uh oh!

sonarqubecloud Bot commented Jun 19, 2026

Uh oh!

PrajwolAmatya Jun 22, 2026

Uh oh!

PrajwolAmatya Jun 22, 2026

Uh oh!

PrajwolAmatya Jun 22, 2026

Uh oh!

PrajwolAmatya Jun 22, 2026

Uh oh!

dj4oC commented Jun 22, 2026

Uh oh!

sonarqubecloud Bot commented Jun 22, 2026

Uh oh!

PrajwolAmatya left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const USER = process.env.OCIS_USER ?? 'admin'
		const PASS = process.env.OCIS_PASSWORD ?? 'admin'

	const baseURL = process.env.OCIS_URL ?? 'https://localhost:9200'
	const baseURL = config.baseUrlOcis

	baseURL: process.env.OCIS_URL ?? 'https://localhost:9200',
	baseURL: config.baseUrlOcis

	OCIS_URL=https://localhost:9200 OCIS_USER=admin OCIS_PASSWORD=admin pnpm docs:screenshots
	BASE_URL_OCIS=https://localhost:9200 pnpm docs:screenshots

Conversation

dj4oC commented Jun 19, 2026

Description

How to run

Notes

Testing

Uh oh!

kw-security commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

sonarqubecloud Bot commented Jun 19, 2026

Quality Gate failed

Uh oh!

PrajwolAmatya Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

PrajwolAmatya Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

PrajwolAmatya Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

PrajwolAmatya Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

dj4oC commented Jun 22, 2026

Uh oh!

sonarqubecloud Bot commented Jun 22, 2026

Quality Gate passed

Uh oh!

PrajwolAmatya left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kw-security commented Jun 19, 2026 •

edited

Loading