@salesforcedevs/sfdocs-e2e 1.0.10 → 1.0.11-toolbar.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/sfdocs-e2e",
-  "version": "1.0.10",
+  "version": "1.0.11-toolbar.1",
   "description": "E2E test suite for SFDocs static portal pages (SSG)",
   "license": "ISC",
   "bin": {

package/src/content-repo/pageobjects/home.page.ts

@@ -10,46 +10,17 @@ export class HomePage extends Page {
             .then((grid) => grid.$$('dx-card-docs'));
     }
 
-    get projectCardsWithGuides(): Promise<WebdriverIO.ElementArray | WebdriverIO.Element[]> {
-        return this.projectCards.then((cards: WebdriverIO.ElementArray) => {
-            return cards.filter((card: WebdriverIO.Element) => {
-                return card.$('dx-button[href*=guide]').then((guideLink) => guideLink.isExisting());
-            });
-        });
-    }
-
-    get projectCardsWithReferences(): Promise<WebdriverIO.ElementArray | WebdriverIO.Element[]> {
-        return this.projectCards.then((cards) =>
-            cards.filter((card) =>
-                card.$('dx-button[href*=references]').then((link) => link.isExisting()),
-            ),
-        );
-    }
-
-    async getProjectCardWithTitle(title: string): Promise<WebdriverIO.Element | undefined> {
+    async getProjectCardByTitle(title: string): Promise<WebdriverIO.Element> {
         const projectCards = await this.projectCards;
-        for (let i = 0; i < projectCards.length; i++) {
-            const projectCard = projectCards[i];
-            const titleValue = await projectCard.getAttribute('header');
-            if (titleValue === title) {
+        for (const projectCard of projectCards) {
+            if ((await projectCard.getAttribute('header')) === title) {
                 return projectCard;
             }
         }
+        throw new Error(
+            `Project with title "${title}" is not available, Please check the content-config`,
+        );
     }
-
-    navigateToContentTypeWithProjectTitle =
-        (projectTitle: string) =>
-        async (contentType: string): Promise<void> => {
-            const projectCard = await this.getProjectCardWithTitle(projectTitle);
-            if (projectCard) {
-                const contentTypeButton = await projectCard.$(`dx-button[href*=${contentType}]`);
-                await contentTypeButton.click();
-            } else {
-                throw new Error(
-                    `Project with title "${projectTitle}" is not available, Please check the content-config`,
-                );
-            }
-        };
 }
 
 export default new HomePage();

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

@@ -5,42 +5,28 @@ describe('Guides and References ', () => {
     beforeEach(async () => {
         await HomePage.open();
     });
-    it('Test if all guides are opening and check the Guide title is same as Guide button text', async () => {
-        const projectCards = await HomePage.projectCardsWithGuides;
-
-        projectCards.forEach(async (cardElem, index) => {
-            if (index === 1) {
-                const guideButton = await cardElem.$('dx-button[href*=guide]');
-                await guideButton.click();
-                await DocsContentLayout.waitForContentLayoutSidebar();
-                const heading = await DocsContentLayout.getSidebarHeading();
-                expect(heading).toBe('Guides');
-            }
-        });
-    });
 
-    it('Test If all references are clickable and check five endpoints URLs with the URLs in Api Description', async () => {
-        const projectCards = await HomePage.projectCardsWithReferences;
+    it('Test that clicking a guides project card opens the guide and shows the guide sidebar', async () => {
+        // "Liquid Project" has no overview, so its card links to the guides.
+        const projectCard = await HomePage.getProjectCardByTitle('Liquid Project');
+        await projectCard.click();
+
+        await DocsContentLayout.waitForContentLayoutSidebar();
+        const sidebarContentTrees = await DocsContentLayout.getSidebarContentTrees();
 
-        projectCards.forEach(async (cardElem) => {
-            const refButton = await cardElem.$('dx-button[href*=references]');
-            await refButton.click();
-            (await $('doc-amf-reference')).waitForDisplayed();
-            const shadowAmfComponent = await (
-                await $('doc-amf-reference')
-            ).shadow$('div.container');
-            const sidebar = await shadowAmfComponent.$('dx-sidebar');
-            const sidebarTree = await sidebar.shadow$('dx-tree');
-            const sidebarTreeItems = await sidebarTree.shadow$$('dx-tree-item');
+        expect(sidebarContentTrees.length > 0).toBeTruthy();
+    });
 
-            const endPointsNodes = await sidebarTreeItems[0].shadow$$('dx-tree-item');
-            const endPointsNode = endPointsNodes[1];
+    it('Test that clicking a references project card opens the reference and shows the endpoints', async () => {
+        // "Cart APIs" has no overview or guides, so its card links to the references.
+        const projectCard = await HomePage.getProjectCardByTitle('Cart APIs');
+        await projectCard.click();
 
-            const endpointsText = (await endPointsNode.shadow$('a')).getText();
+        await (await $('doc-amf-reference')).waitForDisplayed();
 
-            expect(endpointsText).toBe('Endpoints');
+        await browser.waitUntil(async () => (await $$('>>>dx-tree-item')).length > 0);
+        const dxTreeItems = await $$('>>>dx-tree-item');
 
-            browser.back();
-        });
+        expect(dxTreeItems.length > 0).toBeTruthy();
     });
 });

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

@@ -13,35 +13,50 @@ describe('Homepage', () => {
     it('should show the expected number of projects', async () => {
         const projectCards = await HomePage.projectCards;
 
-        expect(projectCards.length).toEqual(21);
+        expect(projectCards.length).toEqual(33);
     });
 
     // it('is accessible', () => {
     //     assertAccessibleSync();
     // });
 
-    describe('Check homepage Overview links', () => {
-        it('Test Overview button in the card', async () => {
-            const projectCards = await HomePage.projectCards;
-            const cardElem = projectCards[0];
-            const overviewButton = await cardElem.$('dx-button[href*=overview]');
+    describe('Project card click navigation', () => {
+        it('navigates to the overview for a project that has an overview', async () => {
+            const projectCard = await HomePage.getProjectCardByTitle(
+                'TEST Commerce Cloud Orders APIs',
+            );
 
-            expect(await overviewButton.getText()).toMatch('Overview');
-            expect(await overviewButton.isClickable()).toBeTruthy();
+            const href = await projectCard.getAttribute('href');
+            expect(href).toContain('/overview');
+
+            await projectCard.click();
+            await (await $('dx-section')).waitForDisplayed();
+
+            expect(await browser.getUrl()).toContain('/overview');
         });
-    });
 
-    describe('Check homepage Guide links', () => {
-        it('Test Guide buttons in the cards', async () => {
-            const projectCards = await HomePage.projectCardsWithGuides;
-
-            projectCards.forEach(async (cardElem, index) => {
-                const guideButton = await cardElem.$('dx-button[href*=guide]');
-                if (index === 0 || index === 1) {
-                    expect(await guideButton.getText()).not.toBe(null);
-                    expect(await guideButton.isClickable()).toBeTruthy();
-                }
-            });
+        it('navigates to the guides for a project that has no overview but has guides', async () => {
+            const projectCard = await HomePage.getProjectCardByTitle('Liquid Project');
+
+            const href = await projectCard.getAttribute('href');
+            expect(href).toContain('/guide');
+
+            await projectCard.click();
+            await (await $('doc-content-layout')).waitForDisplayed();
+
+            expect(await browser.getUrl()).toContain('/guide');
+        });
+
+        it('navigates to the references for a project that has no overview and guides but has references', async () => {
+            const projectCard = await HomePage.getProjectCardByTitle('Cart APIs');
+
+            const href = await projectCard.getAttribute('href');
+            expect(href).toContain('/references');
+
+            await projectCard.click();
+            await (await $('doc-amf-reference')).waitForDisplayed();
+
+            expect(await browser.getUrl()).toContain('/references');
         });
     });
 });

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

@@ -9,9 +9,8 @@ describe('Navigation header test', () => {
         const projectCards = await HomePage.projectCards;
 
         const cardElem = projectCards[0];
-        const overviewButton = await cardElem.$('dx-button[href*=overview]');
 
-        await overviewButton.click();
+        await cardElem.click();
         (await $('>>> .header_l2_group-nav_overflow')).waitForDisplayed();
 
         const docHeaderNav = await $('>>> .header_l2_group-nav_overflow');
@@ -33,9 +32,8 @@ describe('Navigation header test', () => {
         const projectCards = await HomePage.projectCards;
 
         const cardElem = projectCards[0];
-        const guideButton = await cardElem.$('dx-button[href*=guide]');
 
-        await guideButton.click();
+        await cardElem.click();
         (await $('>>> .header_l2_group-nav_overflow')).waitForDisplayed();
 
         const docHeaderNav = await $('>>> .header_l2_group-nav_overflow');
@@ -57,9 +55,8 @@ describe('Navigation header test', () => {
         const projectCards = await HomePage.projectCards;
 
         const cardElem = projectCards[0];
-        const guideButton = await cardElem.$('dx-button[href*=references]');
 
-        await guideButton.click();
+        await cardElem.click();
         (await $('>>> .header_l2_group-nav_overflow')).waitForDisplayed();
 
         const docHeaderNav = await $('>>> .header_l2_group-nav_overflow');

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

@@ -40,6 +40,90 @@ describe('Test Sitemap Routes', () => {
         );
     });
 
+    it('lists each docs markdown page once and each spec page without a .html extension', async () => {
+        await HomePage.open('sitemap.xml');
+        const data = await browser.getSitemap(
+            'http://localhost:3000/internal-sitemap-contents-1.xml',
+        );
+
+        // Markdown topics are published with a .html extension.
+        expect(data.body).toContain('<loc>/docs/docs-content-type-example/get-started.html</loc>');
+        expect(data.body).toContain(
+            '<loc>/docs/docs-content-type-example/widget-concepts.html</loc>',
+        );
+        expect(data.body).toContain(
+            '<loc>/docs/docs-content-type-example/beta-bulk-import.html</loc>',
+        );
+
+        // Spec (Redoc) topics are published without an extension.
+        expect(data.body).toContain('<loc>/docs/docs-content-type-example/sample-api</loc>');
+        expect(data.body).toContain('<loc>/docs/docs-content-type-example/new-sample-api</loc>');
+
+        // Each markdown URL appears exactly once.
+        const occurrences =
+            data.body.split('<loc>/docs/docs-content-type-example/get-started.html</loc>').length -
+            1;
+        expect(occurrences).toBe(1);
+    });
+
+    it('excludes the external-link topic from the docs sitemap', async () => {
+        await HomePage.open('sitemap.xml');
+        const data = await browser.getSitemap(
+            'http://localhost:3000/internal-sitemap-contents-1.xml',
+        );
+
+        // externalLink entries never become routes, so they can't reach the sitemap.
+        expect(data.body).not.toContain('developer.salesforce.com');
+    });
+
+    it('lists the deep-nesting docs project pages and spec in the sitemap', async () => {
+        await HomePage.open('sitemap.xml');
+        const data = await browser.getSitemap(
+            'http://localhost:3000/internal-sitemap-contents-1.xml',
+        );
+
+        expect(data.body).toContain('<loc>/docs/docs-deep-nesting-example/introduction.html</loc>');
+        expect(data.body).toContain('<loc>/docs/docs-deep-nesting-example/install.html</loc>');
+        expect(data.body).toContain('<loc>/docs/docs-deep-nesting-example/workspace.html</loc>');
+        expect(data.body).toContain('<loc>/docs/docs-deep-nesting-example/example-api</loc>');
+    });
+
+    it('lists a localized docs page but omits pages excluded from the ja-jp menu', async () => {
+        await HomePage.open('sitemap.xml');
+        const data = await browser.getSitemap(
+            'http://localhost:3000/internal-sitemap-contents-1.xml',
+        );
+
+        // ja-jp topics that are configured in the ja-jp TOC are legitimately in the sitemap.
+        expect(data.body).toContain(
+            '<loc>/docs/ja-jp/docs-content-type-example/get-started.html</loc>',
+        );
+
+        // englishonly pages are never in the ja-jp menu, so they must not appear under /ja-jp/.
+        expect(data.body).not.toContain(
+            '<loc>/docs/ja-jp/docs-content-type-example/us-compliance-notes.html</loc>',
+        );
+    });
+
+    it('serves the noindex robots metatag on the docs home URL but not on a real topic', async () => {
+        await browser.addCommand('getHtml', async (url: any) => {
+            const data = await got(url);
+            return data;
+        });
+
+        // The project home URL renders the first topic as a landing page with noindex.
+        const home = await browser.getHtml('http://localhost:3000/docs/docs-content-type-example');
+        expect(home.body).toContain('<meta name="robots" content="noindex,nofollow,nosnippet"/>');
+
+        // The same topic requested at its real URL must be indexable.
+        const topic = await browser.getHtml(
+            'http://localhost:3000/docs/docs-content-type-example/get-started.html',
+        );
+        expect(topic.body).not.toContain(
+            '<meta name="robots" content="noindex,nofollow,nosnippet"/>',
+        );
+    });
+
     it('Read Coveo sitemap.xml', async () => {
         await browser.addCommand('getCoveoSitemap', async (url: any) => {
             const data = await got(url, {

package/src/portal/specs/docs.api.test.ts

@@ -1,6 +1,5 @@
 import DocsApisPage from '../pageobjects/docs.apis.page';
 import layoutTest from '../../shared/specs/layout-tests';
-import DocsContentLayout from '../../shared/pageobjects/docs-content-layout';
 
 let page: DocsApisPage;
 describe('/docs page basic display', () => {
@@ -23,46 +22,4 @@ describe('/docs page basic display', () => {
 
         expect((await cards).length).not.toBe(0);
     });
-
-    it('should display project cards click on overview - test first overview card', async () => {
-        const projectCards = await page.projectCardsWithGuides;
-        projectCards.forEach(async (cardElem, index) => {
-            if (index === 1) {
-                const guideButton = await cardElem.$('dx-button[href*=overview]');
-                await guideButton.click();
-                await DocsContentLayout.waitForContentLayoutSidebar();
-                const heading = await DocsContentLayout.getSidebarHeading();
-
-                expect(heading).toBe('Overview');
-            }
-        });
-    });
-
-    it('should display project cards click on guides - test first guide card', async () => {
-        const projectCards = await page.projectCardsWithGuides;
-        projectCards.forEach(async (cardElem, index) => {
-            if (index === 1) {
-                const guideButton = await cardElem.$('dx-button[href*=guide]');
-                await guideButton.click();
-                await DocsContentLayout.waitForContentLayoutSidebar();
-                const heading = await DocsContentLayout.getSidebarHeading();
-
-                expect(heading).toBe('Guides');
-            }
-        });
-    });
-
-    it('should display project cards click on references - test first references card', async () => {
-        const projectCards = await page.projectCardsWithReferences;
-        projectCards.forEach(async (cardElem, index) => {
-            if (index === 1) {
-                const refButton = await cardElem.$('dx-button[href*=references]');
-                await refButton.click();
-                await DocsContentLayout.waitForContentLayoutSidebar();
-                const heading = await DocsContentLayout.getSidebarHeading();
-
-                expect(heading).toBe('References');
-            }
-        });
-    });
 });

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

@@ -0,0 +1,99 @@
+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 newHandle = (await browser.getWindowHandles()).find(
+            (handle) => !handlesBefore.includes(handle),
+        ) as string;
+        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-content-layout.ts

@@ -1,16 +1,15 @@
 class DocsContentLayout {
-    SIDEBAR_HEADING_SELECTOR = 'div > div.padding-horizontal > div.header > h1.header-title';
+    SIDEBAR_SELECTOR = 'div > dx-sidebar-old';
+    SIDEBAR_CONTENT_SELECTOR = 'div.container div.sidebar-content dx-tree';
 
     async waitForContentLayoutSidebar(): Promise<void> {
-        const layout = await $('doc-content-layout');
-        const sidebar = await layout.shadow$('div > dx-sidebar');
+        const sidebar = await (await $('doc-content-layout')).shadow$(this.SIDEBAR_SELECTOR);
         await sidebar.waitForDisplayed();
     }
 
-    async getSidebarHeading(): Promise<string> {
-        const sidebar = await (await $('doc-content-layout')).shadow$('div > dx-sidebar');
-        const heading = await sidebar.shadow$(this.SIDEBAR_HEADING_SELECTOR);
-        return heading.getText();
+    async getSidebarContentTrees(): Promise<WebdriverIO.ElementArray> {
+        const sidebar = await (await $('doc-content-layout')).shadow$(this.SIDEBAR_SELECTOR);
+        return sidebar.shadow$$(this.SIDEBAR_CONTENT_SELECTOR);
     }
 }
 

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

@@ -0,0 +1,128 @@
+import Page from './page';
+
+class DocsPage extends Page {
+    constructor(url?: string) {
+        super(url ?? '/docs');
+    }
+
+    async waitPageLoad(): Promise<void> {
+        await (await $('>>>doc-content-layout')).waitForDisplayed();
+    }
+
+    async waitForRedocLoad(): Promise<void> {
+        await $('doc-redoc-reference > .redoc-container').waitForDisplayed({
+            timeout: this.REFERENCE_LOAD_WAIT_TIME,
+        });
+    }
+
+    async getContentHeading(): Promise<WebdriverIO.Element> {
+        return (await $('doc-unified-content-layout')).$('div.markdown-content h1');
+    }
+
+    private async getSidebar(): Promise<WebdriverIO.Element> {
+        return (await $('>>>doc-content-layout')).shadow$('div > dx-sidebar-old');
+    }
+
+    async waitForSidebar(): Promise<void> {
+        await (await this.getSidebar()).waitForDisplayed();
+    }
+
+    async getSidebarTrees(): Promise<WebdriverIO.ElementArray> {
+        const sidebar = await this.getSidebar();
+        return sidebar.shadow$$('div.container div.sidebar-content dx-tree');
+    }
+
+    private async getTreeTile(treeItem: WebdriverIO.Element): Promise<WebdriverIO.Element> {
+        return treeItem.shadow$('a > dx-tree-tile');
+    }
+
+    private async getTreeItemLabel(treeItem: WebdriverIO.Element): Promise<string> {
+        const treeTile = await this.getTreeTile(treeItem);
+        const label = await treeTile.shadow$('span.tile-label');
+        return (await label.getText()).trim();
+    }
+
+    private async findTreeItemByLabel(
+        treeItem: WebdriverIO.Element,
+        label: string,
+    ): Promise<WebdriverIO.Element | null> {
+        if ((await this.getTreeItemLabel(treeItem)) === label) {
+            return treeItem;
+        }
+
+        const children = await treeItem.shadow$$('dx-tree-item');
+        for (const child of children) {
+            const match = await this.findTreeItemByLabel(child, label);
+            if (match) {
+                return match;
+            }
+        }
+        return null;
+    }
+
+    async getSidebarTile(label: string): Promise<WebdriverIO.Element> {
+        const trees = await this.getSidebarTrees();
+        for (const tree of trees) {
+            const rootItem = await tree.shadow$('dx-tree-item');
+            const match = await this.findTreeItemByLabel(rootItem, label);
+            if (match) {
+                return match;
+            }
+        }
+        throw new Error(`No sidebar tile found with label "${label}"`);
+    }
+
+    async getTileForwardArrow(label: string): Promise<WebdriverIO.Element> {
+        const treeItem = await this.getSidebarTile(label);
+        return (await this.getTreeTile(treeItem)).shadow$('.tile-forward-arrow');
+    }
+
+    async getTileExternalLinkIcon(label: string): Promise<WebdriverIO.Element> {
+        const treeItem = await this.getSidebarTile(label);
+        return (await this.getTreeTile(treeItem)).shadow$('.tile-external-link-icon');
+    }
+
+    async getRedocBackLink(): Promise<WebdriverIO.Element> {
+        return $('>>>a.redoc-project-back');
+    }
+
+    async getRedocProjectTitle(): Promise<WebdriverIO.Element> {
+        return $('>>>.redoc-project-title');
+    }
+
+    async getRedocApiTitle(): Promise<WebdriverIO.Element> {
+        return $('>>>div.api-info > h1');
+    }
+
+    async getCurrentBreadcrumbLabel(): Promise<string> {
+        const breadcrumbs = await $('>>>doc-breadcrumbs');
+        const items = await breadcrumbs.shadow$$('doc-breadcrumb-item');
+        const lastItem = items[items.length - 1];
+        const label = await lastItem.shadow$('span');
+        return (await label.getText()).trim();
+    }
+
+    async getLanguagePicker(): Promise<WebdriverIO.Element> {
+        const pickers = await $$('>>>dx-dropdown [aria-label="Select Language"]');
+        for (const picker of pickers) {
+            if (await picker.isDisplayed()) {
+                return picker;
+            }
+        }
+        throw new Error('No visible language picker found');
+    }
+
+    async selectLanguage(displayText: string): Promise<void> {
+        const options = await $$('>>>dx-dropdown-option');
+        for (const option of options) {
+            const link = await option.shadow$('a.option');
+            if ((await link.getText()).trim() === displayText) {
+                await browser.execute((el: { click: () => void }) => el.click(), link);
+                return;
+            }
+        }
+        throw new Error(`No language option found with label "${displayText}"`);
+    }
+}
+
+export default DocsPage;

package/src/shared/pageobjects/page.ts

@@ -28,22 +28,6 @@ export default class Page {
             .then((grid) => grid.$$('dx-card-docs'));
     }
 
-    get projectCardsWithGuides(): Promise<WebdriverIO.ElementArray | WebdriverIO.Element[]> {
-        return this.projectCards.then((cards: WebdriverIO.ElementArray) => {
-            return cards.filter((card: WebdriverIO.Element) => {
-                return card.$('dx-button[href*=guide]').then((guideLink) => guideLink.isExisting());
-            });
-        });
-    }
-
-    get projectCardsWithReferences(): Promise<WebdriverIO.ElementArray | WebdriverIO.Element[]> {
-        return this.projectCards.then((cards) =>
-            cards.filter((card) =>
-                card.$('dx-button[href*=references]').then((link) => link.isExisting()),
-            ),
-        );
-    }
-
     async getHeader(headerTag = 'dx-global-header'): Promise<WebdriverIO.Element> {
         return await $(headerTag);
     }