@salesforcedevs/sfdocs-e2e 1.0.12-fix-ver-picker-1 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/sfdocs-e2e",
-  "version": "1.0.12-fix-ver-picker-1",
+  "version": "1.0.12",
   "description": "E2E test suite for SFDocs static portal pages (SSG)",
   "license": "ISC",
   "bin": {

package/src/shared/pageobjects/content-action-toolbar.ts

@@ -0,0 +1,101 @@
+class ContentActionToolbar {
+    HOST_SELECTOR = 'doc-content-action-toolbar';
+    INLINE_BUTTON_SELECTOR = 'dx-button.toolbar-button';
+    MENU_TRIGGER_SELECTOR = 'dx-button.menu-trigger';
+    MENU_SELECTOR = 'dx-dropdown.toolbar-menu';
+    MENU_GROUP_SELECTOR = 'div.menu_option';
+    MENU_HEADING_SELECTOR = 'span.menu_heading';
+    MENU_OPTION_SELECTOR = 'dx-dropdown-option';
+    OPTION_LABEL_SELECTOR = 'div.option_label';
+    COPIED_TOOLTIP_SELECTOR = '[role="tooltip"].is-visible';
+
+    async get(): Promise<WebdriverIO.Element> {
+        const toolbar = await $(`>>>${this.HOST_SELECTOR}`);
+        await toolbar.waitForDisplayed();
+        return toolbar;
+    }
+
+    async isPresent(): Promise<boolean> {
+        return (await $(`>>>${this.HOST_SELECTOR}`)).isExisting();
+    }
+
+    async getInlineButtonLabels(toolbar: WebdriverIO.Element): Promise<string[]> {
+        const inlineButtons = await toolbar.shadow$$(this.INLINE_BUTTON_SELECTOR);
+        return Promise.all(inlineButtons.map(async (button) => (await button.getText()).trim()));
+    }
+
+    async openMoreActionsMenu(toolbar: WebdriverIO.Element): Promise<void> {
+        const trigger = await toolbar.shadow$(this.MENU_TRIGGER_SELECTOR);
+        await trigger.waitForClickable();
+        await trigger.click();
+    }
+
+    async getMenuOptionLabelsByGroup(
+        toolbar: WebdriverIO.Element,
+    ): Promise<Record<string, string[]>> {
+        const dropdown = await toolbar.shadow$(this.MENU_SELECTOR);
+        const groupContainers = await dropdown.shadow$$(this.MENU_GROUP_SELECTOR);
+
+        const labelsByGroup: Record<string, string[]> = {};
+        for (const group of groupContainers) {
+            const heading = (await (await group.$(this.MENU_HEADING_SELECTOR)).getText()).trim();
+            const options = await group.$$(this.MENU_OPTION_SELECTOR);
+            labelsByGroup[heading] = await Promise.all(
+                options.map(async (option) =>
+                    (await (await option.shadow$(this.OPTION_LABEL_SELECTOR)).getText()).trim(),
+                ),
+            );
+        }
+        return labelsByGroup;
+    }
+
+    async clickMenuOption(toolbar: WebdriverIO.Element, label: string): Promise<void> {
+        const dropdown = await toolbar.shadow$(this.MENU_SELECTOR);
+        const options = await dropdown.shadow$$(this.MENU_OPTION_SELECTOR);
+        for (const option of options) {
+            const optionLabel = (
+                await (await option.shadow$(this.OPTION_LABEL_SELECTOR)).getText()
+            ).trim();
+            if (optionLabel === label) {
+                await option.click();
+                return;
+            }
+        }
+        throw new Error(`Menu option "${label}" not found`);
+    }
+
+    async getUrlFromNewTab(action: () => Promise<void>): Promise<string> {
+        const originalHandle = await browser.getWindowHandle();
+        const handlesBefore = await browser.getWindowHandles();
+
+        await action();
+
+        await browser.waitUntil(
+            async (): Promise<boolean> =>
+                (await browser.getWindowHandles()).length > handlesBefore.length,
+            {
+                timeout: 10000,
+                timeoutMsg: 'Expected a new browser tab to open',
+            },
+        );
+
+        const handlesAfter = await browser.getWindowHandles();
+        const newHandle = handlesAfter.find((handle) => !handlesBefore.includes(handle));
+        if (!newHandle) {
+            throw new Error('New browser tab opened but its handle could not be resolved');
+        }
+        await browser.switchToWindow(newHandle);
+        const url = await browser.getUrl();
+
+        await browser.closeWindow();
+        await browser.switchToWindow(originalHandle);
+        return url;
+    }
+
+    async getVisibleCopiedTooltipLabel(): Promise<string> {
+        const tooltip = await $(`>>>${this.COPIED_TOOLTIP_SELECTOR}`);
+        return (await tooltip.getAttribute('aria-label'))?.trim() ?? '';
+    }
+}
+
+export default new ContentActionToolbar();

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

@@ -33,13 +33,11 @@ class DocsPage extends Page {
     }
 
     private async getTreeTile(treeItem: WebdriverIO.Element): Promise<WebdriverIO.Element> {
-        await treeItem.waitForExist();
         return treeItem.shadow$('a > dx-tree-tile');
     }
 
     private async getTreeItemLabel(treeItem: WebdriverIO.Element): Promise<string> {
         const treeTile = await this.getTreeTile(treeItem);
-        await treeTile.waitForExist();
         const label = await treeTile.shadow$('span.tile-label');
         return (await label.getText()).trim();
     }
@@ -76,16 +74,12 @@ class DocsPage extends Page {
 
     async getTileForwardArrow(label: string): Promise<WebdriverIO.Element> {
         const treeItem = await this.getSidebarTile(label);
-        const treeTile = await this.getTreeTile(treeItem);
-        await treeTile.waitForExist();
-        return treeTile.shadow$('.tile-forward-arrow');
+        return (await this.getTreeTile(treeItem)).shadow$('.tile-forward-arrow');
     }
 
     async getTileExternalLinkIcon(label: string): Promise<WebdriverIO.Element> {
         const treeItem = await this.getSidebarTile(label);
-        const treeTile = await this.getTreeTile(treeItem);
-        await treeTile.waitForExist();
-        return treeTile.shadow$('.tile-external-link-icon');
+        return (await this.getTreeTile(treeItem)).shadow$('.tile-external-link-icon');
     }
 
     async getRedocBackLink(): Promise<WebdriverIO.Element> {

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

@@ -28,7 +28,6 @@ export class ReferencePage extends Page {
         const versionPicker = await this.getVersionPickerBtn();
         await versionPicker.click();
         const versionOptions = await $$('>>>doc-version-picker dx-dropdown-option');
-        await versionOptions[1].waitForClickable();
         await versionOptions[1].click();
     }
 

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

@@ -1,6 +1,7 @@
 import DocsPage from '../pageobjects/docs.page';
 import GuidePage from '../pageobjects/guide.page';
 import { ReferencePage } from '../pageobjects/reference.page';
+import contentActionToolbar from '../pageobjects/content-action-toolbar';
 
 const DOCS_MARKDOWN_PATH = '/docs/docs-content-type-example/get-started.html';
 
@@ -10,63 +11,154 @@ const EN_US_MARKDOWN_REFERENCE_PATH =
 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']),
-    );
-}
+const INLINE_MARKDOWN_LABELS = ['Copy as Markdown', 'View as Markdown', 'View llms.txt'];
+const MENU_GROUPS = {
+    'This Page': [
+        'Copy as Markdown',
+        'View as Markdown',
+        'Copy URL to Markdown',
+        'Open in ChatGPT',
+        'Open in Claude',
+        'Open in Perplexity',
+    ],
+    'All Documentation': ['View llms.txt', 'Copy URL to llms.txt'],
+};
+const AI_ASSISTANTS = [
+    { label: 'Open in ChatGPT', host: 'chatgpt.com' },
+    { label: 'Open in Claude', host: 'claude.ai' },
+    { label: 'Open in Perplexity', host: 'www.perplexity.ai' },
+];
+const LLMS_TXT_PATH = '/docs/llms.txt';
+const COPIED_TOOLTIP_LABEL = 'Copied!';
 
 describe('Content action toolbar scenarios', () => {
-    it('Markdown guide should have the toolbar', async () => {
+    it('should show the inline markdown actions when opening a markdown guide', 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);
+        const toolbar = await contentActionToolbar.get();
+        expect(await contentActionToolbar.getInlineButtonLabels(toolbar)).toEqual(
+            expect.arrayContaining(INLINE_MARKDOWN_LABELS),
+        );
     });
 
-    it('Markdown reference should have the toolbar', async () => {
+    it('should show the inline markdown actions when opening a markdown reference', 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);
+        const toolbar = await contentActionToolbar.get();
+        expect(await contentActionToolbar.getInlineButtonLabels(toolbar)).toEqual(
+            expect.arrayContaining(INLINE_MARKDOWN_LABELS),
+        );
     });
 
-    it('Markdown docs page should have the toolbar', async () => {
+    it('should show the inline markdown actions when opening a markdown docs page', async () => {
         const page = new DocsPage(DOCS_MARKDOWN_PATH);
         page.open();
         await page.waitPageLoad();
 
-        const toolbar = await $('>>>doc-content-action-toolbar');
-        await toolbar.waitForDisplayed();
-        await expectToolbarButtons(toolbar);
+        const toolbar = await contentActionToolbar.get();
+        expect(await contentActionToolbar.getInlineButtonLabels(toolbar)).toEqual(
+            expect.arrayContaining(INLINE_MARKDOWN_LABELS),
+        );
+    });
+
+    it('should expose the full grouped action set through the More actions menu on a markdown page', async () => {
+        const page = new GuidePage(EN_US_GUIDE_PATH);
+        page.open();
+        await page.waitPageLoad();
+
+        const toolbar = await contentActionToolbar.get();
+        await contentActionToolbar.openMoreActionsMenu(toolbar);
+
+        const labelsByGroup = await contentActionToolbar.getMenuOptionLabelsByGroup(toolbar);
+        expect(Object.keys(labelsByGroup)).toEqual(
+            expect.arrayContaining(Object.keys(MENU_GROUPS)),
+        );
+        for (const [group, expectedLabels] of Object.entries(MENU_GROUPS)) {
+            expect(labelsByGroup[group]).toEqual(expect.arrayContaining(expectedLabels));
+        }
     });
 
-    it("Non-markdown reference shouldn't have toolbar", async () => {
+    AI_ASSISTANTS.forEach(({ label, host }) => {
+        it(`should open ${host} with the page context when selecting ${label}`, async () => {
+            const page = new GuidePage(EN_US_GUIDE_PATH);
+            page.open();
+            await page.waitPageLoad();
+
+            const toolbar = await contentActionToolbar.get();
+            await contentActionToolbar.openMoreActionsMenu(toolbar);
+
+            const url = await contentActionToolbar.getUrlFromNewTab(() =>
+                contentActionToolbar.clickMenuOption(toolbar, label),
+            );
+            expect(url).toContain(host);
+        });
+    });
+
+    it('should open the markdown version of the page in a new tab when selecting View as Markdown', async () => {
+        const page = new GuidePage(EN_US_GUIDE_PATH);
+        page.open();
+        await page.waitPageLoad();
+
+        const toolbar = await contentActionToolbar.get();
+        await contentActionToolbar.openMoreActionsMenu(toolbar);
+
+        const url = await contentActionToolbar.getUrlFromNewTab(() =>
+            contentActionToolbar.clickMenuOption(toolbar, 'View as Markdown'),
+        );
+        expect(url.endsWith('.md')).toBe(true);
+    });
+
+    it('should open the site llms.txt in a new tab when selecting View llms.txt', async () => {
+        const page = new GuidePage(EN_US_GUIDE_PATH);
+        page.open();
+        await page.waitPageLoad();
+
+        const toolbar = await contentActionToolbar.get();
+        await contentActionToolbar.openMoreActionsMenu(toolbar);
+
+        const url = await contentActionToolbar.getUrlFromNewTab(() =>
+            contentActionToolbar.clickMenuOption(toolbar, 'View llms.txt'),
+        );
+        expect(url.endsWith(LLMS_TXT_PATH)).toBe(true);
+    });
+
+    it('should flash the Copied! tooltip when selecting Copy URL to Markdown', async () => {
+        const page = new GuidePage(EN_US_GUIDE_PATH);
+        page.open();
+        await page.waitPageLoad();
+
+        const toolbar = await contentActionToolbar.get();
+        await contentActionToolbar.openMoreActionsMenu(toolbar);
+        await contentActionToolbar.clickMenuOption(toolbar, 'Copy URL to Markdown');
+
+        await browser.waitUntil(
+            async () =>
+                (await contentActionToolbar.getVisibleCopiedTooltipLabel()) ===
+                COPIED_TOOLTIP_LABEL,
+            {
+                timeout: 5000,
+                timeoutMsg: 'Expected the menu tooltip to flash "Copied!"',
+            },
+        );
+    });
+
+    it('should not show the toolbar on a non-markdown reference', 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();
+        expect(await contentActionToolbar.isPresent()).toBeFalsy();
     });
 
-    it("Non en-us locale page shouldn't have toolbar", async () => {
+    it('should not show the toolbar on a non en-us page', 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();
+
+        expect(await contentActionToolbar.isPresent()).toBeFalsy();
     });
 });

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

@@ -66,24 +66,24 @@ describe('Test Guides page components functionality> ', () => {
 
         expect(sideBarContent.length).toEqual(6);
 
-        const nextStepTreeItem = await sideBarContent[3].shadow$('dx-tree-item');
-        await nextStepTreeItem.waitForExist();
-        const nextStepOption = await nextStepTreeItem.shadow$('dx-tree-tile');
-        await nextStepOption.waitForExist();
-        expect(await nextStepOption.isExisting()).toBeTruthy();
-
-        const installVSCodeTreeItem = await sideBarContent[1].shadow$('dx-tree-item');
-        await installVSCodeTreeItem.waitForExist();
-        const installVSCodeOptionTile = await installVSCodeTreeItem.shadow$('dx-tree-tile');
-        await installVSCodeOptionTile.waitForExist();
-        expect(await installVSCodeOptionTile.isExisting()).toBeTruthy();
-
-        await installVSCodeTreeItem.click();
+        const nextStepOption = await (
+            await sideBarContent[3].shadow$('dx-tree-item')
+        ).shadow$('dx-tree-tile');
+
+        expect(nextStepOption.isExisting()).toBeTruthy();
+
+        const installVSCodeOptionTile = await (
+            await sideBarContent[1].shadow$('dx-tree-item')
+        ).shadow$('dx-tree-tile');
+
+        expect(installVSCodeOptionTile.isExisting()).toBeTruthy();
+
+        await (await sideBarContent[1].shadow$('dx-tree-item')).click();
         await page.waitPageLoad();
 
-        const installVSCodeTreeItemAfterNav = await sideBarContent[1].shadow$('dx-tree-item');
-        await installVSCodeTreeItemAfterNav.waitForExist();
-        const installVSCodeOption = await installVSCodeTreeItemAfterNav.shadow$$('dx-tree-item');
+        const installVSCodeOption = await (
+            await sideBarContent[1].shadow$('dx-tree-item')
+        ).shadow$$('dx-tree-item');
 
         expect(installVSCodeOption.length).toEqual(3);
 
@@ -304,15 +304,9 @@ describe('Search guides', () => {
         await browser.keys('SFRA');
 
         const trees = await sidebar.shadow$$('div.container div.sidebar-content dx-tree');
-        const rootTreeItem = await trees[0].shadow$('dx-tree-item');
-        await rootTreeItem.waitForExist();
-        const servicesTree = await rootTreeItem.shadow$('dx-tree-item');
-        await servicesTree.waitForExist();
+        const servicesTree = await (await trees[0].shadow$('dx-tree-item')).shadow$('dx-tree-item');
         const treeItem = await servicesTree.shadow$('dx-tree-item');
-        await treeItem.waitForExist();
-        const treeTile = await treeItem.shadow$('dx-tree-tile');
-        await treeTile.waitForExist();
-        const item = await treeTile.shadow$('span');
+        const item = await (await treeItem.shadow$('dx-tree-tile')).shadow$('span');
         const itemText = await item.getText();
         expect(itemText).toBe('Find SFRA Tools');
     });
@@ -328,10 +322,7 @@ describe('Search guides', () => {
         await browser.keys('SFRA');
 
         const trees = await (await sidebar).shadow$$('div.container div.sidebar-content dx-tree');
-        const rootTreeItem = await trees[0].shadow$('dx-tree-item');
-        await rootTreeItem.waitForExist();
-        const servicesTree = await rootTreeItem.shadow$('dx-tree-item');
-        await servicesTree.waitForExist();
+        const servicesTree = await (await trees[0].shadow$('dx-tree-item')).shadow$('dx-tree-item');
         const treeItem = await servicesTree.shadow$('dx-tree-item');
         await treeItem.click();
         await page.waitPageLoad();

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

@@ -190,13 +190,10 @@ describe('Redoc API Reference page', () => {
 
                 const secondItem = sideBarContent[1];
                 const treeItem = await secondItem.shadow$('dx-tree-item');
-                await treeItem.waitForExist();
                 const treeTile = await treeItem.shadow$('a > dx-tree-tile');
-                await treeTile.waitForExist();
                 const arrowIcon = await treeTile.shadow$(
                     'a > div[role="heading"] > div.tile-forward-arrow',
                 );
-                await arrowIcon.waitForExist();
 
                 expect(await arrowIcon.isExisting()).toBeTruthy();
             });

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

@@ -109,8 +109,6 @@ describe('Reference Versioning', () => {
         const versionOptions = await $$('>>>doc-version-picker dx-dropdown-option');
 
         expect(versionOptions.length).toEqual(2);
-        await versionOptions[0].waitForClickable();
-        await versionOptions[1].waitForClickable();
         expect(await (await versionOptions[0].shadow$('div>div')).getText()).toEqual('0.1.3');
         expect(await (await versionOptions[1].shadow$('div>div')).getText()).toEqual('0.1.2');
     });
@@ -153,8 +151,6 @@ describe('Reference Versioning', () => {
         await versionPicker.click();
 
         const versionOptions = await $$('>>>doc-version-picker dx-dropdown-option');
-
-        await versionOptions[1].waitForClickable();
         const selectedVersionText = await (await versionOptions[1].shadow$('div>div')).getText();
 
         await versionOptions[1].click();
@@ -226,12 +222,11 @@ describe('Markdown-Based Flexible References', () => {
         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(1);
-        const treeItem = await sideBarContent[0].shadow$('dx-tree-item');
-        await treeItem.waitForExist();
-        const tile = await treeItem.shadow$('dx-tree-tile');
-        await tile.waitForExist();
-        expect(await tile.isExisting()).toBeTruthy();
-        await treeItem.click();
+        const tile = await (
+            await sideBarContent[0].shadow$('dx-tree-item')
+        ).shadow$('dx-tree-tile');
+        expect(tile.isExisting()).toBeTruthy();
+        await (await sideBarContent[0].shadow$('dx-tree-item')).click();
         await referencePage.waitForMarkdownBasedReferencePageLoad();
         const title = await $('>>>h1');
         const titleText = await title.getText();