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

Grafana k6 k6-browser
1

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.

3

@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

4

@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

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

7

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

8

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.

10

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!

12

Hi, any update for this feature ?

13

Hi @emad4, you can follow the updates from the PR. It will likely be in the next release.

14

I am using the k6 browser module and want my script to upload a file. I used the method provided, and while it worked without any errors, I noticed that no file was attached in the front-end application. From my understanding, this method creates a file with the specified name and content. However, I need to upload a file directly from the file system to simulate real user traffic performance. Could you please suggest an alternative method for this.

15

Hi @divyakavidivyap

For security reasons you can’t upload the file directly from the file system, but there is a workaround (see here)

I hope it helps.

16

In a very similar vein, we would like to test dropping directories and files through the k6 browser
the majority of our users utilize this method.

Has any body been able to achieve this ?