this is my original screenshot.
And this is the screenshot after I have click the on-off area on it.
This is the original html for the on-off area:
<div region="child-0" class="togglebar-item inline-block region region-child-0">
<div data-view-name="anonymous-view-11401" data-render-count="2">
<div class="ftnt-on-off-switch-ct">
<div class="ftnt-on-off-switch inline-block">
<input type="checkbox" id="ftnt-on-off-input--toggle-0" class="" action="action" data-mkey="1325" data-id="toggle-0">
<label for="ftnt-on-off-input--toggle-0"></label>
<div class="slider"></div>
</div>
</div>
</div>
</div>
And this is the html after the on-off area has been clicked.
<div region="child-0" class="togglebar-item inline-block region region-child-0">
<div data-view-name="anonymous-view-11492" data-render-count="2">
<div class="ftnt-on-off-switch-ct">
<div class="ftnt-on-off-switch inline-block">
<input type="checkbox" id="ftnt-on-off-input--toggle-0" class="" action="action" checked="" data-mkey="1325" data-id="toggle-0">
<label for="ftnt-on-off-input--toggle-0"></label>
<div class="slider"></div>
</div>
</div>
</div>
</div>
My question is:
In selenium python, after I click the on/off area, how may I detect the on/off happens ???
I need to add a test case for this, as sometimes even People have click the on-off, it never happens.
Alternately you may use something like this as well . I have tried this approach in java and you can definitely use it in python as well.
String color = element.getCssValue("color");
You can get the color from the style tab in the inspector and check if the color has changed
# if its checked checkboxes
wait.until(EC.presence_of_element_located((By.cssSelector, "input:checked[type='checkbox']")))
# if its not checked checkboxes
wait.until(EC.presence_of_element_located((By.cssSelector, "input:not(:checked)[type='checkbox']")))
Related
I have following html:
<div class=‘content active’>
<div>
<div class=‘var’>
<div class=‘field var-field’>
<label>Interface Name</label>
<div class=‘ui input’>
<input type=‘input’ placeholder=‘.*’ value> ==$0
</div>
</div>
</div>
</div>
<div>
<div class=‘var’>
<div class=‘field var-field’>
<label>Neighbor Id</label>
<div class=‘ui input’>
<input type=‘input’ placeholder=‘.*’ value> ==$0
</div>
</div>
</div>
</div>
</div>
I need to send text to the text box with label: Interface Name.
Is there a way to uniquely write the xpath to send the text to the textbox.
Note that the only way to identify uniquely is wrt the label. The other fields in the tag is same for both.
I tried using AND operator. No luck.
Please help me out here.
Try this :
//label[text()='Interface Name']/following-sibling::div/child::input
To send text to the <input> element with respect to the <label> tag you can create a function as follows :
def test_me(myText):
driver.find_element_by_xpath("//label[.='" + myText + "']//following::div[1]/input").send_keys("hello")
Now, you can call this function from anywhere within your script as follows :
test_me("Interface Name")
# or
test_me("Neighbor Id")
You can use this XPATH :- //*[text()='Interface Name']/following-sibling::div/input"
This is a html code of upload a photo:
<div id="choose-photo" class="controls avatar-settings inline-upload-avatar dropdown center">
<div class="uploader-image uploader-avatar clearfix">
<div class="dropdown-menu">
<div class="dropdown-caret">
<span class="caret-outer"></span>
<span class="caret-inner"></span>
</div>
<ul tabindex="-1" role="menu" aria-hidden="true">
<li id="photo-choose-existing" class="photo-choose-existing upload-photo" role="presentation">
<button type="button" class="dropdown-link" role="menuitem">Prześlij zdjęcie</button>
<div class="photo-selector">
<button class="btn" type="button">
Zmień zdjęcie
</button>
<span class="photo-file-name">Nie wybrano pliku</span>
<div class="image-selector">
<input type="hidden" name="media_file_name" class="file-name">
<input type="hidden" name="media_data_empty" class="file-data">
<label class="t1-label">
<span class="u-hiddenVisually">Dodaj zdjęcie</span>
<input type="file" name="media_empty" class="file-input js-tooltip" tabindex="-1" accept="image/gif,image/jpeg,image/jpg,image/png" data-original-title="Dodaj zdjęcie">
</label>
</div>
</div>
</li>
<li id="photo-choose-webcam" class="u-hidden" role="presentation">
<button type="button" class="dropdown-link">Zrób zdjęcie</button>
</li>
<li id="photo-delete-image" class="u-hidden" role="presentation">
<button type="button" class="dropdown-link" role="menuitem">Usuń</button>
</li>
<li class="dropdown-divider" role="presentation"></li>
<li class="cancel-options" role="presentation">
<button type="button" class="dropdown-link" role="menuitem">Anuluj</button>
</li>
</ul>
</div>
</div>
</div>
I've created a simple method to send text to input (it's not visible on screen):
fileInput = driver.find_element_by_name('media_empty')
fileInput.send_keys(path)
But it doesn't do anything. Also I'm getting not any errors.
So, here's a second method, which may work:
<div class="ProfileAvatarEditing-buttonContainer">
<button class="ProfileAvatarEditing-button u-boxShadowInsetUserColorHover" type="button" tabindex="2">
<div class="ProfileAvatarEditing-addAvatarHelp">
<span class="Icon Icon--cameraPlus"></span>
<p>Dodaj zdjęcie profilowe</p>
</div>
<div class="ProfileAvatarEditing-changeAvatarHelp">
<span class="Icon Icon--camera"></span>
<p>Zmień zdjęcie profilowe</p>
</div>
<div class="ProfileAvatarEditing-dropAvatarHelp">
<span class="Icon Icon--cameraPlus"></span>
<p>Upuść zdięcie profilowe tutaj</p>
</div>
</button>
Here user can drap and drop file. I've found this question: Selenium: Drag and Drop from file system to webdriver? however I still don't know how can I use it in this situation.
So the question is how to send file path to the input to trigger file upload. In this case when you choose a file from file dialog or drag and drop it you'll see confirm window with preview on your photo. So then all what's left to do is to click confirm. But I don't know how to send it in the first place.
Any help will be appreciated.
edit:
I've found a solution (my own answer below):
fileInput = driver.find_element_by_xpath('//*[#id="photo-choose-existing"]/div/div/label/input')
fileInput.send_keys(path)
but there's one more problem: photo is uploaded but file dialog still opens - I don't know how to close it. I tried accesing it:
dialog = driver.switch_to.active_element['value']
but I don't know how to close it.
Strangely enough I found send_keys do indeed work. When I inspected html code in different browser it wasn't "media_empty" anymore, but a different name ("media[]" or something similar). Instead I've used xpath and I was stunned that it actually worked:
fileInput = driver.find_element_by_xpath('//*[#id="photo-choose-existing"]/div/div/label/input')
fileInput.send_keys(path)
try using below code:
fileInput = driver.find_element_by_css_selector("div.image-selector label.t1-label input")
driver.execute_script("arguments[0].setAttribute('value', 'YOUR_PATH_HERE')",fileInput)
Assuming that element is present on page if not explicitly wait for element to exist on page.
then try this:
driver.execute_script("document.getElementById('ID_HERE').setAttribute('value', 'PATH_HERE')");
hope this will help you!
I'm reasonably new to python and I'm trying to check which div class appears first on a page. I've done this with table rows but I can't seem to wrap my head around how to do this with divs.
What I'm trying to determine is whether the latest update is an email sent <div class="EMAIL SENT"> or a notes added <div class="Notes">. The most recent item will appear first from the top, but other actions may have taken place since then, for example, <div class="Updated">
I've not managed to write any code to do this or event get close, but in my head I imagine it to work like this.
for sub_div_classes in browser.find_element_by_class_name('cb'):
classname = ~check name of sub_div_class
if classname = "EMAIL SENT":
class_info = browser.find_element_by_class_name('plus_header_Additional_info').text
print(class_info) ¬output: EMAIL SENT :Email sent on 20-03-2016 00:22:09 by [REDACTED]
trigger_1()
if classname = "Notes":
trigger_2()
~move on to next div class in list
Below is the page code I'm trying to work with. I'd be really appreciative of any advice or assistance anyone can provide.
<div class="cb" style="margin:5px 0 0 0;">
<div class="Updated">
<div class="plus_header_Additional_info">Updated :Incident Updated on 20-03-2016 00:22:52 by User = [REDACTED]
<img src="images/minus.png" style="float:right;">
</div>
<div class="plus_content" style="display: block;" id="contentDivImg2_0">
<div>
Assigned to STRIKE1,
by User = [REDACTED].
</div>
<br>
</div>
</div>
<div class="Updated">
<div class="plus_header_Additional_info">Updated :PEND CLIENT STRIKE - 1 added on 20-03-2016 00:22:36 by [REDACTED].
<img src="images/minus.png" style="float:right;">
</div>
<div class="plus_content" style="display: block;" id="contentDivImg2_1">
<div>
</div>
<br>
</div>
</div>
<div class="EMAIL SENT">
<div class="plus_header_Additional_info">EMAIL SENT :Email sent on 20-03-2016 00:22:09 by [REDACTED]
<img src="images/minus.png" style="float:right;">
</div>
<div class="plus_content" style="display: block;" id="contentDivImg2_2">
<div>
To :- [NAME]#[DOMAIN].CO.UK Subject: Ticket - [IN-000999999] Description : Dear User,
[REDACTED]
</div>
<br>
</div>
</div>
<div class="Updated">
<div class="plus_header_Additional_info">Updated :Incident Updated on 12-03-2016 10:56:15 by User = [REDACTED]
<img src="images/minus.png" style="float:right;">
</div>
<div class="plus_content" style="display: block;" id="contentDivImg2_3">
<div>
Status:- PROGRESSING changed to PEND CLIENT,
Assigned to SOFTWARE DEPLOYED,
by User = [REDACTED].
</div>
<br>
</div>
</div>
<div class="Notes">
<div class="plus_header_Additional_info">Notes :Notes Added on 12-03-2016 10:55:53 by [REDACTED].
<img src="images/minus.png" style="float:right;">
</div>
<div class="plus_content" style="display: block;" id="contentDivImg2_4">
<div>
<textarea id="notes4" name="notes1" cols="" class="emailForm_input1" style="width: 97%; overflow: hidden; word-wrap: break-word; resize: horizontal; height: 237px;" readonly="readonly">Hello,
[REDACTED]
</textarea>
</div>
<br>
</div>
</div>
</div>
Use an or with an xpath:
.xpath("//div[#class='Notes' or #class='EMAIL SENT']")[0]
If Notes comes first you will get Notes and vice versa.
If we change a bit of your html snippet like below, adding some text to <div class="EMAIL SENT">in email and changing a later tag class to <div class="Notes">in notes:
We can see using lxml how it works:
In [13]: from lxml.etree import fromstring, HTMLParser
In [14]: xml = fromstring(html, HTMLParser())
In [15]: xml.xpath("//div[#class='Notes' or #class='EMAIL SENT']")
Out[15]: [<Element div at 0x7f96598d4ea8>, <Element div at 0x7f96598d4ef0>]
In [16]: xml.xpath("//div[#class='Notes' or #class='EMAIL SENT']")[0].text
Out[16]: 'in email\n '
In [17]: xml.xpath("//div[#class='Notes' or #class='EMAIL SENT']")[1].text
Out[17]: 'in notes\n
So with selenium you want to just find the element by xpath.
Just getting started with selenium, this is the HTML of the page:
<div id="signInForm">
<form action="/cgi-bin/VmLoginCgi" method="POST" name="signIn1" id="signIn">
<h2 id="loginTitle">Sign in to view and change your settings</h2>
<div class="field formField noHint username clearfix">
<label for="username"></label>
</div>
<div style="position:relative;" class="field formField noHint password clearfix"><label for="password">Settings Password</label><input type="password" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="jgwhnZLOXn" id="password" onkeypress="handleKeyPress(event)"></div>
<div>
Sign In
</div>
</form>
<p>
<span style="font-weight:bold;">Don't know your password?</span><br>You'll find your default password on the bottom of your Super Hub.
</p>
</div>
I'm filling in the text box by doing:
ele = browser.find_element_by_id("password")
ele.send_keys("supersecretpassword")
But can't submit the actual form by executing the javascript. I've tried:
browser.execute_script("SignIn()")
But get a big long error, any pointers?
Submit the form with submit():
ele.submit()
It would find the element's parent form and submit it.
Or, if that's not gonna work in your case, find the Sign In button and click it:
driver.find_element_by_link_text("Sign In").click()
I have a little problem. I am writing an automatic test, that has to go to webpage, enter some keys to search, then go to advanced search options, choose one from a list and search. The point is, that I have absolutely no idea on how to locate element on a list. It looks like this: http://www.e-podroznik.pl/public/searcherFinal.do. If you click on "więcej opcji" you'll se a list of options about journey. My question: how to locate element on this expanded "więcej opcji"-list using python selenium? I have tried everything, from find_element_by* to execute_script; nothing works. I get errors like 'unable to locate element', 'compound not permitted' etc.
The HTML:
<div class="advanced-searcher dNone more-options" style="display: block;">
<label class="lblDepartureArrival"></label>
<label class="lblRadio frmButtonFlat lblDeparture"></label>
<label class="lblRadio frmButtonFlat lblDeparture"></label>
<span class="lblOmmit"></span>
<label class="lblCaptionCarrierType"></label>
<label class="lblCarrierType lblCheckbox frmButtonFlat carrierType-bus"></label>
<label class="lblCarrierType lblCheckbox frmButtonFlat carrierType-rail"></label>
<label class="lblCarrierType lblCheckbox frmButtonFlat carrierType-aut"></label>
<label class="lblCarrierType lblCheckbox frmButtonFlat carrierType-city"></label>
<label class="lblCaptionJourneyMode"></label>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<label class="lblSort">
<span class="fldCaption">
Sortuj według:
</span>
<span class="fldContainer">
<select id="sortTypeV_1399324651976" name="formCompositeSearchingResults.formCompositeSearcherFinalH.sortTypeV" style="display: none;">
<option selected="selected" value="departure"></option>
<option value="time"></option>
<option value="price"></option>
</select>
<span class="frmDropdown"></span>
</span>
</label>
<a class="lnkSwitchSearcherType" title="Wyszukiwarka zaawansowana" href="/public/searcher.do?method=task&advanced=false"></a>
</div>
I specifically need to expand list:
"<select id="sortTypeV_1399324651976" name="formCompositeSearchingResults.formCompositeSearcherFinalH.sortTypeV" style="display: none;">" and then click "<option value="time"></option>
This doesn't work:
def do_the_advanced_search(self):
self.driver.find_element_by_xpath('//*[#id="frm_1399323992507"]/fieldset/div/div[2]/label[3]').click()
time.sleep(3)
neither this:
self.driver.execute_script("document.getElementById('sortTypeV_1399324651976').style=='display: inline block';")
Thanks for any help.
To expand the part that contains the dropdown, you can use this:
self.driver.find_element_by_css_selector("a>span.imageSprite.sprite-label-left").click()
Then you can use execute_script to set the value:
self.driver.execute_script("document.getElementsByClassName('current').value = 'Najkrótszy czas';")
The select itself is hidden via style=display:none; so it cannot be manipulated directly.