first commit

tools/dev/screenshots.js

@@ -0,0 +1,73 @@
+// Regenerate docs/images/*.png from a running ActivePush panel (Playwright).
+//   node tools/dev/screenshots.js http://127.0.0.1:9091 admin 'password' [outdir]
+// With SETUP_TOKEN=<token> in the environment the first-run screen is captured and the
+// administrator is created with the given credentials.
+const { chromium } = require('playwright');
+const path = require('path');
+
+(async () => {
+  const [base, user, pass, out = path.join(__dirname, '../../docs/images')] = process.argv.slice(2);
+  if (!base || !user || !pass) {
+    console.error('usage: node screenshots.js URL USER PASSWORD [OUTDIR]');
+    process.exit(2);
+  }
+  const browser = await chromium.launch();
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, locale: 'en-US', deviceScaleFactor: 1 });
+  const page = await ctx.newPage();
+  const errors = [];
+  page.on('pageerror', (e) => errors.push(e.message));
+  const shot = async (name, full = false) => {
+    await page.screenshot({ path: path.join(out, `${name}.png`), fullPage: full });
+    console.log('saved', name);
+  };
+
+  await page.goto(base + '/');
+  await page.waitForSelector('#auth:not([hidden])');
+  if (process.env.SETUP_TOKEN) {
+    await page.fill('#setup-token', process.env.SETUP_TOKEN);
+    await page.fill('#username', user);
+    await shot('setup');
+    await page.fill('#password', pass);
+    await page.fill('#password2', pass);
+  } else {
+    await page.fill('#username', user);
+    await page.fill('#password', pass);
+  }
+  await page.click('#auth-submit');
+  await page.waitForSelector('#shell:not([hidden])');
+
+  const pages = [
+    ['overview', true, 5000], ['live', false, 6000], ['devices', false, 2500], ['users', false, 2500],
+    ['backends', false, 1500], ['activesync', false, 1500], ['policies', false, 1500], ['security', false, 1500],
+    ['logs', false, 4000],
+  ];
+  for (const [id, full, wait] of pages) {
+    await page.goto(`${base}/#${id}`);
+    await page.waitForTimeout(wait);
+    await shot(id === 'users' ? 'mailboxes' : id, full);
+  }
+  await page.goto(`${base}/#devices`);
+  await page.waitForTimeout(2000);
+  const chips = await page.$$('.chip[data-pid]');
+  if (chips.length) {
+    await chips[0].click();
+    await page.waitForTimeout(1200);
+    await shot('device');
+  }
+  await page.goto(`${base}/#overview`);
+  await page.waitForTimeout(500);
+  await page.click('#theme');
+  await page.waitForTimeout(4000);
+  await shot('overview-light');
+  await page.click('#theme');
+
+  const mobile = await browser.newContext({ viewport: { width: 390, height: 844 }, locale: 'en-US', deviceScaleFactor: 2, storageState: await ctx.storageState() });
+  const mp = await mobile.newPage();
+  await mp.goto(`${base}/#overview`);
+  await mp.waitForTimeout(4000);
+  await mp.screenshot({ path: path.join(out, 'mobile.png') });
+  console.log('saved mobile');
+
+  if (errors.length) console.error('page errors:', errors);
+  await browser.close();
+})();