I'm working on knockout based site using selenium web driver + c# to automate. My test methods fail because of elements not found / not able to click as the site is slow / or the binding/ rendering of html is slow after the ajax calls are finished.
Below is sample code I used to know the ajax calls have finished and I can proceed to search elements.
public static void waitForAjax(IWebDriver driver, String action)
{
try
{
TimeSpan tp = TimeSpan.FromSeconds(1000);
driver.Manage().Timeouts().SetScriptTimeout(tp);
((IJavaScriptExecutor)driver).ExecuteAsyncScript(
"var callback = arguments[arguments.length - 1];" +
"var xhr = new XMLHttpRequest();" +
"xhr.open('GET', '/" + action + "', true);" +
"xhr.onreadystatechange = function() {" +
" if (xhr.readyState == 4 && xhr.status == 200) {" +
" callback(xhr.responseText);" +
" }" +
"};" +
"xhr.send();");
}
catch { }
}
I am calling the above method before going to find the elements.
Test Method
try
{
IWebDriver _Driver;
IWebElement ele;
FirefoxDriverService _Service = FirefoxDriverService.CreateDefaultService(#"D:\CodePlex_C#\SeleniumTestWithHtml\SeleniumTestWithHtml\Drivers");
_Driver = new FirefoxDriver(_Service);
_Driver.Navigate().GoToUrl("HomepageURl");
System.Threading.Thread.Sleep(2000);
waitForAjax(_Driver,"Call1");
waitForAjax(_Driver,"Call2");
System.Threading.Thread.Sleep(2000);
ele = _Driver.FindElement(By.LinkText("DASHBOARD"));
ele.Click();
//System.Threading.Thread.Sleep(2000);
waitForAjax(_Driver,"Call1");
waitForAjax(_Driver,"Call2");
waitForAjax(_Driver,"Call3");
waitForAjax(_Driver,"Call4");
System.Threading.Thread.Sleep(2500);
ele = _Driver.FindElement(By.Id("QuickSearchCnt"));
ele.Click();
}
But my Code Fails. I suspect the code to find the calls have finished to execute is not working properly.
I need help in knowing is my approach right? And need help in fixing the issue.
I'm currently working on a small program that gets data from mongoDB and matches it with other data. My program is currently printing out the data, but it needs to add a <asp:button />with an unique ID to it so I can save the data for each product.
Here is my code:
public void showCoolers_Click(object sender, EventArgs e)
{
var items = "";
var connectionString = "mongodb://localhost:27017/";
var mongoClient = new MongoClient(connectionString);
MongoServer server = mongoClient.GetServer();
MongoDatabase database = server.GetDatabase("mydb");
MongoCollection<cpuCoolers> collection = database.GetCollection<cpuCoolers>("cpucoolers");
foreach (cpuCoolers parts in collection.FindAll())
{
String _id = parts._id.ToString();
items = items + "<tr><td>" + parts.Aanbieder + "</td><td> " + parts.Productnaam + "</td><td>" + parts.Socket + "</td><td> " + parts.Geluidsterkte + "</td><td> " + parts.Prijs +"</td><td><asp:Button ID='x' runat='server' Text='Motherboard' CssClass='btn btn-block btn-primary'/></td></tr>";
}
lblProducts.Text = "<table><thead><tr><th>Provider</th><th>Productname</th><th>Socket</th><th>Sound production</th><th>Price</th><th>Add to MyPc!</th></thead>" + items + "</table>";
}
I print my data via changing the content oflblProduct.Text in my aspx file. If I add a asp:button to this it doesn't show up, however a regular Html button does, why is that and is there a way to print out a asp:button's?
You can't render an asp.net button the way you are trying, you would need to use a regular html button as you found out.
The asp:button is something that asp.net interprets while it is building your page; by the time you _Click function is executed, its too late in the page lifecycle to render asp.net controls - so HTML buttons are your only option at that point in the page execution.
Here is an overview of the asp.net page life cycle that might help you understand it better:
http://msdn.microsoft.com/en-us/library/ms178472%28v=vs.100%29.aspx
Is there any way to check file size before uploading it using JavaScript?
Yes, you can use the File API for this.
Here's a complete example (see comments):
document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
// (Can't use `typeof FileReader === "function"` because apparently it
// comes back as "object" on some browsers. So just see if it's there
// at all.)
if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal
console.log("The file API isn't supported on this browser yet.");
return;
}
var input = document.getElementById('fileinput');
if (!input.files) { // This is VERY unlikely, browser support is near-universal
console.error("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
addPara("Please select a file before clicking 'Load'");
} else {
var file = input.files[0];
addPara("File " + file.name + " is " + file.size + " bytes in size");
}
});
function addPara(text) {
var p = document.createElement("p");
p.textContent = text;
document.body.appendChild(p);
}
body {
font-family: sans-serif;
}
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load'>
</form>
Slightly off-topic, but: Note that client-side validation is no substitute for server-side validation. Client-side validation is purely to make it possible to provide a nicer user experience. For instance, if you don't allow uploading a file more than 5MB, you could use client-side validation to check that the file the user has chosen isn't more than 5MB in size and give them a nice friendly message if it is (so they don't spend all that time uploading only to get the result thrown away at the server), but you must also enforce that limit at the server, as all client-side limits (and other validations) can be circumvented.
Using jquery:
$('#image-file').on('change', function() {
console.log('This file size is: ' + this.files[0].size / 1024 / 1024 + "MiB");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="upload" enctype="multipart/form-data" method="post">
Upload image:
<input id="image-file" type="file" name="file" />
<input type="submit" value="Upload" />
</form>
Works for Dynamic and Static File Element
Javascript Only Solution
function validateSize(input) {
const fileSize = input.files[0].size / 1024 / 1024; // in MiB
if (fileSize > 2) {
alert('File size exceeds 2 MiB');
// $(file).val(''); //for clearing with Jquery
} else {
// Proceed further
}
}
<input onchange="validateSize(this)" type="file">
It's pretty simple.
const oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>
if (oFile.size > 2097152) // 2 MiB for bytes.
{
alert("File size must under 2MiB!");
return;
}
No Yes, using the File API in newer browsers. See TJ's answer for details.
If you need to support older browsers as well, you will have to use a Flash-based uploader like SWFUpload or Uploadify to do this.
The SWFUpload Features Demo shows how the file_size_limit setting works.
Note that this (obviously) needs Flash, plus the way it works is a bit different from normal upload forms.
If you're using jQuery Validation, you could write something like this:
$.validator.addMethod(
"maxfilesize",
function (value, element) {
if (this.optional(element) || ! element.files || ! element.files[0]) {
return true;
} else {
return element.files[0].size <= 1024 * 1024 * 2;
}
},
'The file size can not exceed 2MiB.'
);
I made something like that:
$('#image-file').on('change', function() {
var numb = $(this)[0].files[0].size / 1024 / 1024;
numb = numb.toFixed(2);
if (numb > 2) {
alert('to big, maximum is 2MiB. You file size is: ' + numb + ' MiB');
} else {
alert('it okey, your file has ' + numb + 'MiB')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">
Even though the question is answered, I wanted to post my answer. Might come handy to future viewers.You can use it like in the following code.
document.getElementById("fileinput").addEventListener("change",function(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
alert("Got the file\n" +
"name: " + f.name + "\n" +
"type: " + f.type + "\n" +
"size: " + f.size + " bytes\n" +
"starts with: " + contents.substr(1, contents.indexOf("\n"))
);
if (f.size > 5242880) {
alert('File size Greater then 5MiB!');
}
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
})
<input type="file" id="fileinput" />
I use one main Javascript function that I had found at Mozilla Developer Network site https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications, along with another function with AJAX and changed according to my needs. It receives a document element id regarding the place in my html code where I want to write the file size.
<Javascript>
function updateSize(elementId) {
var nBytes = 0,
oFiles = document.getElementById(elementId).files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
}
return sOutput;
}
</Javascript>
<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>
<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>
Cheers
JQuery example provided in this thread was extremely outdated, and google wasn't helpful at all so here is my revision:
<script type="text/javascript">
$('#image-file').on('change', function() {
console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
});
</script>
I ran across this question, and the one line of code I needed was hiding in big blocks of code.
Short answer: this.files[0].size
By the way, no JQuery needed.
You can try this fineuploader
It works fine under IE6(and above), Chrome or Firefox
I use this script to validate file type and size
var _validFilejpeg = [".jpeg", ".jpg", ".bmp", ".pdf"];
function validateForSize(oInput, minSize, maxSizejpeg) {
//if there is a need of specifying any other type, just add that particular type in var _validFilejpeg
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFilejpeg.length; j++) {
var sCurExtension = _validFilejpeg[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length)
.toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, this file is invalid, allowed extension is: " + _validFilejpeg.join(", "));
oInput.value = "";
return false;
}
}
}
fileSizeValidatejpeg(oInput, minSize, maxSizejpeg);
}
function fileSizeValidatejpeg(fdata, minSize, maxSizejpeg) {
if (fdata.files && fdata.files[0]) {
var fsize = fdata.files[0].size /1024; //The files property of an input element returns a FileList. fdata is an input element,fdata.files[0] returns a File object at the index 0.
//alert(fsize)
if (fsize > maxSizejpeg || fsize < minSize) {
alert('This file size is: ' + fsize.toFixed(2) +
"KB. Files should be in " + (minSize) + " to " + (maxSizejpeg) + " KB ");
fdata.value = ""; //so that the file name is not displayed on the side of the choose file button
return false;
} else {
console.log("");
}
}
}
<input type="file" onchange="validateForSize(this,10,5000);" >
If you set the Ie 'Document Mode' to 'Standards' you can use the simple javascript 'size' method to get the uploaded file's size.
Set the Ie 'Document Mode' to 'Standards':
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Than, use the 'size' javascript method to get the uploaded file's size:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>
It works for me.
Simple way is
const myFile = document.getElementById("fileUpload").files[0];
if (myFIle.size > 2097152) // 2 MiB for bytes.
{
alert("File size must under 2MiB!");
return;
}
I have a web project where clicking a button navigates to another page. The new page can be 1 of three possible pages depending on data in the server. (The url may be the same for 2 of those pages)
I have three classes representing expected elements on each page using the PageObject model.
What is the best way to actually find what page actually got loaded? Is there an OR type of wait that I can wait on three unique elements and get the one that actually got loaded?
Yes, it is possible to check the presence of unique element (which identifies the page) and then return respective page in the framework.
However, a test should know the page it is expecting next and should assume that the correct page has loaded and perform further actions/assertions. You can even put an assertion here to verify correct page has loaded. If a different page has loaded, then the test eventually fails as assertions would fail.
This way test becomes more readable and describes flow of application.
Also, setting up test data upfront for the tests, is always advisable. This way you would know what data is available on server and test would know which page would render.
I had a similar issue where I needed to detect if a login was for a new user (the login page then goes to a terms & conditions page rather than direct to the home page).
Initially I just waited and then tested the second page but this was just a pain so I came up with this.
To Test the result with this:
var whichScreen = waitForEitherElementText(By.CssSelector(HeaderCssUsing), "HOME SCREEN", "home", terms.getHeaderLocator(), terms.headerText, "terms", driver, MAX_STALE_RETRIES);
if(whichScreen.Item1 && whichScreen.Item2 == "terms")
{
terms.aggreeToTerms();
}
The method that this calls is :
protected Tuple<bool, string> waitForEitherElementText(By locator1, string expectedText1, string return1Ident,
By locator2, string expectedText2, string return2Ident, IWebDriver driver, int retries)
{
var retryCount = 0;
string returnText = "";
WebDriverWait explicitWait = new WebDriverWait(driver, TimeSpan.FromSeconds(globalWaitTime));
driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(0.5));
while (retryCount < retries)
{
try
{
explicitWait.Until<bool>((d) =>
{
try
{
if (Equals(d.FindElement(locator1).Text, expectedText1)) { returnText = return1Ident; };
}
catch (NoSuchElementException)
{
if (Equals(d.FindElement(locator2).Text, expectedText2)) { returnText = return2Ident; };
}
return (returnText != "");
});
return Tuple.Create(true, returnText);
}
catch (StaleElementReferenceException e)
{
Console.Out.WriteLine(DateTime.UtcNow.ToLocalTime().ToString() +
":>>> -" + locator1.ToString() + " OR " + locator2.ToString() + "- <<< - " +
this.GetType().FullName + "." + System.Reflection.MethodBase.GetCurrentMethod().Name +
" : " + e.Message);
retryCount++;
}
}
return Tuple.Create(false,"");
}
The explicit wait until uses a boolean so will loop around for the full wait time (I have a very slow Test server so I set this to 60 seconds). the implicit wait is set to half a second so the element tests will attempt every half a second and loop around until either true is returned or it fails.
I use a Tuple so that I can detect which screen I am on, and in this case agree to the terms & conditions which then sets me back on my normal page path
I'm writing a C# app using the WebBrowser control, and I want all content I display to come from embedded resources - not static local files, and not remote files.
Setting the initial text of the control to an embedded HTML file works great with this code inspired by this post:
browser.DocumentText=loadResourceText("myapp.index.html");
private string loadResourceText(string name)
{
Assembly assembly = Assembly.GetExecutingAssembly();
Stream stream = assembly.GetManifestResourceStream(name);
StreamReader streamReader = new StreamReader(stream);
String myText = streamReader.ReadToEnd();
return myText;
}
As good as that is, files referred to in the HTML - javascript, images like <img src="whatever.png"/> etc, don't work. I found similar questions here and here, but neither is asking exactly what I mean, namely referring to embedded resources in the exe, not files.
I tried res://... and using a <base href='..." but neither seemed to work (though I may have not got it right).
Perhaps (following my own suggestion on this question), using a little embedded C# webserver is the only way... but I would have thought there is some trick to get this going?
Thanks!
I can see three ways to get this going:
1: write the files you need to flat files in the temp area, navigate the WebBrowser to the html file, and delete them once the page has loaded
2: as you say, an embedded web-server - herhaps HttpListener - but note that this uses HTTP.SYS, and so requires admin priveleges (or you need to pre-open the port)
3: like 1, but using named-pipe server to avoid writing a file
I have to say, the first is a lot simpler and requires zero configuration.
/// Hi try this may help u.
private string CheckImages(ExtendedWebBrowser browser)
{
StringBuilder builderHTML = new StringBuilder(browser.Document.Body.Parent.OuterHtml);
ProcessURLS(browser, builderHTML, "img", "src");
ProcessURLS(browser, builderHTML, "link", "href");
// ext...
return builderHTML.ToString();
}
private static void ProcessURLS(ExtendedWebBrowser browser, StringBuilder builderHTML, string strLink, string strHref)
{
for (int k = 0; k < browser.Document.Body.Parent.GetElementsByTagName(strLink).Count; k++)
{
string strURL = browser.Document.Body.Parent.GetElementsByTagName(strLink)[k].GetAttribute(strHref);
string strOuterHTML = browser.Document.Body.Parent.GetElementsByTagName(strLink)[k].OuterHtml;
string[] strlist = strOuterHTML.Split(new string[] { " " }, StringSplitOptions.None);
StringBuilder builder = new StringBuilder();
for (int p = 0; p < strlist.Length; p++)
{
if (strlist[p].StartsWith(strHref))
builder.Append (strlist[p].Contains("http")? strlist[p] + " ":
(strURL.StartsWith("http") ? strHref + "=" + strURL + " ":
strHref + "= " + "http://xyz.com" + strURL + " " ));
else
builder.Append(strlist[p] + " ");
}
builderHTML.Replace(strOuterHTML, builder.ToString());
}
}