[BUG][Electron] filechooser event not emitted when dialog.show(Open|Save)Dialog is called

[OiNutter]

Duplicate of #5013. Full details and repro steps available there.

Opening new issue as requested by maintainers on original issue.

This is definitely a blocker for our integration tests as we need to test open and save functionality in our app and we're not able to select the files in the dialogs.

[tgdcat]

I'm also having trouble with showOpenDialogSync and showSaveDialogSync because the test stopped.
Is there any workaround?

[wsw0108]

I have create a test repo to trying to mock electron dialog like spectron-fake-dialog does, but failed.

Does not work, but returned mocked is true.
https://github.com/wsw0108/electron-playwright-test/blob/master/test/test.js#L74-L81

This console.log does not write to file.
https://github.com/wsw0108/electron-playwright-test/blob/master/test/preload.js#L37

Does anyone may have time to help to find out why?

[Daveiano]

I am also having this issue and have been looking for a solution.

@wsw0108 I am quite new to JS testing, but I will have a look into your code if I get some time. Please report back!

[wsw0108]

@Daveiano I have found the fail cause, it's the async thing of electron ipc. The mock works actually.

[wsw0108]

Based on spectron-fake-dialog, I wrote a little library to fake electron dialog for playwright/electron,
https://github.com/wsw0108/playwright-fake-dialog

[MikeJerred]

Based on spectron-fake-dialog, I wrote a little library to fake electron dialog for playwright/electron, https://github.com/wsw0108/playwright-fake-dialog

Awesome! Can actually simplify this and just do:

const electronApp = await playwright._electron.launch({ args: ['./main.js']});

// ...

// in test:
electronApp.evaluate(
  async({ dialog }, filePaths) => {
    dialog.showOpenDialog = () => Promise.resolve({ canceled: false, filePaths });
  },
  ['file.txt']
);

[wsw0108]

@MikeJerred Elegant solution.

Can I use your idea to update my repo?

[MikeJerred]

@MikeJerred Elegant solution.

Can I use your idea to update my repo?

Yep of course

[Daveiano]

@wsw0108 I am getting this error when using playwright-fake-dialog

page.evaluate: ReferenceError: require is not defined
    at eval (eval at evaluate (:3:2389), <anonymous>:2:31)
    at t.default.evaluate (<anonymous>:3:2412)
    at t.default.<anonymous> (<anonymous>:1:44)

    at ipcRendererSendSyncAsync (/var/www/weather-data-center-electron-forge/node_modules/playwright-fake-dialog/index.js:12:15)
    at mock (/var/www/weather-data-center-electron-forge/node_modules/playwright-fake-dialog/index.js:22:10)
    at /var/www/weather-data-center-electron-forge/src/main/renderer-empty.test.ts:93:13
    at fulfilled (/var/www/weather-data-center-electron-forge/src/main/renderer-empty.test.ts:5:58)

Setup is the following:

import { _electron as electron } from "playwright-core";
const { launch, mock } = require('playwright-fake-dialog')

...

beforeAll(async () => {
  // Launch Electron app.
  electronApp = await launch(electron, {
    args: [
      '.'
    ],
    env: {
      ...process.env
    },
  });

  // Get the first window that the app opens, wait if necessary.
  page = await electronApp.firstWindow();

  // Wait for frame actually loaded.
  await page.waitForSelector('main');

  // Direct Electron console to Node terminal.
  page.on('console', console.log);
});

...

it('should import new data', async () => {
  await mock(page, [
    {
      method: 'showOpenDialog',
      value: {
        filePaths: [`${__dirname.replace('src/main', '')}tests/data/upload-data-start-16-08-21-30-09-21-1196-records.csv`]
      }
    }
  ]);

  await page.click('button#import');
});

Any help and suggestions would be very appreciated!

[wsw0108]

https://github.com/wsw0108/electron-playwright-test/blob/e3c6ff53d9d71360270ddd37305b188b8273d2c5/app/main/index.js#L43

using 0.1.0 needs above lines in your electron main.js.

If you use html input, just use filechooser from playwright.

[Daveiano]

Ah, got you, thank you!

I got it working now with the snippet from @MikeJerred, many thanks for that!