Selector for input box opened with vscode.window.showInputBox

[Daniel Aguilar]

Hi there,

I am writing a test where I need to enter a string into an InputBox and press Enter but I'm stuck on how to select such element.
In the app that I am testing, the input box gets created by calling

vscode.window.showInputBox(options)

but I don't know what kind of element (and attributes such as id, css class, etc...) this command creates, so I have no idea about how to select it from my webdriverio test. Can anyone help?

Thanks

[Christian Bromann]

Check out the page objects that are available: https://webdriverio-community.github.io/wdio-vscode-service/. I never had to interact with an input box but definitely worth adding a test/example for interacting with it here: github.com/webdriverio-co…. Any contributions are welcome, thanks!

[Daniel Aguilar]

Thanks @christian-bromann. I'm still not familiar with page objects but I could make it run as I needed with this:

// call to dialog-opening function ran before this code
let myInput = await $('.quick-input-widget') as InputBox;
await myInput.waitForDisplayed();        
myInput.addValue( ['Hello World', 'Enter'] );

Thanks!

[jeffb-sfdc]

@protozoo I'm in the same boat - I'm writing a test for our extension, and one of the commands in our extension prompts the user with an input box. I tried the code you posted, but ran into some issues, and was wondering if you have any comments. I'll go line-by-line with the code you posted

let myInput = await $('.quick-input-widget') as InputBox;

...I get a TypeScript error of, "Conversion of type 'Element' to type 'InputBox' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first", so I changed to:

let myInput = await $('.quick-input-widget') as unknown as InputBox;

...I then get two errors with the next two lines of code:

await myInput.waitForDisplayed();        
myInput.addValue( ['Hello World', 'Enter'] );

...that waitForDisplayed() and addValue() are not properties of InputBox.

I'm importing InputBox from wdio-vscode-service (version 4.0.7 if it matters) ala:

import {
  InputBox
} from 'wdio-vscode-service';

I looked into the definition of InputBox (in node_modules/wdio-vscode-service/dist/pageobjects/workbench/Input.d.ts), but it doesn't have waitForDisplayed() or addValue(), so I'm a little puzzled as to these functions, and where they are coming from. Well, it's a moot point b/c I need access to the other functions that InputBox has, like selectQuickPick() and setText() and confirm().

I opened up VS Code's dev console, and there is indeed an element with a selector of .quick-input-widget, and the element is being found, but what gets returned back from $('.quick-input-widget') doesn't appear to be an InputBox object (either one with waitForDisplayed() or addValue(), or one with selectQuickPick() or confirm())

Anyway, I'm now stuck and haven't made any more additional progress, and I was wondering if can provide any assistance or suggestions on this.

And @christian-bromann I was wondering what your thoughts are on protozoo's proposed solution of using let myInput = await $('.quick-input-widget') as unknown as InputBox; - does this seem the right way to get the InputBox page object, or is there's a better way to get the instance of the input box's page object definition.

[Christian Bromann]

I recommend to do the following:

import { InputBox } from 'wdio-vscode-service'

const prompt = await new InputBox(workbench.locatorMap).wait()
await prompt.setText(`some text`)
await prompt.confirm()

[jeffb-sfdc]

@christian-bromann you beat me to it! I had just figured out what you had just posted and was in the middle is posting the solution when you posted your reply.

I have one suggestion though - what would be helpful (at least for me) would be if executeCommand() (in src/pageobjects/workbench/Workbench.ts) returned prompt (the InputBox instance) instead of void. Then one could just do:

const workbench = await browser.getWorkbench();
const inputBox = await workbench.executeCommand('my command');
await inputBox.selectQuickPick('Green');
await inputBox.confirm();

Thoughts?

I'll post a PR if is sounds good.

[Christian Bromann]

I'll post a PR if is sounds good.

Good idea, please do!

[jeffb-sfdc]

I posted #49 to address this issue.

[jeffb-sfdc]

@christian-bromann since my PR was merged this ticket can probably be closed.