How to get panels for code completion and previews?

[dylon]

I am building an LSP extension to add support for a new language to VSCode and would like to test its code completion recommendations and symbol previews on cursor hover events. I have had difficulty finding how to get the contents of and manipulate the respective panels. How may I interact with them with your API?

[djelinek]

Hello, thank you for your interest in using ExTester as your e2e test companion!

1. code completion recommendations

• first step is to get ContentAssist object for current position in text inside TextEditor - see toggleContentAssist
• then you can find all methods available for ContentAssist object here
• example of ContentAssist usage can be found in our Example repository

2. symbol previews on hover events - unfortunately those are reported and not implemented yet (see [🚀 Request] How to get the hover help of a selected text in text editor #1152 for details)

[djelinek]

Unfortunately that is not possible at the moment.

Please feel free to open Feature Request to support that options.
If you decide to open one, please also attach the screenshot with example of ContentAssistItem with visible parts what you would like to access to allow us quickly investigate possibilities.

[dylon]

I've found how to navigate VSCode's DOM with the developer tools and am implementing support for the missing features with the Selenium driver. I will replace the workarounds with your official versions once they are supported. Thank you for this wonderful library!

[djelinek]

That is great. If you would like to you are also welcome to contribute that code into ExTester.

Happy you found a solution

[dylon]

Here is a POC that works in the interim. I will submit a proper feature request for it but needed to get unblocked for now:

/**
 * Details about a code completion item.
 */
interface UICompletionItem {

  /** Completion symbol provided by the server. */
  label: string;

  /**
   * Description of the completion item (independent of its documentation, e.g.
   * its definition).
   */
  detail?: string;

  /** One-liner preview of the detail string. */
  compressedDetail?: string;

  /** Additional documentation provided by the server (not supported yet). */
  documentation?: string;

  /** Whether this item is the one highlighted in the completion list. */
  isSelected: boolean;
}

async function getCompletionItems(): Promise<void | UICompletionItem[]> {
  const options: void | WebElement[] =
    await driver.findElements(By.css('[widgetid="editor.widget.suggestWidget"] div[role="option"]'));
  if (options) {
    const items: UICompletionItem[] = [];
    for (let i = 0, k = options.length; i < k; i++) {
      const option: WebElement = options[i];
      const label: WebElement = await option.findElement(By.className("label-name"));
      const cssClasses: string = await option.getAttribute("class");
      const isSelected: boolean = /(?:^| )focused(?: |$)/.test(cssClasses);
      const item: UICompletionItem = {
        label: await label.getText(),
        isSelected: isSelected,
      };
      if (isSelected) {
        const compressedDetail: WebElement = await option.findElement(By.className("details-label"));
        item.compressedDetail = await compressedDetail.getText();
        const details: WebElement[] =
          await driver.findElements(By.css('[widgetid="suggest.details"]'));
        if (details.length > 0) {
          item.detail = await details[0].getText();
        }
      }
      items.push(item);
    }
    return items;
  }
}

Example usage:

await editor.typeTextAt(20, 33, '\ne');
await editor.toggleContentAssist(true);  // for for the completion panel to open
let items: UICompletionItem[] = await getCompletionItems() as UICompletionItem[];

[dylon]

Feature request for additional completion fields: #1650