How to select a file for <input type="file" /> using the K6 browser module

Hello,
I am using K6 browser module to run a coded UI test of a webpage. The page includes an element and I would like the script to select a file to upload. Is this possible? I have tried the following approaches but I receive error messages in each case:

K6 browser approach…

const fileChooserLocator = page.locator('[data-testid="file-upload"]');
await fileChooserLocator.fill(uploadFilePath)

error: filling “[data-testid="file-upload"]” with “…”: input of this type cannot be filled

Playwright approach…

await page.locator('[data-testid="file-upload"]').setFiles(uploadFilePath);

error: Object has no member ‘setFiles’

Is there a way of setting the file on an element using the K6 browser module?

Note: I don’t want to test this using lower level POST calls as I am using a framework to handle the uploading of files from the browser to the server.

Thanks,
David.

@davidpepper

I am afraid, file upload functionality is not implemented yet.

https://github.com/grafana/xk6-browser/blob/main/common/element_handle.go#L1239-L1243
https://github.com/grafana/xk6-browser/issues/355

1 Like

@davidpepper

I managed to workaround with this function:

function setInputFiles (page, selector, filename, content, mime) {
    page.evaluate((selector, filename, content, mime) => {
        const dt = new DataTransfer();
        const blob = new Blob([content], { type: mime });
        const file = new File([blob], filename, { type: mime });
        dt.items.add(file)
        const input = document.querySelector(selector);
        input.files = dt.files;
    }, selector, filename, content, mime);
}

And you can call it like this:

 setInputFiles(page,'[data-testid="file-upload"]', 'myfilename.txt','This is the content of the file' , 'text/plain');

I hope it helps

6 Likes

Hi bandorko, this work-around worked perfectly for me. Thanks very much for your help!

2 Likes

Hi @bandorko,
somehow this solution does not work for my application. No errors, just the file (a pdf) doesn’t get uploaded.
I was wondering when will your changes from 1097 be available for use. Basically can we expect the release in Jan, we are eagerly waiting for it and its kind of a blocker for us.

Please let me know.

Thanks,
Vishal

Hi @vdubey, welcome to the community forum!

I don’t know when the changes will be integrated into k6.

Could you try your case with this function?

function setInputFiles (page, selector, filename, content, mime) {
  page.evaluate((selector, filename, content, mime) => {
      const dt = new DataTransfer();
      const blob = new Blob([content], { type: mime });
      const file = new File([blob], filename, { type: mime });
      dt.items.add(file)
      const input = document.querySelector(selector);
      input.files = dt.files;
      input.dispatchEvent(new Event('input', { 'bubbles': true }));
      input.dispatchEvent(new Event('change', { 'bubbles': true }));
  }, selector, filename, content, mime);
}

In some cases these dispatchEvent calls are needed. If it is not a solution for you, then please share the html source with me for further investigation.

1 Like

Hi, this feature will be available (at least for ElementHandle) when we ship this PR from @bandorko. We aim to merge it for the next version. However, the PR is being reviewed, and the timeline is unclear. But soon!

2 Likes