webdriverio (javascript) - upload an image

This is the example in the integration test.

describe('choosing a file in an <input type=file>', function() {
    before(h.setup());

    var path = require('path');
    var toUpload = path.join(__dirname, '..', '..', 'fixtures', 'cat-to-upload.gif');

    it('uploads a file and fills the form with it', function() {
        return this.client.chooseFile('#upload-test', toUpload).catch(function(err) {
            assert.ifError(err);
        }).getValue('#upload-test').then(function(val) {
            assert.ok(/cat\-to\-upload\.gif$/.test(val));
        });
    });

    it('errors if file does not exists', function() {
        return this.client.chooseFile('#upload-test', '$#$#940358435').catch(function(err) {
            assert.notEqual(err, null);
        });
    });
});

client.chooseFile(selector,localPath).then(callback);

The first parameter is the selector (id of your input field), second parameter is path to the file you will upload.

You just need to click submit to upload the file. Note that it probably won't work everywhere. The required file endpoint is not even documented in the Selenium project.

To upload image,

1. First create a folder named 'resources' in your project directory and save the image in that directory

2. Use the below code to upload the file . In the third line, you need to replace the selector with the one on your application. Please note that if there is a button like "Upload" or "Add Photo" in the application, you need not perform click on this button before adding the below code.

   var path = require("path");
   var toUpload = path.join(__dirname, "..", "resources", 
   "CompanyPic.jpg");
   browser.chooseFile('input[type="file"]', toUpload);
   

I am trying to upload a csv here, same might work for any type of file as well Here is the documentation link: https://webdriver.io/docs/api/browser/uploadFile/#usage

const filePath = path.join(process.cwd(), "/utilities/", "test.csv");
const remoteFilePath = await browser.uploadFile(filePath);
await browser.$("//input[@type='file']").addValue(remoteFilePath);
await browser.$("//button//span[contains(text(),'Submit')]").click();