visual-studio-code

Is it possible to automate Visual Studio Code like Chrome with Puppeteer?


I want to make a number of screenshots of the VS Code interface, like debug section, project, etc. Is it possible to just send commands to VSCode and grab screenshots like, for example, it is possible with Puppeteer in Chrome web pages?

If there is no out-of-the-box solution, could it be possible with VS Code API?


Solution

  • Yes, technically, but it is not something that is officially supported by either puppeteer or VS Code.

    See this thread for some recent context : https://twitter.com/jsoverson/status/1111281688439672832

    This is a test script I made in order to experiment with the possibility.

    const childProcess = require('child_process');
    const puppeteer = require('puppeteer');
    const request = require('request-promise-native');
    var delay = require('timeout-as-promise');
    
    function spawn(port) {
      return childProcess.spawn(
        '/Applications/Visual Studio Code.app/Contents/MacOS/Electron',
        [
          `--remote-debugging-port=${port || 9229}`,
          '--user-data-dir=/tmp/foo', // arbitrary not-mine datadir to get the welcome screen
          '--enable-logging',
        ],
        {
          detached: true,
          env: process.env,
          stido: ['pipe', 'pipe', 'pipe']
        }
      );
    }
    
    async function main(){
      const port = 29378;
    
      const proc = spawn(port);
    
      await delay(2000);
    
      const resp = await request(`http://127.0.0.1:${port}/json/list`);
      const devToolsPages = JSON.parse(resp);
      const endpoint = devToolsPages.find(p => !p.title.match(/^sharedProcess/));
    
      const browser = await puppeteer.connect({
        browserWSEndpoint: endpoint.webSocketDebuggerUrl,
        defaultViewport: null, // used to bypass Chrome viewport issue, doesn't work w/ VS code.
        slowMo: 50
      })
    
      await delay(1000);
    
      const page = (await browser.pages())[0];
    
      await page.click('[href="command:workbench.action.files.newUntitledFile"]');
    
      await page.type('.monaco-editor', 'Woo! I am automating Visual Studio Code with puppeteer!\n');
      await page.type('.monaco-editor', 'This would be a super cool way of generating foolproof demos.');
    
      setTimeout(() => proc.kill(), 1000);
    
    }
    
    main();