I have been learning selenium and Implementing It.I tried uploading files from the bot. During this I came to know the position(upload button content) keeps on changing on each reload. I managed to trace out option for .jpg file but I cannot track .pdf file uploading. Much detail on my code below.
<div _ngcontent-kkx-c10="" class="form-group document-upload" xpath="1">
<div _ngcontent-kkx-c10="" class="document-upload-info">
<span _ngcontent-kkx-c10="" class="document-type">
KYC Form <!----><span _ngcontent-kkx-c10="" style="margin-left:5px;color:red;">* </span>
</span>
</div>
<!----><!---->
<label _ngcontent-kkx-c10="" class="btn btn-outline upload-button" style="border: 1px solid transparent; border-radius: 0.25rem; border-color: #0078D7; color: #0078D7 !important;">
Upload <input _ngcontent-kkx-c10="" hidden="" multiple="" type="file" accept=".pdf">
</label>
<!----><!----><!---->
</div>
<div _ngcontent-kkx-c10="" class="form-group document-upload" xpath="1">
<div _ngcontent-kkx-c10="" class="document-upload-info">
<span _ngcontent-kkx-c10="" class="document-type">
Photo Form <!----><span _ngcontent-kkx-c10="" style="margin-left:5px;color:red;">* </span>
</span>
</div>
<!----><!---->
<label _ngcontent-kkx-c10="" class="btn btn-outline upload-button" style="border: 1px solid transparent; border-radius: 0.25rem; border-color: #0078D7; color: #0078D7 !important;">
Upload <input _ngcontent-kkx-c10="" hidden="" multiple="" type="file" accept=".jpg">
</label>
<!----><!----><!---->
</div>
<div _ngcontent-kkx-c10="" class="form-group document-upload" xpath="1">
<div _ngcontent-kkx-c10="" class="document-upload-info">
<span _ngcontent-kkx-c10="" class="document-type">
Citizenship Form <!----><span _ngcontent-kkx-c10="" style="margin-left:5px;color:red;">* </span>
</span>
</div>
<!----><!---->
<label _ngcontent-kkx-c10="" class="btn btn-outline upload-button" style="border: 1px solid transparent; border-radius: 0.25rem; border-color: #0078D7; color: #0078D7 !important;">
Upload <input _ngcontent-kkx-c10="" hidden="" multiple="" type="file" accept=".pdf">
</label>
<!----><!----><!---->
</div>
I did following way to upload image.
photo_filepath_input_box = driver.find_element_by_xpath("//input[#accept='.jpg']").send_keys(
'/home/daniel/Desktop/website.jpg')
Here during bot loading the above three Forms could appear in any position i.e Kyc form could arrive at the end (third position) or second and similar for rest. So I want to know If I could check condition like if KYC form text is presenet then i need to click the xpath right below it i.e Label Any hint on this ?
Here is second file upload issue.
(+) button click code
WebDriverWait(self.driver,5).until(EC.presence_of_element_located((By.XPATH,"//span[contains(text(),'Citizenship Certificates')]/../..//i[#class='fa fa-plus ' ]"))).click()
second upload citizen ship code.
self.driver.find_element_by_xpath("((//span[contains(text(),'Citizenship Certificates ')]/../..//input[#type='file' and(#accept='.pdf')])[2]").send_keys('/home/navaraj/Desktop/{}'.format(row[75]))
To upload files by Selenium the better approach is to send the file path directly to the input element, not by clicking elements.
Here you have 2 forms containing upload .pdf files inputs and single input for uploading .jpg files.
So, to upload the .pdf file in KYC form you can do this: .
Let's say your file is located on the disk in "C://Downloads//kyc_pdf_file.pdf" you can do this:
kyc_pdf_file_path = "C://Downloads//kyc_pdf_file.pdf"
driver.find_element_by_xpath("//div[.//span[#class='document-type' and (contains(.,'KYC'))]]//input[#type='file' and(#accept='.pdf')]").send_keys(kyc_pdf_file_path)
Uploading file to Citizenship form:
citizenship_pdf_file_path = "C://Downloads//citizenship_pdf_file.pdf"
driver.find_element_by_xpath("//div[.//span[#class='document-type' and (contains(.,'Citizenship'))]]//input[#type='file' and(#accept='.pdf')]").send_keys(citizenship_pdf_file_path)
While uploading ".jpg" will be similarly:
jpg_file_path = "C://Downloads//jpg_file.jpg"
driver.find_element_by_xpath("//input[#type='file' and(#accept='.jpg')]").send_keys(jpg_file_path)
UPD
The XPath for the Citizenship Certificates pdf upload is
//span[contains(text(),'Citizenship Certificates ')]/../..//input[#type='file' and(#accept='.pdf')]
And for the KYC Form is
//span[contains(text(),'KYC Form')]/../..//input[#type='file' and(#accept='.pdf')]
Here is second file upload issue.
(+) button click code
WebDriverWait(self.driver,5).until(EC.presence_of_element_located((By.XPATH,"//span[contains(text(),'Citizenship Certificates')]/../..//i[#class='fa fa-plus ' ]"))).click()
second upload citizen ship code.
self.driver.find_element_by_xpath("((//span[contains(text(),'Citizenship Certificates ')]/../..//input[#type='file' and(#accept='.pdf')])[2]").send_keys('/home/navaraj/Desktop/{}'.format(row[75]))
Related
Okay so I have two input tags with types as buttons.
<div class="buttons-for-trade-or-sell" style="display: flex; position:relative;left: 33px; top:14px">
<div class="button-to-trade">
<input type="button" class="trade-btn" id="button-to-select-trade" name="trade1" value="Trade"></input>
</div>
<div class="button-to-sell">
<input type="button" class="sell-btn" id="button-to-select-sell" name= "trade2" value="Sell"></input>
</div>
My problem is how do I send to the server side code which button is selected. For example, if the trade-btn is selected i want the boolean to be set to true in my view. Then from there I would handle it accordingly. Basically, how do I send which button is selected to the server-side?
Thanks.
There are multiple ways to solve this. One of them is to use pure javascript and embed a hidden form_type in the form which specifies whether the form is trade or sell and assign each button to the function with different input parameter.
<from id="my_form" action="#" method="POST">
{% csrf_token %}
<input id='form_type' name='form_type' value='' class='d-none' style='display: None;'>
<div class="buttons-for-trade-or-sell" style="display: flex; position:relative;left: 33px; top:14px">
<div class="button-to-trade">
<input type="button" onclick="update_value_and_submit('trade');" class="trade-btn" id="button-to-select-trade" name="trade1" value="Trade"></input>
</div>
<div class="button-to-sell">
<input type="button" onclick="update_value_and_submit('sell');" class="sell-btn" id="button-to-select-sell" name= "trade2" value="Sell"></input>
</div>
</form>
<script>
function update_value_and_submit(val){
let ftype = document.getElementById('form_type');
ftype.value = val;
let my_form = document.getElementById('my_form');
my_form.submit();
}
</script>
It is hard to describe my real situation, so I directly lift website:
https://www.w3schools.com/php/php_intro.asp
The elements below is extremely long, you can just scan it quickly. As you open link, you will find every content block will be framed with two line (hr tag)with up and down side, so my purpose is to scrape every block content between two hr tag
(in fact,the difficulty is uncertain amount tags and fickle structure between every two hr tags)
How to achieve it?
<div class="w3-col l10 m12" id="main">
<div id="mainLeaderboard" style="overflow:hidden;">
<!-- MainLeaderboard-->
<!--<pre>main_leaderboard, all: [728,90][970,90][320,50][468,60]</pre>-->
<div id="snhb-main_leaderboard-0" data-google-query-id="CJmd77_F_OMCFUSJwgodAWAIsg"><div id="google_ads_iframe_/22152718/sws-hb//w3schools.com//main_leaderboard_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/22152718/sws-hb//w3schools.com//main_leaderboard_0" title="3rd party ad content" name="google_ads_iframe_/22152718/sws-hb//w3schools.com//main_leaderboard_0" width="468" height="60" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;" data-google-container-id="d" data-load-complete="true"></iframe></div></div>
<!-- adspace leaderboard -->
</div>
<h1>Python <span class="color_h1">Tutorial</span></h1>
<div class="w3-clear nextprev">
<a class="w3-left w3-btn" href="/default.asp">❮ Home</a>
<a class="w3-right w3-btn" href="python_intro.asp">Next ❯</a>
</div>
<div class="w3-panel w3-info intro">
<p>Python is a programming language.</p>
<p>Python can be used on a server to create web applications.</p>
<a class="w3-btn w3-margin-bottom" href="python_intro.asp">Start learning Python now »</a>
</div>
<hr>
<h2>Learning by Examples</h2>
<p>Our "Show Python" tool makes it easy to learn Python, it shows both the
code and the result.</p>
<div class="w3-example">
<h3>Example</h3>
<div class="w3-code notranslate pythonHigh"><span class="pythoncolor" style="color:black">
<span class="pythonkeywordcolor" style="color:mediumblue">print</span>(<span class="pythonstringcolor" style="color:brown">"Hello, World!"</span>)<span class="pythonnumbercolor" style="color:red">
</span> </span></div>
<a target="_blank" class="w3-btn w3-margin-bottom" href="showpython.asp?filename=demo_default">Run example »</a>
</div>
<p><b>Click on the "Run example" button to see how it works.</b></p>
<hr>
<h2>Python File Handling</h2>
<p>In our File Handling section you will learn how to open, read, write, and
delete files.</p>
<p>Python File Handling</p>
<hr>
<h2>Python Database Handling</h2>
<p>In our database section you will learn how to access and work with MySQL and MongoDB databases:</p>
<p>Python MySQL Tutorial</p>
<p>Python MongoDB Tutorial</p>
<hr>
<h2>Python Exercises</h2>
<form autocomplete="off" id="w3-exerciseform" action="exercise.asp?filename=exercise_syntax1" method="post" target="_blank">
<h2>Test Yourself With Exercises</h2>
<div class="exercisewindow">
<h2>Exercise:</h2>
<p>Insert the missing part of the code below to output "Hello World".</p>
<div class="exerciseprecontainer">
<pre><input name="ex1" maxlength="5" style="width: 54px;">("Hello World")
</pre>
</div>
<br>
<button type="submit" class="w3-btn w3-margin-bottom">Submit Answer »</button>
<p><a target="_blank" href="exercise.asp?filename=exercise_syntax1">Start the Exercise</a></p>
</div>
</form>
<hr>
<div id="midcontentadcontainer" style="overflow:auto;text-align:center">
<!-- MidContent -->
<!--<pre>mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]</pre>-->
<div id="snhb-mid_content-0" data-google-query-id="CNqS8r_F_OMCFUSJwgodAWAIsg"><div id="google_ads_iframe_/22152718/sws-hb//w3schools.com//mid_content_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/22152718/sws-hb//w3schools.com//mid_content_0" title="3rd party ad content" name="google_ads_iframe_/22152718/sws-hb//w3schools.com//mid_content_0" width="336" height="280" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;" data-google-container-id="f" data-load-complete="true"></iframe></div></div>
</div>
<hr>
<h2>Python Examples</h2>
<p>Learn by examples! This tutorial supplements all explanations with clarifying examples.</p>
<p>See All Python Examples</p>
<hr>
<h2>Python Quiz</h2>
<p>Learn by taking a quiz! This quiz will give you a signal of how much you know, or do not know, about Python.</p>
<p>Python Quiz</p>
<hr>
<h2>Python Reference</h2>
<p>You will also find complete function and method references:</p>
<p>Reference Overview</p>
<p>Built-in Functions</p>
<p>String Methods</p>
<p>List/Array Methods</p>
<p>Dictionary Methods</p>
<p>Tuple Methods</p>
<p>Set Methods</p>
<p>File Methods</p>
<p>Python Keywords</p>
<hr>
<h2>Download Python</h2>
<p>Download Python from the official Python web site:
<a target="_blank" href="https://python.org/">https://python.org</a></p>
<hr>
<h2>Python Exam - Get Your Diploma!</h2>
<div class="w3-row">
<div class="w3-third w3-container w3-padding-24"><img src="/images/w3certified_logo_250.png" style="max-width:100%;" alt="W3Schools Certification"> </div>
<div class="w3-twothird w3-container"><h2>W3Schools' Online Certification</h2>
<p>The perfect solution for professionals who need to balance work, family, and career building.</p>
<p>More than 25 000 certificates already issued!</p>
</div>
</div>
<p><a class="w3-btn" href="/cert/default.asp">Get Your Certificate »</a></p>
<p style="clear:both;">The HTML Certificate documents your knowledge of HTML.</p>
<p>The CSS Certificate documents your knowledge of advanced CSS.</p>
<p>The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.</p>
<p>The Python Certificate documents your knowledge of Python.</p>
<p>The jQuery Certificate documents your knowledge of jQuery.</p>
<p>The SQL Certificate documents your knowledge of SQL.</p>
<p>The PHP Certificate documents your knowledge of PHP and MySQL.</p>
<p>The XML Certificate documents your knowledge of XML, XML DOM and XSLT.</p>
<p>The Bootstrap Certificate documents your knowledge of the Bootstrap framework.</p>
<div class="w3-clear nextprev">
<a class="w3-left w3-btn" href="/default.asp">❮ Home</a>
<a class="w3-right w3-btn" href="python_intro.asp">Next ❯</a>
</div>
</div>
```**strong text**
I don't know if I get this straight, but if you whant just adjust the content, you can use only css to do this, you can organize your content in "Div Blocks" and set the same class to each one and instead of hr just put a border-bottom like this
#main{ max-width:1170px; margin: 0 auto;}
.bg_block{ width:100%; border-bottom: 1px solid #666; padding: 20px; box-sizing: border-box;}
<div id='main'>
<div class='bg_block'>
<div class="w3-clear nextprev">
<a class="w3-left w3-btn" href="/default.asp">❮ Home</a>
<a class="w3-right w3-btn" href="python_intro.asp">Next ❯</a>
</div>
<div class="w3-panel w3-info intro">
<p>Python is a programming language.</p>
<p>Python can be used on a server to create web applications.</p>
<a class="w3-btn w3-margin-bottom" href="python_intro.asp">Start learning Python now »</a>
</div>
</div><!--bg_block-->
</div><!--main-->
I am very new to python and selenium, but I need to use selenium to automatically upload some files.
There is a button I have to click, and it will pop a window in which I can select a file to upload.
And the HTML for this button is:
<button class="md-button md-default-theme" ng-transclude="" ng-show="excelshow" ng-click="selectFile()" tabindex="0" aria-hidden="false" style=""><span class="ng-scope">
Excel upload
</span><div class="md-ripple-container" style=""></div></button>
I have no idea how to click this button with selenium and upload the selected file.
I have tried to use driver.find_element_by_class_name('md-button md-default-theme') or driver.find_element_by_css_selector, but it doesn't work.
I think maybe I am using the find_elements_by_css_selector in a wrong way.
Thank you for your help!
EDIT:
The more complete content is here:
<md-toolbar style="background-color: white !important" class="md-default-theme">
<div class="md-toolbar-tools">
<span>Manage Menu</span>
<!-- fill up the space between left and right area -->
<span flex=""></span>
<!-- ngIf: isAuth --><div ng-if="isAuth" class="ng-scope">
<input type="file" style="display:none" id="file" name="file" onchange="angular.element(this).scope().upexecl(this)">
<button class="md-button md-default-theme" ng-transclude="" ng-click="DownLoadS()" tabindex="0"><span class="ng-scope">
Download Example
</span></button>
<button class="md-button md-default-theme" ng-transclude="" ng-show="excelshow" ng-click="selectFile()" tabindex="0" aria-hidden="false" style=""><span class="ng-scope">
Excel upload
</span></button>
<button class="md-button md-default-theme" ng-transclude="" ng-show="offering" ng-click="onlineSave()" tabindex="0" aria-hidden="false" style=""><span class="ng-binding ng-scope">
Save online
</span></button>
<button class="md-button md-default-theme ng-hide" ng-transclude="" ng-click="CancelEditSave()" ng-show="editshow" tabindex="0" aria-hidden="true"><span class="ng-binding ng-scope">
Cancel edit
</span></button>
</div><!-- end ngIf: isAuth -->
</div>
</md-toolbar>
Thank you for your help!
md-button md-default-theme is 2 class names: md-button & md-default-theme. .find_element_by_class_name() only takes a single parameter consisting of a single class name, e.g. .find_element_by_class_name("md-button"). That may or may not find the element you want based on whether that class name uniquely locates the element that you want.
Another option would be to use a CSS selector so that you can use all three classes in a single locator, e.g
driver.find_element_by_css_selector('md-button.md-default-theme')
where the . indicates a class name in CSS selector syntax.
Hope it helps :)
<div class="t-window-content t-content" style="overflow: auto; width: 400px; height: 389.4px;">
<div id="frmSchTarget">
<form action="/Search/SearchTypePreName"
method="post" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, onBegin: Function.createDelegate(this, PreNameListWindow), onSuccess: Function.createDelegate(this, Form_OnSuccess) });"><input type="hidden" id="NameList"
name="NameList">
<div style="text-align: left; padding-left: 10px">
<span style="margin-right: 20px;">
<button id="TreeViewButtonCollapse" name="TreeViewButtonCollapse" onclick="ExpandCollapseTreeView('NameListTreeView', false); return false;" title="Collapse All">
<img src="/Content/Images/toggle_up.png">
</button>
<button id="TreeViewButtonExpand" name="TreeViewButtonExpand" onclick="ExpandCollapseTreeView('NameListTreeView', true); return false;" title="Expand All">
<img src="/Content/Images/toggle_down.png">
</button>
</span>
</div>
<div id="divSelectNamesArea" style="height: 325px; overflow: auto;">
"i removed a very large list from here"
</div>
<hr class="PopupLineStyle">
<div style="text-align: left; padding-left: 10px">
<span style="margin-right: 20px;"><input type="checkbox" id="Checkbox1" name="SelectAllPrenamesToggle" onclick="SelectAllOrNoneInTreeView('NameListTreeView', this.checked);">
All / None</span>
<input type="submit" class="t-button" value="Done"
onclick="GetNameListString('NameListTreeView');">
</div>
</form>
</div>
</div>
The above code has basically been the bane of my existence for about a week now. I am trying to run a webscraper and upon submitting a request a div overlay appears on the page. The code snippet above shows how the 'Done' button used to get rid of it is implemented.
In testing I am able to use
buttons = driver.find_elements_by_xpath('//input[contains(#class,"t-button")]')
to find all buttons present and then it is button [5], however once I automate this does not work.
I have also tried an implicit wait with the following xpath:
//*[#id="frmSchTarget"]/form/div[3]/input
This also is a no-go. Please help, I have been trying just about everything an searched through stackoverflow for over a week already. I just can't figure it out.
// wait 15s before click button for debug purpose, in case click button before
// it be rendered out on page
time.sleep(15)
button_done = driver.find_element_by_css_selector("#frmSchTarget input[value='Done']")
button_done.click()
if above code work, remove the time.sleep() and run again, if failed, it means
you need wait some moment before click it, please use explicit wait replace time.sleep()
I'm trying to upload images through Python Selenium, it worked before but now they random generate the ID of button. I've tryed with different css path,xpath to make it working but i don't have any other ideea.
HTML
<div id="ImageUpload" class="form-section" style="position: relative;">
<div class="file-input-wrapper">
<button id="ImageUploadButton" type="button" class="button-update-cancel short file-upload-button ">
Select Images</button>
<input type="hidden" name="file" id="FileUploadInput">
<span class="field-message" data-for="FileUploadInput"></span>
<p class="message"><strong>Get at least twice the number of replies by uploading images</strong><br>Max 10 images. File size can be 15 MB per image with max dimension 6000x4000. For bitmap(.bmp) images, max file size is 4MB.</p>
<p class="file-input-current file-uploading">Uploading...</p>
<ol id="UploadingImages"></ol>
<p class="image-select">Select a "MAIN" image :</p>
<ol id="UploadedImages">
</ol>
</div>
<input type="hidden" name="images">
<div id="flash_19b01203e1o5npfd1nulhk11f293_container" class="moxie-shim moxie-shim-flash" style="position: absolute; top: 5px; left: 0px; width: 99px; height: 21px; overflow: hidden;"><object id="flash_19b01203e1o5npfd1nulhk11f293" type="application/x-shockwave-flash" data="Moxie.cdn.swf" width="100%" height="100%" style="outline:0"><param name="movie" value="Moxie.cdn.swf"><param name="flashvars" value="uid=flash_19b01203e1o5npfd1nulhk11f293&target=moxie.core.EventTarget.instance.dispatchEvent"><param name="wmode" value="transparent"><param name="allowscriptaccess" value="always"></object></div></div>
<object id="flash_19b01203e1o5npfd1nulhk11f293" type="application/x-shockwave-flash" data="Moxie.cdn.swf" width="100%" height="100%" style="outline:0"><param name="movie" value="Moxie.cdn.swf"><param name="flashvars" value="uid=flash_19b01203e1o5npfd1nulhk11f293&target=moxie.core.EventTarget.instance.dispatchEvent"><param name="wmode" value="transparent"><param name="allowscriptaccess" value="always"></object>
And the python code
### IMAGE UPLOAD ###
img_path="C:\\1.jpg"
s = win32com.client.Dispatch('WScript.Shell')
time.sleep(3)
browser.find_element_by_id('#flash_19b01203e1o5npfd1nulhk11f293').click()
time.sleep(2)
s.SendKeys(img_path, 0)
time.sleep(2)
s.SendKeys("{ENTER}", 0)
Any suggestions?
If the id is always changing, look for a different way of identifying the element.
Is the element always the first flash object inside the <div id="ImageUpload" element? If so, try this:
browser.find_element_by_xpath("//div[#id='ImageUpload']//object[#type='application/x-shockwave-flash']").click()