Help me please, how to upload file. File-input appended on click, but on click it opens OS native window

Question

Can not upload a file. DOM elements:

<button type="button" id="button-upload" data-loading-text="Loading..." class="btn btn-primary"><i class="fa fa-upload"></i> Upload</button>

$('#button-upload').on('click', function() {
$('#form-upload').remove();

$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

$('#form-upload input[name=\'file\']').trigger('click');

if (typeof timer != 'undefined') {
    clearInterval(timer);
}

timer = setInterval(function() {
    if ($('#form-upload input[name=\'file\']').val() != '') {
        clearInterval(timer);

        // Reset everything
        $('.alert-dismissible').remove();
        $('#progress-bar').css('width', '0%');
        $('#progress-bar').removeClass('progress-bar-danger progress-bar-success');
        $('#progress-text').html('');

        $.ajax({
            url: 'index.php?route=marketplace/installer/upload&user_token=user_token_here',
            type: 'post',
            dataType: 'json',
            data: new FormData($('#form-upload')[0]),
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                $('#button-upload').button('loading');
            },
            complete: function() {
                $('#button-upload').button('reset');
            },
            success: function(json) {
                if (json['error']) {
                    $('#progress-bar').addClass('progress-bar-danger');
                    $('#progress-text').html('<div class="text-danger">' + json['error'] + '</div>');
                }

                if (json['text']) {
                    $('#progress-bar').css('width', '20%');
                    $('#progress-text').html(json['text']);
                }

                if (json['next']) {
                    next(json['next'], 1);
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    }
}, 500);
});

As I think the input appears after click button. But it opens OS dialog. I'd like to send a file without OS dialog. Now I'm using python. But the important thing is to use selenoid or another cluster for concurrent tests.

Please help me to understand how to do it.

Answer 1

you can create the input tag without triggering the click event by using javascript executor:

body=driver.find_element_by_tag_name('body');

driver.execute_script("$(arguments[0]).prepend('<form enctype=\"multipart/form-data\" id=\"form-upload\" style=\"display: block;\"><input type=\"file\" name=\"file\" /></form>')", body);

Note:

I just used the same command from the script you are provided in the question. Just note that here we are using $(arguments[0]) and not just arguments[0]; Here, $() is the jquery constructor that requires the element or element locator as the parameter.

Also,

I have set style=\"display: block;\" to make sure the input element is visible in UI for you make sure this script is valid. Once you are satisfied you can replace the block with 'none' as in your question. This time you cannot see the file after upload.

Suggestion:

As the UI has lots of activities like a progress bar, upload status etc it does make sense to use Autoit, silkulix etc to upload the file using upload window and validate all the features like a progress bar, status change etc. it is not recommended to skip validating these things as its an important feature in you UI

Answer 2

In one of my projects we had to upload a .csv file. In order to achieve this we were storing the test files with in the solution and then uploading the files as needed. I used C# to implement this, but i am assuming you can try a similar approach in python.

// Get the path of the folder where you stored the files

public string GetPath()

{

 var rootPath = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);

 var path = String.Concat(rootPath, @"\TestData\"); //I am storing my files in this folder

 return path;

}

//Construct the relative path

var relpath =(Path + "nameoffile.csv");

//Upload the file

public void Upload(string path)

{

    if (File.Exists(relpath)

            { 

                UploadButton.SendKeys(relpath);
            }
            else
            {
                throw new Exception(String.Concat("File could not found "));
            }
}

Hope the above gives you an idea