Intermittent NoSuchElementError While Using Page Object APIs - Seeking Advice

[kumarmaxwell]

I'm facing a NoSuchElementError intermittently when automating the opening of a project folder using Page Object APIs. The error occurs randomly while attempting to locate an element with the CSS selector .monaco-inputbox. Here's the error I'm receiving:

Failed to open project : NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":".monaco-inputbox"}
(Session info: chrome=124.0.6367.243)
Error: Failed to open project : NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":".monaco-inputbox"}
(Session info: chrome=124.0.6367.243)
at C:\Developers\extester-mplabng-automation\dist\test\scratchpad.js:102:35
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Context. (C:\Developers\extester-mplabng-automation\dist\test\scratchpad.js:84:17)

A sample method which I am using

/**
 * Opens a folder in the VS Code workspace.
 *
 * @param {string} folderPath - The path to the folder to open.
 * @returns {Promise<void>}
 */
export async function openProject(folderPath: string): Promise<void> {
    // Create a new Workbench instance
    const testWorkBench = new Workbench();
    // Execute the command to open a folder
    await testWorkBench.executeCommand("File: Open Folder...");

    // Wait for 3 seconds
    await new Promise((res) => setTimeout(res, 3000));

    // Create a new InputBox instance
    const input = await InputBox.create();

    // Set the folder path in the InputBox
    await input.setText(path.normalize(folderPath));

    // Confirm the InputBox | Click OK
    await input.confirm();
    await input.confirm();

    console.log(`Opened folder: ${folderPath}`);
    await new Promise((res) => {
        setTimeout(res, 2000);
    });
}

My Current Workaround:
I’ve tried waiting for the .monaco-inputbox element using an explicit wait in a beforeEach() hook, but the issue still occurs intermittently:

try {
// Attempt to locate the element
 await VSBrowser.instance.driver.wait(until.elementLocated(By.css('.monaco-inputbox')),10000);
 } catch (error) {
 console.log('Failed to locate .monaco-inputbox element', error);
}

P.S : I am a rookie :(

[djelinek]

Hello, thank you for reaching out!

First of all, a code looks pretty clean, which is great.

Firstly, It would be nice to also attach the screenshot in which state the test failed. The ExTester is doing this screenshot automatically in test-resources/screenshots (you can see the path to the screenshots at the end of a console log).

Next thing, could you please double check you have correct settings set up for tests to be able to use these dialogs? (see Using dialogs)

anyway, first of all I would try to increase a bit the timeout for inputbox, which can be easily done on lines

// Create a new InputBox instance
const input = await InputBox.create(); --------> const input = await InputBox.create(10_000); // default wait is 5 seconds

if not working, maybe try to add static wait after it, it means something like

// Create a new InputBox instance
const input = await InputBox.create();
await input.getDriver().sleep(5_000); // will wait for another 5 seconds

Last thing, I don't know precisely your use-case but if you do not specifically open folder through UI steps.. you can use simpler way which will open for you VS Code instance with desired workspace in one line (see Opening files/folders). In your case it could looks eg:

await VSBrowser.openResources(path.normalize(folderPath));

[kumarmaxwell]

Thanks for your response and suggestions..

// Create a new InputBox instance
const input = await InputBox.create(); --------> const input = await InputBox.create(10_000); // default wait is 5 seconds

[// Create a new InputBox instance
const input = await InputBox.create();
await input.getDriver().sleep(5_000); // will wait for another 5 seconds]

I'll try your suggestions and will share the results asap.

Last thing, I don't know precisely your use-case but if you do not specifically open folder through UI steps.. you can use simpler way which will open for you VS Code instance with desired workspace in one line (see Opening files/folders). In your case it could looks eg:

await VSBrowser.openResources(path.normalize(folderPath));

I want to open folder through UI steps, that's my use case.

[kumarmaxwell]

Attached screenshots and log for your reference

debug.log

hope this log is enough to find the issue..

[djelinek]

hmm it is weird that on the screenshot there is no opened InputBox, neither filesystem path picker.. could you please share the screenshot what happens when you manually execute command File: Open Folder... in VS Code command palette?

regarding logs.. I am not sure what is happening there.. could you please share you uitest run script?

[kumarmaxwell]

export async function enterProjectName(projectName: string): Promise<void> {
    const input = await InputBox.create(5_000);
    await input.isDisplayed();

    // Sleep for 5_00ms to make sure UI elements loaded properly
    await input.getDriver().sleep(5_00);

    // Get the title of input box and compare with 'Create MPLAB Project (1/4)'
    expect(await input.getTitle()).equals('Create MPLAB Project (1/4)');

    // Set the project name from input parameters in the input box
    await input.setText(projectName);

    // Get the text available in the input box and verify it
    expect(await input.getText()).equals(projectName);

    await input.confirm(); // Confirm the project name

    // Sleep for 1_000ms to make sure UI elements loaded properly
    await input.getDriver().sleep(1_000);
}

made few workarounds from the existing code. And this how it looks

[kumarmaxwell]

export async function enterProjectName(projectName: string): Promise<void> {
    const input = await InputBox.create(5_000);
    await input.isDisplayed();

    // Sleep for 5_00ms to make sure UI elements loaded properly
    await input.getDriver().sleep(5_00);

    // Get the title of input box and compare with 'Create MPLAB Project (1/4)'
    expect(await input.getTitle()).equals('Create MPLAB Project (1/4)');

    // Set the project name from input parameters in the input box
    await input.setText(projectName);

    // Get the text available in the input box and verify it
    expect(await input.getText()).equals(projectName);

    await input.confirm(); // Confirm the project name

    // Sleep for 1_000ms to make sure UI elements loaded properly
    await input.getDriver().sleep(1_000);
}

made few workarounds from the existing code. And this how it looks

can you comment about the proper usage of input box. I am not a pro with vscode-extension-tester

[djelinek]

input box is a way how you can interact with VS Code (invoke commands, run tasks, etc) which brings each extension as addition into editor.

see Command Palette and QuickPicks