documentation/scripts/browser/strategy-navigation.cjs

const {chromium} = require('playwright');
const assert = require('node:assert/strict');
const fs = require('node:fs');
(async () => {
  const base = process.argv[2] || 'http://127.0.0.1:4173';
  const output = `.cache/strategy-navigation-${process.argv[3] || 'local'}`;
  fs.mkdirSync(output, {recursive:true});
  const prefix = '/eldorado-v1/documentation/strategy/';
  const first = 'Stage - 01 - Skills Adoption';
  const second = 'Stage - 02 - Autonomous Agent';
  const topics = ['Governance','Quality','Adoption','Measurement','Maintenance'];
  const ids = ['target-operating-model','roadmap','stage-01-skills-adoption','skills-governance','skills-quality','skills-adoption','measurement','skills-maintenance','stage-02-autonomous-agent'];
  const titles = ['Target','Roadmap',first,'Skills governance','Skills quality','Skills adoption','Skills Measurement','Skills maintenance',second];
  const browser = await chromium.launch({headless:true, executablePath:process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE, args:['--no-sandbox']});
  const results = [];
  try {
    for (const width of [1440,1024,390,320]) {
      const context = await browser.newContext({viewport:{width,height:900}, colorScheme:'light'});
      try {
        const page = await context.newPage();
        const errors = [];
        page.on('pageerror', error => errors.push(error.message));
        const openMenu = async () => {
          if (width < 997) await page.getByRole('button', {name:'Toggle navigation bar'}).click();
          const menu = page.locator('.theme-doc-sidebar-menu').filter({visible:true});
          await menu.locator('.menu__link').first().waitFor({state:'visible'});
          return menu;
        };
        const closeMenu = async () => {
          if (width < 997) await page.getByRole('button', {name:'Close navigation bar'}).click();
        };
        assert.equal((await page.goto(`${base}${prefix}roadmap/`, {waitUntil:'networkidle'})).status(), 200);
        let menu = await openMenu();
        const visibleLabels = () => menu.locator('.menu__link').filter({visible:true}).allTextContents();
        assert.deepEqual(await visibleLabels(), ['Target','Roadmap',first,second]);
        const category = menu.locator('.theme-doc-sidebar-item-category').filter({has:page.getByRole('link', {name:first, exact:true})});
        const caret = category.locator('button.menu__caret');
        await caret.click();
        await category.getByRole('link', {name:'Governance', exact:true}).waitFor({state:'visible'});
        assert.deepEqual(await visibleLabels(), ['Target','Roadmap',first,...topics,second]);
        assert.deepEqual(await category.locator('ul .menu__link').allTextContents(), topics);
        await page.screenshot({path:`${output}/${width}-expanded.png`, animations:'disabled'});
        await caret.click();
        await category.getByRole('link', {name:'Governance', exact:true}).waitFor({state:'hidden'});
        assert.deepEqual(await visibleLabels(), ['Target','Roadmap',first,second]);
        await menu.getByRole('link', {name:first, exact:true}).click();
        await page.waitForURL(`${base}${prefix}stage-01-skills-adoption/`);
        await page.getByRole('heading', {level:1, name:first, exact:true}).waitFor();
        assert.equal(await page.locator('h1').innerText(), first);
        assert((await page.locator('article').innerText()).includes('Delivery first'));
        assert(!await page.evaluate(() => document.documentElement.scrollWidth > innerWidth));
        await page.screenshot({path:`${output}/${width}-stage-01.png`, fullPage:true, animations:'disabled'});
        for (const [index, id] of ids.entries()) {
          assert.equal((await page.goto(`${base}${prefix}${id}/`, {waitUntil:'networkidle'})).status(), 200);
          assert.equal(new URL(page.url()).pathname, `${prefix}${id}/`);
          // Target has a longer canonical page heading but keeps its short navigation label.
          if (index) assert.equal(await page.locator('h1').innerText(), titles[index]);
          else assert((await page.locator('h1').innerText()).includes('Target'));
          const prev = page.locator('.pagination-nav__link--prev');
          const next = page.locator('.pagination-nav__link--next');
          if (index) assert.equal(await prev.getAttribute('href'), `${prefix}${ids[index-1]}/`);
          else assert.equal(await prev.count(), 0);
          if (index < ids.length-1) assert.equal(await next.getAttribute('href'), `${prefix}${ids[index+1]}/`);
          else assert.equal(await next.count(), 0);
          if (index >= 3 && index <= 7) {
            assert.equal(await page.locator('.breadcrumbs a').filter({hasText:first}).getAttribute('href'), `${prefix}stage-01-skills-adoption/`);
            menu = await openMenu();
            assert.deepEqual(await visibleLabels(), ['Target','Roadmap',first,...topics,second]);
            await closeMenu();
          }
          assert(!await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), `${width}: overflow on ${id}`);
        }
        assert((await page.locator('article').innerText()).includes('not deployed autonomy'));
        await page.screenshot({path:`${output}/${width}-stage-02.png`, fullPage:true, animations:'disabled'});
        assert.deepEqual(errors, []);
        results.push({width, routes:ids.length, linkedCategory:true, expandCollapse:true, nesting:true, breadcrumbs:true, pagination:true, overflow:false, errors});
        fs.writeFileSync(`${output}/results.json`, JSON.stringify(results,null,2));
      } finally {await context.close();}
    }
    assert.equal(results.length, 4);
    console.log('PASS: 4 desktop/mobile viewports; all 9 routes; linked category, expand/collapse, unique nested labels, breadcrumbs, next/previous and no overflow/errors');
  } finally {await browser.close();}
})().catch(error => {console.error(error); process.exitCode = 1;});