Playwright, Manipulating Terminal and QuickPick View

I was wondering, whether it is possible to interact with the terminal/backend service when testing Theia using Playwright?

My use case involves cloning some git repos and then running some functions from vscode package and then interacting with my Views. For now I have managed it by invoking terminal and (by using playwright) just inserting text and pressing enter key. However I am unable to see any actual status from the terminal, so I don’t know when it finishes or waits for input. Is there any interaction possible with the terminal? Or alternative approach for setting up the project.

And is there a way to ask to pick first element from the QuickPick pallet other than press arrow down once button with Playwright.

@planger?

Hi @og_pixel,

thanks for your interest in Theia Playwright! And thanks @msujew for pinging me!

I think, for most use cases, I would set up the workspace rather using the TheiaWorkspace page object than preparing it in the application via the UI directly, see also the workspace test.

Of course it depends on whether these preparation steps are actually part of the behavior to be tested. If they are – so a user would do it this way and you want to test if that works – then it would make sense to also test it via the UI in the test. If it is on the other hand just a necessary preparation to test another user flow, I’d try to take it out of the test as much as possible, e.g. by cloning the repo in the test code rather than doing it via the UI.

Basically the TheiaWorkspace page object allows you to select a prepared folder to be opened in your Theia application. From you test, you could also clone a git repository into a specific folder and then provide this folder as a workspace to your Theia application:

    // clone a git repo, e.g. via https://www.npmjs.com/package/git-clone, into a dedicated folder
    const ws = new TheiaWorkspace(['path/to/the/folder/into/which/you/have/cloned/the/repo']);
    const app = await TheiaApp.load(page, ws);

I would try packing further steps, like building or running other things in preparation for the test, into VS Code tasks by also generating a tasks.json into the workspace, as this makes it easier to run them via the UI (and thus from your end-to-end test). Task progress is also easier to track from your test, e.g. if it is a background task, you could wait until a certain status bar element is gone. This way, you can keep the need for using the terminal to a minimum or avoid it completely.

There is no dedicated page object for executing tasks yet, unfortunately. But still it’d be easier to implement it manually than to deal with the terminal (see below). Also it would make a great addition to the page object model in Theia Playwright, in case you’d consider contributing that.

Interacting with the terminal
Unfortunately, there is no dedicated page object for the terminal yet. So as you wrote, you’d have to implement that yourself based on Playwright. However, also as you’ve mentioned, it is not quite straightforward since prompt of the terminal may vary depending on the shell and the system. But I guess it is doable.

Regarding QuickPick palettes
Theia Playwright only provides a page object for the command palette, see TheiaQuickCommandPalette and the respective test of this page object.

    await palette.open();
    await palette.type('Toggle Explorer');
    await palette.trigger('Toggle Explorer View');

type will enter text and trigger will then press arrow down until the label of the selected command matches the provided string. If a matching command is reached, it finally presses enter.

A very similar page object could be created for any QuickPick and QuickInput, I guess, by extracting certain functionality out of this class and share it with new other subclasses dedicated for QuickPick and QuickInput. That’d be a nice extension of the Theia page object model, if you’d consider contributing that.

Hope that helps! Let me know if you have further questions or consider contributing.