@salesforcedevs/sfdocs-e2e 1.0.9-alpha-check-3 → 1.0.9

package/README.md

@@ -106,6 +106,7 @@ npx sfdocs-e2e --baseUrl http://localhost:8080
 # Choose a config suite
 npx sfdocs-e2e --config portal
 npx sfdocs-e2e --config static-portal
+npx sfdocs-e2e --config static-dsc-portal
 npx sfdocs-e2e --config search
 
 # Help

package/bin/publish.sh

@@ -3,7 +3,6 @@ set -euo pipefail
 
 VERSION="${1:?Usage: publish.sh <version> [--tag <tag>]}"
 shift
-TAG_ARGS=("$@")
 
 cp package.json .package.json.bak
 
@@ -25,4 +24,8 @@ node -e "
   require('fs').writeFileSync('package.json', JSON.stringify(p, null, 2) + '\n');
 "
 
-yarn publish --new-version "$VERSION" "${TAG_ARGS[@]}"
+if [ "$#" -gt 0 ]; then
+  yarn publish --new-version "$VERSION" "$@"
+else
+  yarn publish --new-version "$VERSION"
+fi

package/bin/run-e2e.js

@@ -56,6 +56,7 @@ Environment Variables:
 const configName = parsedArgs.config || 'static-portal';
 const configMap = {
     'static-portal': 'static-portal-wdio.conf.js',
+    'static-dsc-portal': 'static-dsc-portal-wdio.conf.js',
     portal: 'portal-wdio.conf.js',
     search: 'search-wdio.conf.js',
 };

package/common-wdio.conf.js

@@ -80,6 +80,7 @@ const defaultCapabilities = [
     },
 ];
 const defaultMochaTimeoutInterval = 200000; //increased timeout because its taking more time to load for references file
+const isGithubActions = Boolean(process.env.GITHUB_ACTIONS);
 
 // Resolve ChromeDriver version: env var → Chrome for Testing API lookup → latest
 const resolvedChromeDriverVersion = resolveChromedriverVersion();
