Net Read Timeout error appears after click action in Selenium Ruby - javascript

I am automating my application using Selenium Ruby.The application has a 'Add Files' button to attach files. On clicking it, a system modal popup to Upload Files is displayed.However, just after that the code is stuck and i see the error "Error:#'<'Net::ReadTimeout: Net::ReadTimeout'>'" in the console.
Here is the html dom:
<div class="row fileupload-buttonbar">
<span data-test-id="button-add-files" class="btn btn-success fileinput-button mq">
<span>Add files...</span>
<input type="file" name="files[]" multiple="" data-enterkeydisabled="true">
</span>
<button data-test-id="button-delete-all-files" type="button" class="btn btn-danger delete mq">Delete All</button>
</div>
The xpath used to get the button is "//*[#data-test-id='button-add-files'].
I also tried using the Javascript functions
driver.execute_script("arguments[0].click();",xpath)
driver.execute_script("document.getElementsByClassName('btn btn-success fileinput-button mq')[0].click()")
Can someone help me on this?
Thanks

Related

Page keeps refreshing when I click on a Bootstrap Modal

I have a page with two buttons connected to two different bootstrap modals. They were all working fine but all of a sudden stopped. Whenever I click on either button now, the page just keeps refreshing as opposed to displaying the respective modal. I do not know what the problem is as there is no error in the console.
The site is hosted on https://storzy.netlify.app/
I have searched high and low but can't seem to find what might be stopping the modal from displaying correctly now.
Please how do I go about stopping the page from refreshing and showing the correct modal instead?
Thank you.
change the form to div for your login and signup parents
<div class="form-inline mt-3 mt-lg-0">
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal">Sign up</button>
</div>
If the button is within a form, the default behavior is submit. If the button is not within a form, it will do nothing.
Hence to avoid the page refresh, add type="button" to the buttons to prevent it.
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal" type="button">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal" type="button">Sign up</button>

I have a problem with the button, downtime, after click

<div class="col-md-3 text-right">
<button type="submit" id="ok" class="btn btn-primary btn-lg">Submit</button>
</div>
The application can be accessed by multiple users working in separate profiles, solution I need is that after clicking on a button by specific user, that same button must be blocked for the next 5 seconds. So not every user can click a button at the same time.

Using Html Extension with ActionLink

I have written an MVC5 Html extension to determine whether a button I have on screen is disabled.
It is as below:
public static HtmlString IsButtonEnabled(this HtmlHelper html, bool buttonEnabled)
{
return new HtmlString(buttonEnabled ? "" : "disabled=\"disabled\"");
}
My cshtml is as below:
<div class="col-sm-12">
<a class="btn btn-default btn-block btn-metro" #Html.IsButtonEnabled(Model.IsMyButtonEnabled)
onclick="location.href='#Url.Action("Index","MyController")'">
<img src="~/images/myImage.png"> <span class="h2">My Button</span>
</a>
</div>
The button is getting disabled as expected - however, due to using the onclick allows it to still be clicked. Is it possible to use my Html Extension with a Html.ActionLink?
I realise I could quite easily prevent the click using some js on the page - however, I would like to avoid that if possible.
UPDATE
The extension method is used by 10 different buttons on the screen. The generated markup for one of the buttons is as below:
<div class="col-sm-12">
<a class="btn btn-default btn-block btn-metro" disabled="disabled" href="/MyController/Index">
<img src="/myApp/images/myImage.png"> <span class="h2">My Button</span>
</a>
</div>
With Stephen comment below I change the on click to just be href - however, even though the button is disabled I can still click on it and the site navigates to the url specified
You could change the "a" tag to "button" tag. The URL tag is not meant to be disabled.
<div class="col-sm-12">
<button class="btn btn-default btn-block btn-metro" #Html.IsButtonEnabled(Model.IsMyButtonEnabled)
onclick="location.href='#Url.Action("Index","MyController")'">
<img src="~/images/myImage.png"> <span class="h2">My Button</span>
</button>
</div>

MVC #foreach and JavaScript Confusion

I'm trying to make a button in a Bootstrap popover that passes a Razor value to another JavaScript function called killDatabase when running through a Razor foreach. The code produces a list of buttons that you can select but I also want to be able to hit a button and delete one of the options. The code doesn't throw any errors, and everything works perfectly except the fact that any of the delete buttons will always delete the last element, not the one that it's supposed to be associated with. I'm assuming this is because the function gets called on an onclick and so at that point #str is just the last element's name, but I'm wondering if there's any way to store that value to be unique for each element? I've tried adding a JavaScript variable within the foreach but still ran into the same problem.
<div class="btn-group-vertical btn-block" data-toggle="buttons" id="btns">
#foreach (var str in Model)
{
<div id="popover-content" hidden>
Are you sure you would like to permanently delete this query from the database?<br />
<button onclick="killDatabase('#str')" class="btn btn-primary btn-sm" style="float:left; margin-bottom: 10px;">Yes</button>
<button class="btn btn-sm btn-primary" style="float:left;">No</button>
</div>
<label class="btn btn-default" style="height:auto">
<div class="form-group" style="height:auto; padding-bottom: 10px;">
<input type="radio" name="query" value="#str" />
<span class="pull-left">#str</span>
<span class="pull-right">
<button class="btn btn-sm btn-danger" style="margin-top:-2px;" data-toggle="popover" title="Confirm Deletion" data-placement="bottom">
<span class="glyphicon glyphicon-trash"></span></button></span>
</div>
</label>
}
</div>
So I'm going to close this question because it was me being really confused about AJAX. That's what it boiled down to: I had a bad AJAX call and I was trying to do things on a popover that was initialized after the page was loaded so any time I would try and use the #str value in that popup, it would only take the most recent value. I've reworked the code into a more streamlined, less buggy design, and it works fine now. Thanks to everyone who tried to help

Using blueimp jQuery File Upload

I am trying to implement the blueimp jQuery file uploader by trying to insert the chosen files into a MySQL database through PHP.
I am working with the Basic Plus UI one which you can find here
Here is the form:
<form id="fileupload" action="" method="POST" enctype="multipart/form-data">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
I want to send the form to a page called process.php which processes all the data and uploads the files to a DB table.
I am confused with all the jQuery stuff as it seems the form gets sent to that.
Can you help me with understanding how to send the chosen files to a db through a PHP page that processes it.
I can deal with all the processing I just need to know how to send the form to a PHP page which gets all the chosen files through $_FILES[files].
I have tried setting the action="process.php" but that doesn't do anything when I click the submit button.
You have to specify the location to the upload handler; on the fileupload init code.
HTML
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
JS
$('#fileupload').fileupload({
url: 'server/index.php',
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
// rest of the code snipped
P.S. don't write your own upload handler. Look at their example and see how it's implemented.
Take a look at these:
https://github.com/blueimp/jQuery-File-Upload/blob/master/basic-plus.html
https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/index.php
https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php
#user3574492: Dude. I'm trying to implement the same solution in asp.net environment. and guess what? I'm using a Handler to upload my files and it's not working (Not calling my handler), Unless I rename the Form ID to something except than "fileupload", Which is making upload button call my Handler and files will upload. the only problem which is happening after renaming form ID is that you are not able to see a preview to the files in queue you chose for upload anymore (Let's say the Gridview which is showing your upload queue)... and I think there should be a conflict here with the form ID which is "fileupload".

Categories