Electron E2E with playwright - How to get Hold of the file saver window. Unable to detect the save/open dialog using playwright

Question

I am trying to automate electron application with playwright and struck at a point where I need to save or open a file. I am not able to get hold of the dialog that is being opened after I trigger save or open file menu Item.

I tried using both below events but none of them seems to work.

electronApp.waitForEvent('window')

window.waitForEvent('filechooser')

Is there any way of getting hold of the opened save dialog so that I can access the save button and complete the save functionality through e2e script.

Answer 1

You can't. As a workaround, you can mock the file saver window.

Example:

const svgPath = path.join(__dirname, 'resources', 'generated.svg');
await app.evaluate(async ({ dialog }, svgPath) => {
    dialog.showSaveDialog = () => Promise.resolve({ filePath: svgPath, canceled: false });
}, svgPath);
await page.click('text=Export SVG');

Above I mocked the dialog.showSaveDialog to save a SVG file.

• app is from await _electron.launch(...),
• page is from await app.firstWindow();

There will be no file saver window popup. But your app can get the filePath directly through the mock.

Answer 2

It looks like it's a bug.

Apart from mocking, you can move the input to the client side. If you have something like

<input data-testid="my-input" type="file" multiple onchange=""/>

You can enter the files using Playwright, like below.

const window = await electronApp.firstWindow();

const myInput = window.getByTestId('my-input');
expect(myInput).not.toBe(undefined);
myInput.click();

await new Promise<void>(resolve => {
    window.on('filechooser', async (fileChooser) => {
        await fileChooser.setFiles(path.join(__dirname, "file.txt"));
        resolve();
    });
})