openContextMenu() times out and fails

[jeffb-sfdc]

I'm writing a test which is automating the Explorer's tree view. I obtain the items in the view like so:

const treeViewSection = await sidebar.getContent().getSection('MY-PROJECT');
await treeViewSection.expand();
const visibleItems = (await treeViewSection.getVisibleItems()) as DefaultTreeItem[];

From visibleItems I then find the item/node I'm looking for (named, "viewItem" - which, at runtime, is a DefaultTreeItem)

I then call:

const contextMenu = await viewItem.openContextMenu();

...and I get the following error:

// Error: element (".monaco-menu-container") still not displayed after 5000ms
// at async ContextMenu.wait (/my-path/my-project/node_modules/wdio-vscode-service/src/pageobjects/menu/ContextMenu.ts:80:9)
// at async Context.<anonymous> (/my-path/my-project/test/specs/my-test-suite.e2e.ts:150:29)

Is there a bug here, or am I going about trying to get the contextual menu wrong?
I should also point out that

1. When this runs, the contextual menu for that item does actually appear, and appears before the error is logged. Maybe the locator for that page object is stale/out of date with VS Code? I'm running version 1.71.1, on OSX.
2. The overall goal of this is to find a specific item in the Explorer tree, open its contextual menu, and then run a command. I was planning on doing:

const contextMenu = await viewItem.openContextMenu();
const menuItem = await contextMenu.getItem('my-command');
const menu = await menuItem.select();

...and if there's a better way to do this, please let me know.

[jeffb-sfdc]

@christian-bromann the issue is in openContextMenu(), src/pageobjects/utils.ts, lines 201-202:

        await this.elem.click({ button: 2 })
        return new ContextMenu(this.locatorMap).wait()

The CSS it's looking for is .monaco-menu-container. I changed the code to:

        await this.elem.click({ button: 2 })
        sleep(2000)
        const sel1 = await browser.$$('.monaco-menu-container')

        const contextMenu = new ContextMenu(this.locatorMap);
        sleep(2000)
        const sel2 = await browser.$$('.monaco-menu-container')

        return contextMenu.wait()

...but sel1 and sel2 each end up being an empty array, which kinda confirms my suspicion that the CSS selector is stale and doesn't match the current state of VS Code.

I tried to debug this & fix this myself, but when I go to inspect the contextual menu (using the element inspector in VS Code's developer tools), the context menu immediately goes away. Any tips on how to inspect the context menu and get its CSS class?

[christian-bromann]

Any tips on how to inspect the context menu and get its CSS class?

Never tried to automate a context menu. If it is a native one with custom styles I have my doubts it is even possible.

[jeffb-sfdc]

@christian-bromann the issue might be that the context menu is a native UI control. The menu for the Output view's context menu is having the same problem (OutputView's openContextMenu() is having the same problem).

I noticed that the menu for the context menu for the Output view looks like a native UI control, but that the menu for the output channel selector looks different. I'm running VS Code 1.74.2. Maybe VS Code changed, and was using DOM-based menus for context menus, but are now using native UI controls?

[miketalley]

I am also having this issue.

I was able to work around it by doing this...

const sidebarSections = await workbench
    .getSideBar()
    .getContent()
    .getSection('ACCOUNTS');
const visibleItems = await sidebarSections.getVisibleItems();
await visibleItems[0].elem.click({ button: 'right' });

Unfortunately, the .click call does not return the menu, and I am having trouble getting the context of the menu at all. Is this even possible? It would be excellent if .openContextMenu returned the menu context once it's fixed!

[CristiCanizales]

I'm having this issue too🥲 And haven't been able to work around it 🆘