I am trying to upload a file using selenium web driver in c#.
I am trying this:
WebDriver.FindElement(By.Name("upload")).SendKeys("C:\Users\test\Desktop\test.cs");
but this is not working.
This is working properly in selenium IDE but not in selenium webdriver.
Following is the HTML code of the page:
where I am trying to use following element:
<input class="js-attach-file" type="file" tabindex="-1" name="upload">
<!DOCTYPE html>
<html lang="en">
<head>
<body class="page-index firefox firefox-9 windows extra-large-window full-content window-up">
<div id="nocss">
<div id="surface" class="clearfix" style="height: 725px;">
<div class="window-overlay">
<div class="window" style="left: 375px; top: 50px; display: block;">
<div class="window-wrapper clearfix">
<div>
<div class="window-header-utils">
<div class="window-header clearfix">
<div class="window-main-col">
<div class="window-sidebar">
<div class="window-module card-label-list clearfix hide">
<div class="window-module clearfix">
<div class="window-module clearfix attachments">
<h3>Attachments</h3>
<ul class="attachment-list hide"></ul>
<p class="no-attachments empty">No attachments.</p>
<div class="uploader touch-hide">
<form class="realfile" enctype="multipart/form-data" method="post" action="/api/card/4f701c9daf1765861a15545c">
<input type="hidden" value="" name="token">
<input type="hidden" value="attachFile" name="method">
<input type="hidden" value="http" name="format">
<input class="js-attach-file" type="file" tabindex="-1" name="upload">
</form>
<a class="button-link highlight-icon fakefile js-fakefile">
</div>
<p class="error js-file-too-large" style="display:none; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-weight: bold; margin: 8px 0 0; padding: 6px; background: #e3e3e3; ">File too large. 10mb limit.</p>
</div>
<div class="window-module other-actions clearfix">
<div class="window-module quiet-actions clearfix">
</div>
</div>
</div>
</div>
</div>
<div class="pop-over clearfix fancy-scrollbar" style="display: none;">
<script>
<script src="https://d2k1ftgv7pobq7.cloudfront.net/js/78dcaf5810779a263fe6939fc4895487/all.js">
</body>
</html>
You can find solution in below link.
You can solve it by using javascript
String script = "document.getElementById('fileName').value='" +"C:\\\\temp\\\\file.txt" + "';";
((IJavascriptExecutor)driver).executeScript(script);
Webdriver: File Upload
selenium is not able to identify or recognize the element whose attribute is type file.
Like example
<input type="file" id="id1" name="abc"></input>
so, to handle this situation we have to use third party tool like Point Position to compute x & Y coordinate of browse button.
then we can use either Low level mouse click handle in c# or we have to Use Autoit V3 tool to handle window popup.
You can find more in detail with full explanation and Practical example on my blog: http://avinashpandeblogsonseleniumautomation.blogspot.in/2015/06/upload-file-using-selenium-web-driver.html
If you are using Firefox browser instead of Send keys use type.
And If the browser is IE then u have to use tool like Autoit Or Selenium 2 contains a method attach_file or use this
sel.attach_file("css=input[type=file]", "http://url.com/file.txt")
Related
I am working on a web page in Asp.net Core MVC (dotnet 2.2) with authentication, and I want to replace Bootstrap with SemanticUI. I managed to do it on everything but Identity.
Or is there a way to build in user management but with custom written sites? (with Identity pages disabled).
I have changed layout for Identity, but there are still some bootstrap things and I dont know where are they from.
Page source:
<div class="row"> <!--Why is this here?-->
<div class="col-md-3"> <!--Why is this here?-->
<div class="ui grid">
<div class="four wide column">
<div class="ui vertical tabular menu">
<a class="item teal active" id="profile" href="/Identity/Account/Manage">Profile</a>
<a class="item" id="change-password" href="/Identity/Account/Manage/ChangePassword">Password</a>
<a class="item" id="two-factor" href="/Identity/Account/Manage/TwoFactorAuthentication">Two-factor authentication</a>
<a class="item" id="personal-data" href="/Identity/Account/Manage/PersonalData">Personal data</a>¨
</div>
</div>
</div>
Layout that is set in Identity:
<html>
<head>
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.7.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.7.6/dist/semantic.min.js"></script>
<title>Title</title>
<link rel="stylesheet" href="~/style.css">
</head>
<body>
<div class="ui inverted header">
<div class="ui inverted stackable menu">
<div class="ui container">
<div class="item">
<img src="~/spacex2.png" style="width: 15em">
</div>
<a class="item" asp-controller="Home" asp-action="Index">Domů</a>
<a class="item">Projekty</a>
<partial name="_LoginPartial" />
</div>
</div>
<div class="ui container">
<partial name="_CookieConsentPartial" />
#RenderBody()
</div>
<div class="ui inverted vertical footer segment" id="footer">
<div class="ui container">
<div class="ui stackable inverted divided equal height stackable grid">
<div class="three wide column">
<h4 class="ui inverted header">About</h4>
<div class="ui inverted link list">
Sitemap
Contact Us
Religious Ceremonies
Gazebo Plans
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">Services</h4>
<div class="ui inverted link list">
Banana Pre-Order
DNA FAQ
How To Access
Favorite X-Men
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header">Footer Header</h4>
<p>Extra space for a call to action inside the footer that could help re-engage users.</p>
</div>
</div>
</div>
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
Using VS 2017, bootstrap 4.1.1 for an MVC 5 page I am trying to add right side padding to an image as shown below but when I do the circle of the image is warped. If I take the padding off the circle is fine but then the text is too close to the circle on the right side:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<br />
<figure>
<style>
.imgRightPadding20 {
padding-right: 20px;
}
</style>
<img class="img-fluid float-left rounded-circle imgRightPadding20" src="https://picsum.photos/200" alt="PersonName" />
<p> Some text about this person. </p>
</figure>
</div>
</div>
The image is a normal square image. I'd like to use the rounded-circle bootstrap feature but the circle gets warped when I add padding to the right side of the image. I need padding because text will flow on the right side of the image. How can I add padding to the right side of the image in a circle without getting the circle warped when using Bootstrap 4.1.1. Thanks in advance.
========== UPDATE July 5, 2018
For reference, below is what is in the _Layout.cshtml file of my MVC 5 project. If I adopt the proposed tag changes at the top of the original code then I guess I need to add that to the _Layout.cshtml file? Or are those changes added at the top only for those pages that have the discussed problem? I'm somewhat confused.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - some person Website</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body style="padding-top:unset; padding-bottom:unset">
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<div class="container">
Some Person
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="Index">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/Home/About">About</a></li>
<!-- <li class="nav-item"><a class="nav-link" href="/Home/Contact">Contact</a></li>li>-->
</ul><!-- navbar-nav -->
</div><!-- container -->
</nav>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - ASP.NET MVC 5 web application built by some person</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
========== UPDATE July 7, 2018 11:30pm
Here is a picture of the bootstrap Nuget package I installed on my VS 2017 project:
========= UPDATE July 7, 2018 12:27 a.m.
The only solution I could use was to enclose the img tag with a div tag and apply the float-left and padding to the div tag not the img tag. All the other parts which come with VS 2017 are fine so I do not need the added script statements at the top of the MVC 5 nor the css link line at the top as well.
<div class="row">
<div class="col-sm-12">
<figure>
<style>
.imgRightPadding20 {
padding-right: 20px;
}
</style>
<div class="float-left imgRightPadding20">
<img class="img-fluid rounded-circle" src="~/Content/Images/someperson-200x200.jpg" alt="some person" />
</div>
<p>Some text about the person </p>
</figure>
</div>
</div>
Use d-flex class on figure tag, and add margin using mr-4 class (instead of padding on image).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<br />
<figure class="d-flex">
<img class="img-fluid rounded-circle mr-4" src="https://picsum.photos/200" alt="PersonName" />
<p> Some text about this person. </p>
</figure>
</div>
</div>
</div>
OR
If you still want to use float , then just change padding-right: 20px to margin-right: 20px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<br />
<figure>
<style>
.imgRightPadding20 {
margin-right: 20px;
}
</style>
<img class="img-fluid float-left rounded-circle imgRightPadding20" src="https://picsum.photos/200" alt="PersonName" />
<p> Some text about this person. </p>
</figure>
</div>
</div>
The only solution I could use was to enclose the img tag with a div tag and apply the float-left and padding to the div tag not the img tag. All the other parts which come with VS 2017 are fine so I do not need the added script statements at the top of the MVC 5 nor the css link line at the top as well. The _Layout.cshtml file also remains unchanged. Below is all that was needed:
<div class="row">
<div class="col-sm-12">
<figure>
<style>
.imgRightPadding20 {
padding-right: 20px;
}
</style>
<div class="float-left imgRightPadding20">
<img class="img-fluid rounded-circle" src="~/Content/Images/someperson-200x200.jpg" alt="some person" />
</div>
<p>Some text about the person </p>
</figure>
</div>
</div>
In my MVC project I applied bootstrap classes to the html input controls but it is not working, before that I used html helper #Html.Editorfor but experiencing the same issue. My code:
HTML:
<div class="container">
<div class="row">
<form action="~/EditProfile/PersonalEdit" method="post" enctype="multipart/form-data">
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<input type="text" id="fname" name="fname" placeholder="First Name" class="form-control" />
</div>
</div>
</form>
</div>
HTML helper:
#Html.EditorFor(model=>model.FirstName,new {#class="form-control"})
How can I apply Bootstrap classes and make it responsive?
double check and make sure you are linking to bootstrap properly.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
View the source of this page and check if bootstrap.css is available on the page. Also check in chrome developer tools network tab for the path to css and js files. I should not be returning 404 error.
I got very simple html page which looks like this:
(index.html):
<html>
<head>
<title>Test</title>
</head>
<body bgcolor="white" text="black">
<center><h1>Test</h1></center>
A
<div class="masterWrapper">
<div class="headerWrapper">
<div class="headerLogo">
</div>
</div>
<div class="clear">
</div>
<div class="sliderWrapper">
</div>
<div class="clear">
</div>
<div class="contentWrapper">
<div class="rightColumn">
<h2>
Test <strong class="green">|</strong><strong>Test2</strong>?</h2>
</div>
</div>
</div>
</body>
</html>
and almost the same subpage:
(a.html):
<html>
<head>
<title>Test2</title>
</head>
<body bgcolor="white" text="black">
<center><h1>Test2</h1></center>
<div class="masterWrapper">
<div class="headerWrapper">
<div class="headerLogo">
</div>
</div>
<div class="clear">
</div>
<div class="sliderWrapper">
</div>
<div class="clear">
</div>
<div class="contentWrapper">
<div class="rightColumn">
<h2>
Test <strong class="green">|</strong><strong>Test2</strong>?</h2>
</div>
</div>
</div>
</body>
</html>
the only difference here is the lack of A in the second page.
I scrape the above (using Abot) and now the weird thing happens, I'm trying to select ALL h2 tags for current page by XPath, like this:
page.HtmlDocument.DocumentNode.SelectNodes("//h2");
If I use the above on "index.html" - it works fine, but if I use the same line to get nodes from "a.html" - it returns NULL. I also tried SelectNodes("h2"), SelectNodes("/h2"), SelectNodes(".//h2") and SelectNodes("./h2") but all return NULL. Inner html return by Abot is the same for both pages (minus the link I mentioned above).
If I use linq instead of XPath, like this:
page.HtmlDocument.DocumentNode.DescendantNodes().Where(x => x.Name == tagNameMinusAttribute)
it returns correct values on both pages - why doesn't it work with XPath? Is this some bug in HtmlAgilityPack, or is my XPath syntax wrong?
Thanks in advance.
Best regards.
I am using Jasny Bootstrap file upload control in my asp.net project.
It looks really good, but im unable to send the attached file to the server (a .ASHX webservice)
My layout code look like this
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span>Remove
</div>
</div>
The HTML contains an <input type="file" />. You need to set the name attribute of the input element. Also make sure that you're using enctype="multipart/form-data" in the form.
<form action="myscript.ashx" method="post" enctype="multipart/form-data">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div>
<span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" name="myupload"/></span>
Remove
</div>
</div>
</form>