I am new to selenium and I am having trouble to write an xpath selector for this dropdown element:
<li style="" class="dropdown open" data-bind="visible: currentServers().length > 0">
<a id="employeeList" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true" data-bind="text: currentServerName()">employee servers</a>
<ul role="menu" class="dropdown-menu">
I have tried various xpath and it was not able to click on the dropdown.
Can any one help me with the xpath? I have used xpath with id , class, cssselector . But none of them worked.
If the root issue is the li element changes its class when opened - as stated in the comments, then the solution would be not to go after an exact match in it, but rather containing the looked for string. I.e.:
//li[contains(#class, "dropdown")]
Prepend/append any other elements as needed (e.g. an a element beneath it, if it is the one to relieve the click, etc)
Try to do this way.
Explanation: Your html inside the li tag, so start your xpath with li tag and then move ahead with a tag along with text method.
//li/a[contains(text(), 'employee servers')]
Related
Hello I am new to selenium and trying to find an element on a dropdown that expands to a list. The xpath constantly changes so cannot use it. Also tried the full xpath and did not work either. Other drop downs that I have used I have been able to use the cssselector but really do not have much to work with in here. I have tried with 'Account Maintenance' text but it did not work or did not do it properly. If I need to provide any additional information or more html please let me know.
<li class="k-item" role="treeitem" data-uid="706aa3e9-cd95-45c3-9ad0-e990887f9484" aria- selected="true" aria-expanded="false">
<div class="k-mid">
<span class="k-icon k-i-expand">
::before
</span>
<span class="k-in k-state-selected">Account Maintenance</span>
</div>
<ul "THIS IS THE LIST THAT EXPANDS AFTER CLICKING ON THE 'Acount Maintenance' text above but not my issue </ul>
</li>
How can i select settings from this dropdown list.
I tried Click Element by(class/id..) but none of them work for me.
First i have to click on the profile icon, then choose the settings element
here is the html code of the icon :
<li class="dropdown userMenu hidden-sm hidden-xs" id="y7">
<a data-toggle="dropdown" class="dropdown-toggle pad10-top no-padding-left no-padding-right center" href="javascript:void(0)" id="yu">
<span class="ellipsis-menu no-margin pad5-bottom" data-toggle="tooltip" data-placement="bottom" title="Profile" id="yui_3_">
<i aria-hidden="true" class=" icon-user_icon pad5-right" id="y"></i>
</span>
<b class="caret"></b>
</a>
and here is the element of the list that i want to select :
<li id="y8">
<a id="settings" href="/cc/settings.html"><i class=""></i>Settings</a></li>
Any help please?
This should work.
Assuming that the list line element is of profile icon (It was unclear to me from the HTML you pasted, but you may better figure out on your application by inspecting it).
If needed be, you may apply a Sleep of 1-2 sec in between the two lines
Click Element xpath: //*[#title='Profile']
Click Element id: settings
P.S. I am assuming that you have imported all the required libraries for this (in fact, it is only SeleniumLibrary that is required for these two lines)
The dropdown HTML on the header looks like this, usually I can manage if there's id on list, but there are none
<li class="nav-item dropdown pt-1">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Add Data</a>
<div class="dropdown-menu text-center">
<a class="dropdown-item" href="<?=site_url()?>buku/create">Book</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="<?= base_url(); ?>pelanggan/create">User</a>
I tried using:
await driver.wait(until.elementLocated(By.xpath("//a[contains(text(),'Add Data')]")),5000).click();
currDate=new Date();
console.log(`${timeStart.getHours()}:${timeStart.getMinutes()}:${timeStart.getSeconds()} - Data added`);
But as I expected, it only clicked on the text, not the dropdown itself
You try click on the dropdown list itself instead of drop down item.Once the drop down list opens then only you can use Search by Text and click on the drop down items.
in this case i would suggest to use below xpath:
await driver.wait(until.elementLocated(By.xpath("//a[contains(text(),'Add Data')]/parent::li")),5000).click();
or
using css :
await driver.wait(until.elementLocated(By.cssSelector("li.nav-item.dropdown.pt-1")),5000).click();
if that also does not work you can dynamically change dropdown attribute using javascriptExecuter
document.querySelector('li.nav-item.dropdown.pt-1>a.nav-link.dropdown-toggle').setAttribute("aria-expanded", "true")
this will expand the drop down list by default. you don't have to click on the dropdown box.Then easily you can select elements from dropdown list.
it would be nice if you could provide the website url . if not hope this will give some sense how to handle this.
I have a < ul > with unknown number of < li > elements. Each < li > has some text and also a button. How can I identify which < li > contains the text I'm looking for, in order to click the button in that same < li >?
<ul>
<li class="ot-queryitem row-fluid">
<div class="ot-queryitem__info ot-queryitem__info--left span7">
<span class="ot-queryitem__name">Äänikysely (Voice Activity and Participation Profile)</span>
</div>
<div class="ot-queryitem__info ot-queryitem__info--center span3"></div>
<div class="ot-queryitem__info ot-queryitem__info--right span2">
<button class="ot-button ot-button--undefined pull-right ot-queryitem__button">
<i class="icon-pencil fa ot-icon ot-icon--default" style="margin-right: 8px;"></i>
<span>Täytä</span>
</button>
<span class="ot-queryitem__logo"></span></div></li>
<li class="ot-queryitem row-fluid">
<div class="ot-queryitem__info ot-queryitem__info--left span7">
<span class="ot-queryitem__name">Nikotiiniriippuvuustesti</span>
</div>
<div class="ot-queryitem__info ot-queryitem__info--center span3"></div>
<div class="ot-queryitem__info ot-queryitem__info--right span2">
<button class="ot-button ot-button--undefined pull-right ot-queryitem__button">
<i class="icon-pencil fa ot-icon ot-icon--default" style="margin-right: 8px;"></i>
<span>Täytä</span>
</button>
<span class="ot-queryitem__logo"></span></div></li>
//span[text()='Nikotiiniriippuvuustesti'] will give you a <span> with the given text
/ancestor::li axis will give you the parent <li> tag
/descendant::button axis will give you the <button> you're looking for
Putting everything together:
//span[text()='Nikotiiniriippuvuustesti']/ancestor::li/descendant::button
Demo:
References:
XPath Tutorial
XPath Axes
XPath Operators & Functions
Try the following xpath.
xpath: //ul//li[contains(.,'Nikotiiniriippuvuustesti')]//button
OR
xpath: //ul//li[contains(.,'Äänikysely')]//button
However You can pass this Nikotiiniriippuvuustesti or Äänikysely as string variable in robotframework.Hope this helps.
Both the element with the text and the button are child elements under each <li>. You need to go up the html tree from the text and then look for a button under a sibling element
//div[span[contains(., 'Äänikysely')]]/following-sibling::div/button
To identify li tag which contains text you looking for as -
${YOUR_TEXT} Nikotiiniriippuvuustesti
## this keyword will give first matching element
${elements}= Get WebElement xpath://span[contains(text(),'${YOUR_TEXT}')]/ancestor::li
### wait for element to be present on page
Wait Until Page Contains Element ${elements}
## now click on button inside li tag found in above lines
Click Button xpath://span[contains(text(),'${YOUR_TEXT}')]/ancestor::li//button
note: locators are taken from the html sample you provided
You don't have to count the number of <li> within the <ul>.
To click on the respective button according to the text e.g. Äänikysely, Nikotiiniriippuvuustesti etc you can use the following solution:
To click for Äänikysely:
Click Button xpath://div[contains(#class, 'ot-queryitem__info--left')]/span[contains(.,'Äänikysely')]//following::button[#class='ot-button ot-button--undefined pull-right ot-queryitem__button']//span[text()='Täytä']
To click for Nikotiiniriippuvuustesti:
Click Button xpath://div[contains(#class, 'ot-queryitem__info--left')]/span[contains(.,'Nikotiiniriippuvuustesti')]//following::button[#class='ot-button ot-button--undefined pull-right ot-queryitem__button']//span[text()='Täytä']
In this application, there is an option to activate or deactivate a channel.
When this channel is activated, span containing tool tip to deactivate is activated like shown below.
Similarly, When this channel is de-activated, span containing tool tip to activate is activated like shown below.
If I can figure out the xpath to active span I would be able to verify this element. BUt having hard time to find the xpath to active span.
</span>
<span id="stat965">
<span class="btn btn-small deactivateBtn btn-warning" href="javascript:void(0);" data-toggle="tooltip" onclick="status('ZVJxWHlYYUhMaWxZM2xqT1A2YTdydz09' ,'false','TWITTER',965);" title="" data-original-title="Deactivate">
<i class="fa fa-times"></i>
</span>
<span class="btn btn-small activateBtn btn-primary" data-toggle="tooltip" style="display: none;" href="javascript:void(0);" onclick="status('ZVJxWHlYYUhMaWxZM2xqT1A2YTdydz09' ,'true','TWITTER',965);" title="" border="0" data-original-title="Activate"> <i class="fa fa-check"></i>
</span>
</span>
Use isDisplayed method on following web elements which tell whether that element is visible on the web page or not.
try for Deactivate span tag with following XPATH:
//span[#style="display: inline-block;" and #data-original-title="Deactivate"]
returns WebElement only if Deactivate span tag is active otherwise null, so you can check for Activate span tag.
for Activate span tag with following XPATH:
//span[#style="display: inline-block;" and #data-original-title="Activate"]
Please try the below CSS for to identify Activate :
span.activateBtn
Please try the below CSS for to identify De-Activate :
span.deactivateBtn
According to you, only one element (span) should be active. Right? If yes, you can use enabled method. Enabled method will return true if element is enabled. As per your need, you can process the return value. Example:
if(driver.findelement(By.xpath("//span[#data-original-title="Deactivate"]).enabled)
{
// do your actions
}
And check the same for activate element and continue your steps as per your need.
if you want to find the deactive span, use the below cssSelector:
span[class*="deactivateBtn"]
for choosing deactivate span, use the below cssSelector:
span[class*="activateBtn"]
hope this helps and let me know what is the result.