@@ -181,15 +182,25 @@ exports.config = {
     // Services take over a specific job you don't want to take care of. They enhance
     // your test setup with almost no effort. Unlike plugins, they don't add new
     // commands. Instead, they hook themselves up into the test process.
-    services: [
-        [
-            'selenium-standalone',
-            {
-                installArgs: { drivers }, // drivers to install
-                args: { drivers }, // drivers to use
-            },
-        ],
-    ],
+    services: isGithubActions
+        ? []
+        : [
+              [
+                  'selenium-standalone',
+                  {
+                      installArgs: { drivers }, // drivers to install
+                      args: { drivers }, // drivers to use
+                  },
+              ],
+          ],
+    ...(isGithubActions
+        ? {
+              protocol: 'http',
+              hostname: '127.0.0.1',
+              port: 4444,
+              path: '/wd/hub',
+          }
+        : {}),
 
     // Framework you want to run your specs with.
     // The following are supported: Mocha, Jasmine, and Cucumber

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/sfdocs-e2e",
-  "version": "1.0.9-alpha-check-3",
+  "version": "1.0.9",
   "description": "E2E test suite for SFDocs static portal pages (SSG)",
   "license": "ISC",
   "bin": {
@@ -16,12 +16,13 @@
     "test:e2e": "TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=./tsconfig.json wdio wdio.conf.js",
     "test:e2e:portal": "TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=./tsconfig.json wdio portal-wdio.conf.js",
     "test:e2e:static:portal": "TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=./tsconfig.json wdio static-portal-wdio.conf.js",
+    "test:e2e:static:dsc:portal": "TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=./tsconfig.json wdio static-dsc-portal-wdio.conf.js",
     "test:scope-search": "TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=./tsconfig.json wdio search-wdio.conf.js",
     "release:alpha:e2e": "f() { bash bin/publish.sh $1 --tag alpha; }; f",
     "release:e2e": "f() { bash bin/publish.sh $1; }; f"
   },
   "dependencies": {
-    "@sa11y/wdio": "^7.0.0",
+    "@sa11y/wdio": "^8.0.0",
     "@wdio/allure-reporter": "^7.19.0",
     "@wdio/cli": "^7.19.0",
     "@wdio/local-runner": "^7.19.0",

package/portal-wdio.conf.js

@@ -4,4 +4,9 @@ exports.config = {
     ...BASE_CONFIG.config,
     baseUrl: process.env.E2E_BASE_URL || 'http://localhost:3001',
     specs: ['./src/portal/specs/**/*.test.ts', './src/shared/specs/*.test.ts'],
+    exclude: [
+        './src/shared/specs/contentActionToolbar.test.ts',
+        // Advanced liquid tests require previewFuture — not enabled in portal builds
+        './src/shared/specs/liquid-advanced.test.ts',
+    ],
 };

package/src/content-repo/specs/homepage.test.ts

@@ -13,7 +13,7 @@ describe('Homepage', () => {
     it('should show the expected number of projects', async () => {
         const projectCards = await HomePage.projectCards;
 
-        expect(projectCards.length).toEqual(17);
+        expect(projectCards.length).toEqual(21);
     });
 
     // it('is accessible', () => {

package/src/shared/pageobjects/api-redoc-reference.page.ts

@@ -35,6 +35,11 @@ class ApiRedocReferencePage extends Page {
         const lnbItems = await scrollbarContainer.$$('ul[role="menu"] > li');
         return lnbItems[index];
     }
+
+    async getProjectHeader(): Promise<WebdriverIO.Element> {
+        const sidebar = await this.getSidebar();
+        return sidebar.$('div.redoc-project-header');
+    }
 }
 
 export default ApiRedocReferencePage;

package/src/shared/pageobjects/page.ts

@@ -44,15 +44,15 @@ export default class Page {
         );
     }
 
-    async getHeader(): Promise<WebdriverIO.Element> {
-        return await $('hgf-c360contextnav');
+    async getHeader(headerTag = 'dx-global-header'): Promise<WebdriverIO.Element> {
+        return await $(headerTag);
     }
 
     async getHeaderTitle(): Promise<WebdriverIO.Element> {
         return (await $('>>>header')).$('h4');
     }
 
-    async getGlobalSearchBox(headerTag = 'dx-header'): Promise<WebdriverIO.Element> {
+    async getGlobalSearchBox(headerTag = 'dx-global-header'): Promise<WebdriverIO.Element> {
         return (await $(headerTag)).shadow$('dx-header-search');
     }
 

package/src/shared/pageobjects/reference.page.ts

@@ -38,4 +38,13 @@ export class ReferencePage extends Page {
     async getSidebarContent(): Promise<WebdriverIO.Element> {
         return $('>>>div .sidebar-item-selected');
     }
+
+    async getSidebar(): Promise<WebdriverIO.Element> {
+        return (await $('>>>doc-content-layout')).shadow$('div > dx-sidebar-old');
+    }
+
+    async getSidebarItems(): Promise<WebdriverIO.ElementArray> {
+        const sidebar = await this.getSidebar();
+        return sidebar.shadow$$('div.container div.sidebar-content dx-tree');
+    }
 }

package/src/shared/specs/contentActionToolbar.test.ts

@@ -0,0 +1,59 @@
+import GuidePage from '../pageobjects/guide.page';
+import { ReferencePage } from '../pageobjects/reference.page';
+
+const EN_US_GUIDE_PATH = '/docs/service/vscode-maintainer/guide/vscode-overview.html';
+const EN_US_MARKDOWN_REFERENCE_PATH =
+    '/docs/commerce/flexible-references/references/shopper-manual-ref/quick-start.html';
+const NON_MARKDOWN_REFERENCE_PATH = '/docs/test-metamind-oas-api/references/1mkfx9?meta=Summary';
+const NON_EN_US_MARKDOWN_REFERENCE_PATH =
+    '/docs/commerce/ja-jp/flex-references-loc/references/manual-ref/commerce-cloud-api-overview.html';
+
+async function expectToolbarButtons(toolbar: WebdriverIO.Element): Promise<void> {
+    const toolbarButtons = await toolbar.shadow$$('dx-button.toolbar-button');
+    expect(toolbarButtons.length).toBe(3);
+
+    const labels = await Promise.all(
+        toolbarButtons.map(async (button) => (await button.getText()).trim()),
+    );
+    expect(labels).toEqual(
+        expect.arrayContaining(['Copy as Markdown', 'View as Markdown', 'Copy URL to Markdown']),
+    );
+}
+
+describe('Content action toolbar scenarios', () => {
+    it('Markdown guide should have the toolbar', async () => {
+        const page = new GuidePage(EN_US_GUIDE_PATH);
+        page.open();
+        await page.waitPageLoad();
+
+        const toolbar = await $('>>>doc-content-action-toolbar');
+        await toolbar.waitForDisplayed();
+        await expectToolbarButtons(toolbar);
+    });
+
+    it('Markdown reference should have the toolbar', async () => {
+        const referencePage = new ReferencePage(EN_US_MARKDOWN_REFERENCE_PATH);
+        referencePage.open();
+        await referencePage.waitForMarkdownBasedReferencePageLoad();
+
+        const toolbar = await $('>>>doc-content-action-toolbar');
+        await toolbar.waitForDisplayed();
+        await expectToolbarButtons(toolbar);
+    });
+
+    it("Non-markdown reference shouldn't have toolbar", async () => {
+        const referencePage = new ReferencePage(NON_MARKDOWN_REFERENCE_PATH);
+        referencePage.open();
+        await referencePage.waitForSpecBasedReferencePageLoad();
+
+        const toolbar = await $('>>>doc-content-action-toolbar');
+        expect(await toolbar.isExisting()).toBeFalsy();
+    });
+
+    it("Non en-us locale page shouldn't have toolbar", async () => {
+        const nonEnUsReferencePage = new ReferencePage(NON_EN_US_MARKDOWN_REFERENCE_PATH);
+        nonEnUsReferencePage.open();
+        await nonEnUsReferencePage.waitForMarkdownBasedReferencePageLoad();
+        expect(await (await $('>>>doc-content-action-toolbar')).isExisting()).toBeFalsy();
+    });
+});

package/src/shared/specs/guides.test.ts

@@ -64,7 +64,7 @@ describe('Test Guides page components functionality> ', () => {
         const sidebar = await (await $('doc-content-layout')).shadow$('div > dx-sidebar-old');
         const sideBarContent = await sidebar.shadow$$('div.container div.sidebar-content dx-tree');
 
-        expect(sideBarContent.length).toEqual(4);
+        expect(sideBarContent.length).toEqual(6);
 
         const nextStepOption = await (
             await sideBarContent[3].shadow$('dx-tree-item')

package/src/shared/specs/internalLinks.test.ts

@@ -0,0 +1,70 @@
+import GuidePage from '../pageobjects/guide.page';
+
+/**
+ * E2E tests for internal link resolution (internalReferencePlugin + referenceLinkTransformerPlugin).
+ * Covered: relative .md → .html resolution, guide-to-guide links, reference-to-guide links,
+ * external links.
+ **/
+describe('Internal link resolution', () => {
+    const UPDATE_ORDER_STATES_PAGE =
+        '/docs/commerce/test-cc-orders-api/guide/update-order-states.html';
+    const QUICK_START_PAGE = '/docs/commerce/test-cc-orders-api/guide/quick-start.html';
+    const REFERENCE_PAGE =
+        '/docs/success/sfdocs/references/markdown-cheatsheet/markdown-cheatsheet.html#how-to-link-between-overviews-guides-and-references';
+
+    let page: GuidePage;
+
+    it('should resolve relative guide link correctly', async () => {
+        page = new GuidePage(UPDATE_ORDER_STATES_PAGE);
+        page.open();
+        await page.waitPageLoad();
+
+        const ordersApiLink = await $('a.internal-link-guide[href*="orders-api-overview"]');
+        await ordersApiLink.waitForDisplayed();
+        const href = await ordersApiLink.getAttribute('href');
+        expect(href).not.toMatch(/\.md(?:\?|#|$)/);
+        expect(href).toContain('orders-api-overview.html');
+    });
+
+    it('should resolve guide linking in same folder correctly', async () => {
+        page = new GuidePage(QUICK_START_PAGE);
+        page.open();
+        await page.waitPageLoad();
+
+        await (await $('>>> doc-heading[hash="see-also"]')).waitForDisplayed();
+
+        const understandTheBasicsLink = await $('=Understand the Basics');
+        await understandTheBasicsLink.waitForDisplayed();
+        const href = await understandTheBasicsLink.getAttribute('href');
+        expect(href).not.toMatch(/\.md(?:\?|#|$)/);
+        expect(href).toContain('understand-the-basics.html');
+    });
+
+    it('should have html link for reference to guide linking', async () => {
+        page = new GuidePage(REFERENCE_PAGE);
+        page.open();
+        await page.waitPageLoad();
+
+        await (
+            await $('>>> doc-heading[hash="how-to-link-between-overviews-guides-and-references"]')
+        ).waitForDisplayed();
+
+        const threeContentTypesLink = await $('=three content types');
+        await threeContentTypesLink.waitForDisplayed();
+        const href = await threeContentTypesLink.getAttribute('href');
+        expect(href).toContain('guide');
+        expect(href).toMatch(/\.html(?:#|$|\?)/);
+    });
+
+    it('should treat external links as external', async () => {
+        page = new GuidePage(REFERENCE_PAGE);
+        page.open();
+        await page.waitPageLoad();
+
+        const externalLinks = await $$('a.external-link-guide');
+        expect(externalLinks.length).toBeGreaterThan(0);
+        for (const link of externalLinks) {
+            expect(await link.getAttribute('target')).toBe('_blank');
+        }
+    });
+});

package/src/shared/specs/layout-tests.ts

@@ -7,7 +7,7 @@ import Page from '../pageobjects/page';
  * @param givenPage : This is the current page for which we need to test chrome.
  */
 
-export default function layoutTest(givenPage: Page, headerTag = 'dx-header') {
+export default function layoutTest(givenPage: Page, headerTag = 'dx-global-header') {
     let page: Page;
     describe('Basic layout testing > ', () => {
         beforeEach(async () => {
@@ -15,10 +15,12 @@ export default function layoutTest(givenPage: Page, headerTag = 'dx-header') {
         });
 
         it('should display header', async () => {
-            const header = await $('hgf-c360contextnav');
+            const header = await $(headerTag);
             await header.waitForDisplayed();
             expect(await header.isDisplayed()).toBeTruthy();
-            expect(await header.getText()).toContain('Developers');
+            if (headerTag === 'dx-global-header') {
+                expect(await header.getText()).toContain('Developers');
+            }
         });
 
         it.skip('should display global search box', async () => {

package/src/shared/specs/liquid-advanced.test.ts

@@ -0,0 +1,56 @@
+import GuidePage from '../pageobjects/guide.page';
+
+let page: GuidePage;
+let liquidEnabled = false;
+
+describe('Liquid Template Rendering — Advanced', () => {
+    before(async () => {
+        try {
+            page = new GuidePage('/docs/liquid-project/guide/liquid-quickstart.html');
+            await browser.url(page.path);
+            await page.waitPageLoad();
+
+            const content = await $('>>>doc-content-layout');
+            const text = await content.getText();
+
+            liquidEnabled = text.includes('Hello from data.yaml');
+        } catch (e) {
+            liquidEnabled = false;
+        }
+    });
+
+    beforeEach(async () => {
+        if (liquidEnabled) {
+            page = new GuidePage('/docs/liquid-project/guide/liquid-quickstart.html');
+            await browser.url(page.path);
+            await page.waitPageLoad();
+        }
+    });
+
+    it('Should render future block content when previewFuture is enabled', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+
+        expect(text.includes('Coming Soon')).toBeTruthy();
+    });
+
+    it('Should render the future topic page when previewFuture is enabled', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const futurePage = new GuidePage('/docs/liquid-project/guide/future-topic.html');
+        await browser.url(futurePage.path);
+        await futurePage.waitPageLoad();
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+
+        expect(text.includes('Future Feature')).toBeTruthy();
+        expect(text.includes('previewFuture')).toBeTruthy();
+    });
+});

package/src/shared/specs/liquid.test.ts

@@ -0,0 +1,224 @@
+import GuidePage from '../pageobjects/guide.page';
+
+let page: GuidePage;
+let liquidEnabled = false;
+
+describe('Liquid Template Rendering', () => {
+    before(async () => {
+        try {
+            page = new GuidePage('/docs/liquid-project/guide/liquid-quickstart.html');
+            await browser.url(page.path);
+            await page.waitPageLoad();
+
+            const content = await $('>>>doc-content-layout');
+            const text = await content.getText();
+            const html = await content.getHTML();
+
+            const hasLiquidOutput = text.includes('Hello from data.yaml');
+            const hasRawSyntax =
+                html.includes('{% assign') ||
+                html.includes('{% include') ||
+                html.includes('{{ data.greeting }}');
+
+            if (hasRawSyntax) {
+                liquidEnabled = false;
+            } else if (hasLiquidOutput) {
+                liquidEnabled = true;
+            } else {
+                liquidEnabled = false;
+            }
+        } catch (e) {
+            liquidEnabled = false;
+        }
+    });
+
+    beforeEach(async () => {
+        if (liquidEnabled) {
+            page = new GuidePage('/docs/liquid-project/guide/liquid-quickstart.html');
+            await browser.url(page.path);
+            await page.waitPageLoad();
+        }
+    });
+
+    it('Should render Liquid variables from frontmatter and data.yaml', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+
+        expect(text.includes('GitHub for writers')).toBeTruthy();
+        expect(text.includes('Hello from data.yaml')).toBeTruthy();
+    });
+
+    it('Should render repository-level variables from content-config.yml', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+        const html = await content.getHTML();
+
+        expect(text.includes('Salesforce Platform')).toBeTruthy();
+        expect(text.includes('62.0')).toBeTruthy();
+        expect(text.includes('sf')).toBeTruthy();
+        expect(html.includes('{{ variables.platform')).toBeFalsy();
+    });
+
+    it('Should render included templates from shared directory', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const content = await $('>>>doc-content-layout');
+        const html = await content.getHTML();
+
+        expect(html.includes('AccountId') || html.includes('Type:')).toBeTruthy();
+        expect(html.includes('Properties:')).toBeTruthy();
+        expect(html.includes('Special Access Rules')).toBeTruthy();
+        expect(html.includes('{% include')).toBeFalsy();
+    });
+
+    it('Should render loops over data arrays', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const content = await $('>>>doc-content-layout');
+        const html = await content.getHTML();
+        const text = await content.getText();
+
+        expect(text.includes('create()')).toBeTruthy();
+        expect(text.includes('query()')).toBeTruthy();
+        expect(text.includes('update()')).toBeTruthy();
+
+        const listItems = await content.$$('li');
+        expect(listItems.length).toBeGreaterThan(5);
+
+        expect(text.includes('supported_calls')).toBeFalsy();
+        expect(html.includes('for call in supported_calls')).toBeFalsy();
+    });
+
+    it('Should resolve {{ }} outputs inside code blocks but keep {% %} tags literal', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const codeBlockElement = await $('>>>.code-block-content');
+        const codeBlock = await codeBlockElement.shadow$('code');
+
+        expect(await codeBlock.isExisting()).toBeTruthy();
+
+        const codeText = await codeBlock.getText();
+        expect(codeText.includes('{{ data.greeting }}')).toBeFalsy();
+        expect(codeText.includes('{{ topic }}')).toBeFalsy();
+        expect(codeText.includes('Hello from data.yaml')).toBeTruthy();
+        expect(codeText.includes('GitHub for writers')).toBeTruthy();
+        expect(codeText.includes('{% for item in items %}')).toBeTruthy();
+        expect(codeText.includes('{{ item }}')).toBeTruthy();
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+        expect(text.includes('Visit')).toBeTruthy();
+    });
+
+    it('Should render capture blocks from included files', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const content = await $('>>>doc-content-layout');
+        const html = await content.getHTML();
+        const text = await content.getText();
+
+        expect(text.includes('My Heading')).toBeTruthy();
+        expect(text.includes('This is content for ID1.')).toBeTruthy();
+        expect(text.includes('Another Heading')).toBeTruthy();
+        expect(text.includes('Content for ID2.')).toBeTruthy();
+
+        expect(html.includes('{%- capture')).toBeFalsy();
+        expect(html.includes('{% endcapture')).toBeFalsy();
+        expect(html.includes('{{ id1 }}')).toBeFalsy();
+        expect(html.includes('{{ id2 }}')).toBeFalsy();
+    });
+
+    it('Should render englishonly block content in production', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+        const html = await content.getHTML();
+
+        expect(text.includes('This feature is currently only available in English')).toBeTruthy();
+        expect(html.includes('{% englishonly')).toBeFalsy();
+        expect(html.includes('{% endenglishonly')).toBeFalsy();
+    });
+
+    it('Should render liquid.data string format — single YAML file on root context', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+
+        expect(text.includes('Hello from data.yaml')).toBeTruthy();
+    });
+
+    it('Should render liquid.data object format — multiple YAML files each under a named key', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const multiDataPage = new GuidePage('/docs/liquid-project/guide/multi-data.html');
+        await browser.url(multiDataPage.path);
+        await multiDataPage.waitPageLoad();
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+        const html = await content.getHTML();
+
+        expect(text.includes('Sample data file to check the multi-include')).toBeTruthy();
+        expect(html.includes('{{ two.summary }}')).toBeFalsy();
+        expect(html.includes('{{ data.one.summary }}')).toBeFalsy();
+    });
+
+    it('Should render the englishonly topic page', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const englishOnlyPage = new GuidePage('/docs/liquid-project/guide/english-only-topic.html');
+        await browser.url(englishOnlyPage.path);
+        await englishOnlyPage.waitPageLoad();
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+
+        expect(text.includes('English-Only Topic')).toBeTruthy();
+        expect(text.includes('filters: [englishonly]')).toBeTruthy();
+    });
+
+    it('Should render a file with no Liquid syntax as plain markdown', async function () {
+        if (!liquidEnabled) {
+            this.skip();
+        }
+
+        const plainPage = new GuidePage(
+            '/docs/liquid-project/guide/liquid-learning-resources.html',
+        );
+
+        await browser.url(plainPage.path);
+        await plainPage.waitPageLoad();
+
+        const content = await $('>>>doc-content-layout');
+        const text = await content.getText();
+
+        expect(text.includes('Liquid Resource')).toBeTruthy();
+        expect(text.includes('Liquid is a templating language supported in SFDocs')).toBeTruthy();
+    });
+});

package/src/shared/specs/redoc-reference.test.ts

@@ -1,6 +1,7 @@
 import { it } from 'mocha';
 import RedocApisPage from '../pageobjects/api-redoc-reference.page';
 import OverviewPage from '../pageobjects/overview.page';
+import { ReferencePage } from '../pageobjects/reference.page';
 import {
     waitAndGetDocPhaseParentInRedocReferencesPage,
     assertDocPhaseUnavailability,
@@ -9,6 +10,7 @@ import {
 } from '../pageobjects/doc-phase-config';
 
 let page: RedocApisPage;
+let refPage: ReferencePage;
 describe('Redoc API Reference page', () => {
     describe('check layouts', () => {
         before(async () => {
@@ -167,4 +169,145 @@ describe('Redoc API Reference page', () => {
             expect(await heading.isDisplayedInViewport()).toBe(true);
         });
     });
+
+    describe('Flexible References with Redoc Rendering', () => {
+        describe('All references view', () => {
+            before(async () => {
+                refPage = new ReferencePage('docs/service/multi-oas-redoc/references');
+                refPage.open();
+
+                await refPage.waitForMarkdownBasedReferencePageLoad();
+            });
+
+            it('should display all reference titles in LNB', async () => {
+                const treeItems = await refPage.getSidebarItems();
+
+                expect(treeItems.length).toEqual(3);
+            });
+
+            it('should show arrow button after OAS reference titles', async () => {
+                const sideBarContent = await refPage.getSidebarItems();
+
+                const secondItem = sideBarContent[1];
+                const treeItem = await secondItem.shadow$('dx-tree-item');
+                const treeTile = await treeItem.shadow$('a > dx-tree-tile');
+                const arrowIcon = await treeTile.shadow$(
+                    'a > div[role="heading"] > div.tile-forward-arrow',
+                );
+
+                expect(await arrowIcon.isExisting()).toBeTruthy();
+            });
+        });
+
+        describe('Navigation and content verification', () => {
+            it('should display markdown content when first reference is clicked', async () => {
+                const sideBarContent = await refPage.getSidebarItems();
+                const firstItem = sideBarContent[0];
+                const treeItem = await firstItem.shadow$('dx-tree-item');
+                await treeItem.click();
+
+                const contentLayout = await $('>>>doc-content-layout');
+                await contentLayout.waitForDisplayed();
+
+                expect(await contentLayout.isDisplayed()).toBeTruthy();
+
+                const heading = await $('>>>h1');
+                const headingText = await heading.getText();
+
+                expect(headingText).toEqual('Metamind API references');
+            });
+
+            it('should display Redoc UI when OAS reference is clicked', async () => {
+                await browser.url('/docs/service/multi-oas-redoc/references');
+                await refPage.waitForMarkdownBasedReferencePageLoad();
+
+                const sideBarContent = await refPage.getSidebarItems();
+                const secondItem = sideBarContent[1];
+                const treeItem = await secondItem.shadow$('dx-tree-item');
+                await treeItem.click();
+
+                const redocContainer = await $('doc-redoc-reference > .redoc-container');
+                await redocContainer.waitForDisplayed({ timeout: 30000 });
+
+                expect(await redocContainer.isDisplayed()).toBeTruthy();
+
+                page = new RedocApisPage(
+                    'docs/service/multi-oas-redoc/references/redoc-orders-multiple',
+                );
+            });
+
+            it('should have the correct api info title', async () => {
+                const apiTitle = await page.getApiTitle();
+                const titleText = await apiTitle.getText();
+
+                expect(titleText).toMatch('Einstein Vision and Einstein Language');
+            });
+
+            it('should display current reference title and "All References" with back arrow in LNB', async () => {
+                const projectHeaderContainer = await page.getProjectHeader();
+
+                const backButton = await projectHeaderContainer.$('a.redoc-project-back');
+                const allReference = await backButton.$('span.redoc-project-title');
+                const specTitle = await projectHeaderContainer.$('h2.redoc-spec-title');
+
+                expect(await allReference.getText()).toEqual('All Reference');
+                expect(await backButton.isExisting()).toBeTruthy();
+                expect(await specTitle.getText()).toEqual('Orders API');
+            });
+        });
+
+        describe('Navigation back to all references', () => {
+            before(async () => {
+                page = new RedocApisPage(
+                    'docs/service/multi-oas-redoc/references/redoc-orders-multiple',
+                );
+                page.open();
+                await page.waitPageLoad();
+            });
+
+            it('should navigate back to main URL when back arrow is clicked', async () => {
+                const projectHeaderContainer = await page.getProjectHeader();
+                const backButton = await projectHeaderContainer.$('a.redoc-project-back');
+
+                await backButton.click();
+
+                const contentLayout = await $('>>>doc-content-layout');
+                await contentLayout.waitForDisplayed();
+
+                const currentUrl = await browser.getUrl();
+
+                expect(currentUrl).toContain('/docs/service/multi-oas-redoc/references');
+                expect(currentUrl).not.toContain('redoc-orders-multiple');
+            });
+
+            it('should display all references in LNB after navigating back', async () => {
+                refPage = new ReferencePage('/docs/service/multi-oas-redoc/references');
+                const treeItems = await refPage.getSidebarItems();
+
+                expect(treeItems.length).toEqual(3);
+            });
+
+            it('should navigate to third reference when clicked', async () => {
+                const sideBarContent = await refPage.getSidebarItems();
+                const thirdItem = sideBarContent[2];
+                const treeItem = await thirdItem.shadow$('dx-tree-item');
+                await treeItem.click();
+
+                const redocContainer = await $('doc-redoc-reference > .redoc-container');
+                await redocContainer.waitForDisplayed({ timeout: 30000 });
+
+                expect(await redocContainer.isDisplayed()).toBeTruthy();
+                expect(await browser.getUrl()).toContain('redoc-quip-admin-api');
+
+                page = new RedocApisPage(
+                    'docs/service/multi-oas-redoc/references/redoc-quip-admin-api',
+                );
+
+                const apiTitle = await page.getApiTitle();
+                const titleText = await apiTitle.getText();
+
+                expect(titleText).toMatch('Quip Admin API');
+            });
+        });
+    });
 });

package/src/shared/specs/reference.test.ts

@@ -9,6 +9,7 @@ describe('API Pages', () => {
         beforeEach(async () => {
             referencePage = new ReferencePage('/docs/commerce/test-cc-orders-api/references');
             referencePage.open();
+            await referencePage.waitForSpecBasedReferencePageLoad();
         });
 
         layoutTest(referencePage, 'doc-header');
@@ -85,6 +86,7 @@ describe('Reference Versioning', () => {
     beforeEach(async () => {
         referencePage = new ReferencePage('/docs/c-cart-apis/references/ref1?meta=Summary');
         referencePage.open();
+        await referencePage.waitForSpecBasedReferencePageLoad();
     });
 
     it('should check for the presence of version picker dropdown', async () => {
@@ -133,7 +135,7 @@ describe('Reference Versioning', () => {
 
         await versionOptions[1].waitForClickable();
         await versionOptions[1].click();
-        await browser.pause(1000);
+        await referencePage.waitForSpecBasedReferencePageLoad();
 
         const apiTitle = await (await $('>>>div.api-title span')).getText();
         const apiVersion = await (await $('>>>p.version span')).getText();
@@ -179,8 +181,10 @@ describe('Reference Versioning', () => {
 
         await referencePage.waitForSpecBasedReferencePageLoad();
         await referencePage.selectVersion();
+        await referencePage.waitForSpecBasedReferencePageLoad();
 
         const container = await $('>>>div.title-area div');
+        await container.waitForDisplayed();
         const apiTitle = await container.getText();
 
         expect(apiTitle).toEqual('createBasket');
@@ -274,6 +278,7 @@ describe('Spec-Based Flexible References', () => {
         await referencePage.waitForSpecBasedReferencePageLoad();
 
         const container = await $('>>>div.title-area div');
+        await container.waitForDisplayed();
         const apiTitle = await container.getText();
 
         expect(apiTitle).toEqual('getBasket');

package/src/shared/specs/video.test.ts

@@ -24,8 +24,11 @@ describe('Video Plugin Scenarios ', () => {
         expect(await videoTitle?.getText()).toBe('Video from YouTube');
         const videoContainer = await videoRootElement?.$('.video-plugin-container');
         const iframeElement = await videoContainer?.$('iframe');
+        // The video plugin normalizes the YouTube host to www.youtube.com to
+        // avoid a cross-origin redirect that would drop the iframe's fullscreen
+        // grant (W-23222416). The authored src is `https://youtube.com/...`.
         expect(await iframeElement?.getAttribute('src')).toBe(
-            'https://youtube.com/embed/di6iwHhrH6s',
+            'https://www.youtube.com/embed/di6iwHhrH6s',
         );
     });
 });

package/static-dsc-portal-wdio.conf.js

@@ -0,0 +1,49 @@
+/**
+ * WebdriverIO configuration for E2E tests on Static Portal Pages (SSG) on DSC
+ *
+ * Prerequisites:
+ * 1. Build static pages: yarn build:static:portal
+ * 2. Start static server: yarn start:static:portal (runs on port 3000)
+ * 3. Run tests: yarn test:e2e:static:portal
+ */
+const BASE_CONFIG = require('./common-wdio.conf');
+
+exports.config = {
+    ...BASE_CONFIG.config,
+    // Static pages are served on port 3000 by default; override via E2E_BASE_URL env var
+    baseUrl: process.env.E2E_BASE_URL || 'http://localhost:3000',
+
+    // Reuse the same portal specs - static pages have the same URL structure
+    specs: ['./src/portal/specs/**/*.test.ts', './src/shared/specs/*.test.ts'],
+
+    // Exclude tests that require dynamic server features or pages not in static build
+    exclude: [
+        './src/portal/specs/docs.api.test.ts',
+        './src/portal/specs/docs.test.ts',
+        './src/shared/specs/banner.test.ts',
+    ],
+
+    // Output directory for static test results
+    outputDir: './_results_/static-portal',
+
+    // Override reporters to use separate output directories
+    reporters: [
+        'spec',
+        [
+            require('wdio-video-reporter'),
+            {
+                saveAllVideos: false,
+                videoSlowdownMultiplier: 3,
+                outputDir: './_results_/static-portal/videos',
+            },
+        ],
+        [
+            'allure',
+            {
+                outputDir: './_results_/static-portal/allure-raw',
+                disableWebdriverStepsReporting: true,
+                disableWebdriverScreenshotsReporting: false,
+            },
+        ],
+    ],
+};

package/static-portal-wdio.conf.js

@@ -18,19 +18,14 @@ exports.config = {
 
     // Exclude tests that require dynamic server features or pages not in static build
     exclude: [
+        // Advanced liquid tests require previewFuture, variables — not in static build
+        './src/shared/specs/liquid-advanced.test.ts',
         // /docs/apis landing page doesn't exist in static builds
         './src/portal/specs/docs.api.test.ts',
         // /docs landing page doesn't exist in static builds
         './src/portal/specs/docs.test.ts',
     ],
 
-    // Skip footer tests - footer is not available in static builds
-    mochaOpts: {
-        ...BASE_CONFIG.config.mochaOpts,
-        grep: 'should display footer',
-        invert: true,
-    },
-
     // Output directory for static test results
     outputDir: './_results_/static-portal',
 

package/wdio.conf.js

@@ -3,4 +3,5 @@ const BASE_CONFIG = require('./common-wdio.conf');
 exports.config = {
     ...BASE_CONFIG.config,
     specs: ['./src/content-repo/specs/**/*.test.ts', './src/shared/specs/*.test.ts'],
+    exclude: ['./src/shared/specs/contentActionToolbar.test.ts'],
 };