I need to click on one of the dropdown options in order to expand page entries from 10 to 50. HTML looks like this:
<button id="page-size-dropdown-toggle" class="btn btn-white btn-sm dropdown-toggle ng-binding" data-toggle="dropdown" role="menuitem" aria-label="Change page size">
10
<i class="fa fa-chevron-down" role="presentation"></i>
<span class="sr-only ng-binding">Shown</span>
</button>
<ul id="page-size-dropdown-toggle-menu" class="dropdown-menu" role="menu" aria-labelledby="page-size-dropdown-toggle">
<!-- ngRepeat: size in pageSizeCtrl.getPageSizes() --><li ng-repeat="size in pageSizeCtrl.getPageSizes()" role="presentation" class="ng-scope">
<a href="" ng-click="pageSizeCtrl.changePageSize(size)" class="menuitem" role="menuitem" aria-label="Show 10">
<span aria-hidden="true" class="ng-binding">10</span>
</a>
</li><!-- end ngRepeat: size in pageSizeCtrl.getPageSizes() --><li ng-repeat="size in pageSizeCtrl.getPageSizes()" role="presentation" class="ng-scope">
<a href="" ng-click="pageSizeCtrl.changePageSize(size)" class="menuitem" role="menuitem" aria-label="Show 25">
<span aria-hidden="true" class="ng-binding">25</span>
</a>
</li><!-- end ngRepeat: size in pageSizeCtrl.getPageSizes() --><li ng-repeat="size in pageSizeCtrl.getPageSizes()" role="presentation" class="ng-scope">
<a href="" ng-click="pageSizeCtrl.changePageSize(size)" class="menuitem" role="menuitem" aria-label="Show 50">
<span aria-hidden="true" class="ng-binding">50</span>
</a>
</li><!-- end ngRepeat: size in pageSizeCtrl.getPageSizes() -->
</ul>
</div>
As you can see there are 3 options 10, 25 and 50. Here what I have tried so far:
clicking of the drop down and using LinText - Cant find this element
var dropDown = driverIpass.FindElement(By.Id("page-size-dropdown-toggle"));
dropDown.Click();
driverIpass.FindElement(By.LinkText("Show 50")).Click();
using XPath (unclickable element) tried different paths as well, no avail
IWebElement element = driverIpass.FindElement(By.XPath("//*[#class='dropdown-menu']/li[3]/a"));
element.Click();
As well as XPath using #id
Also tried digging around within classes hoping to find the correct link - nothing. There is something I don't see/realize.
It's my second day using C# and selenium so if anyone could put me on the right path I would really appreciate it.
I cant provide the actual web page as this is internal (company)
Try with WebDriverWait() and following css selector.
WebDriverWait wait = new WebDriverWait(driverIpass, TimeSpan.FromSeconds(10));
wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector("#page-size-dropdown-toggle"))).Click();
wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector("#page-size-dropdown-toggle-menu li a[aria-label='Show 50']"))).Click();
Found an answer after posting my question. In case someone else might have a similar problem:
//click to open drop down menu
var dropDown = driverIpass.FindElement(By.Id("page-size-dropdown-toggle"));
dropDown.Click();
//select the 3rd option within menu
IWebElement element = driverIpass.FindElement(By.XPath("//*[#id='page-size-dropdown-toggle-menu']/li[3]/a"));
element.Click();
Related
I have a problem with a dropdown-menu I've added to a Blazor server application, in that the background shading of each dropdown-item doesn't align correctly when placed in the default top-row div.
When I drop the same code in the default counter page, I don't have the problem.
I'm guessing the top-row div is causing inheritance of one or more CSS classes, but as a long-time (20 yrs) C# WinForms developer that's only just starting to look at Blazor and web development, I don't really know where to start correcting this. Can anybody offer me some pointers on where I might be going wrong?
Here's the code taken from MainLayout.razor. The exact same dropdown div block in the counter.razor page works fine, as shown above.
<main>
<div class="top-row px-4">
Home
Plans
<AuthorizeView>
<Authorized>
</Authorized>
<NotAuthorized>
<div class="dropdown">
<a #onclick=this.Toggle class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
#if (isActive)
{
<div class="dropdown-menu show" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Sign In</a>
<a class="dropdown-item" href="#">Register</a>
</div>
}
</div>
</NotAuthorized>
</AuthorizeView>
About Us
</div>
By default, MainLayout.razor also includes the MainLayout.razor.css file (with .top-row style). You probably should look for a solution to your problem there.
Hi I've a comment section, where I've defined some angular scope like ng-show and ng-hide, now everytime when I post a new comment, I need to show in that comment section div, so I'm refreshing the div using the following code -
$("#comment-section").load(window.location.href + " #comment-section");
but by doing this all the defined angularjs scope is not working.
Here's my screenshot -
after posting comment,
My code -
//other code
<div id="comment-section">
<div ng-show="(commentMenu=='show_#item.Id')" class="more float-right align-items-end dropdown">
<button type="button" id="more-comment-btn_#item.Id" class="more-vertical-btn dropdown-custom-toggle" data-toggle="dropdown">
<span class="more-vertical-dot"></span>
<span class="more-vertical-dot"></span>
<span class="more-vertical-dot"></span>
</button>
<ul class="dropdown-menu-left dropdown-menu" style="transform: translate3d(-48px, 31px, 0px);">
<li><a class="dropdown-item" href="javascript:void(0);" ng-click="ShowEdit='editComment_#item.Id'"><i class="fa fa-pen"></i> Edit</a></li>
<li><a class="dropdown-item" href="javascript:void(0);" ng-click="DeleteComment('#item.Id');"><i class="fa fa-trash"></i> Delete</a></li>
</ul>
</div>
</div>
// other code
Please guys, I'm stuck here, a help will be appreciated.
I am trying to click this button through Selenium web driver but it whatever I try, it says cannot find element.
<a class="button" href="#" id="enrollForm">ENROLL NOW</a>
I tried
driver.FindElement(By.XPath("//*[#id='enrollForm']")).Click();
Update:
This is the whole snippet. I want to click on the button "Enroll Now":
<div class="buttonContainerLanding">
<div class="buttonDiv">
<a class="button" href="#" id="enrollForm">ENROLL NOW</a>
</div>
<div class="buttonDiv">
<!-- <b class="buttonTitle">Need to Activate Your Card?</b> -->
<a class="button" href="#" id="activate">ACTIVATE CARD</a>
</div>
<div class="buttonDiv">
<!-- <b class="buttonTitle">Need to Activate Your Card?</b> -->
<a class="button" href="#" id="replace">REPLACE CARD</a>
</div>
</div>
To click on the element with text as ENROLL NOW you can use either of the following solutions:
Using LinkText:
driver.FindElement(By.LinkText("ENROLL NOW"));
Using CssSelector:
driver.FindElement(By.CssSelector("div.buttonContainerLanding div.buttonDiv>a.button#enrollForm"));
Using XPath:
driver.FindElement(By.XPath("//div[#class='buttonContainerLanding']//div[#class='buttonDiv']/a[#id='enrollForm' and text()='ENROLL NOW']"));
I'm programming Selenium using C#, but I don't understand how to use it.
For example, I want to check the XPath that I want to click from HTML.
This is the HTML I want.
<span class="option_text">10</span>
Below is the original HTML
<div class="report_options _options">
<a href="#" class="option" data-reportpolicy="R1">
<i class="ico as_radio"></i>
<span class="option_text">1</span>
</a>
<a href="#" class="option" data-reportpolicy="R2">
<i class="ico as_radio"></i>
<span class="option_text">2</span>
</a>
.
.(Omitted)
.
<a href="#" class="option" data-reportpolicy="R11">
<i class="ico as_radio"></i>
<span class="option_text">10</span>
</a>
</div>
I used
WebDriver.FindElement(By.XPath("//span[contains(#class,'option_text') and contains(text(), '10')]")).Click();
but I could not. How can I fix this?
PS. Visual Studio error log:
OpenQA.Selenium.NoSuchElementException: 'no
such element: Unable to locate element:
{"method":"xpath","selector":"//*[#id='report-question-layer']/div[2]/div/div[3]/div/div[2]/div/a[10]"}
(Session info: chrome=60.0.3112.101) (Driver info:
chromedriver=2.31.488763
(092de99f48a300323ecf8c2a4e2e7cab51de5ba8),platform=Windows NT
10.0.14393 x86_64)'
Use below XPATH :-
//a[#class='option' and #data-reportpolicy='R11']//span[#class='option_text']
OR
//*[#id="report-question-layer"]/div[2]/div/div[3]/div/div[2]/div/a[10]/span
OR
//div[#id='report-question-layer']//div[#class='report_options _options']//a[#data-reportpolicy='R11']/span
OR
//a[#data-reportpolicy='R11']/span
Hope it will help you :)
Checking in the HTML, You can try to use this way:
First, try to switch to the frame:
WebDriver.SwitchTo().Frame(driver.FindElement(By.Name("fb_xdm_frame_https")));
Then try the following XPath to click on it:
WebDriver.FindElement(By.XPath("//span[contains(text(), 'その他の禁止されている行為')]")).Click();
I am trying to click a button using selenium webdriver. Working fine with the following XPath
driver.FindElement(By.XPath("html/body/div[36]/div[3]/div/button[1]")).click();
it clicks the button fine but if I try to find it using class then it wont click it
driver.FindElement(By.XPath("//div[#class='ui-dialog-buttonset']/button[1]")).click();
Any Idea what I am doing wrong. Actual source code is as follows:-
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
::before
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text"></span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text"></span>
</button>
</div>
::after
</div>
</div>
I see two buttons with the same class name. You could try this:
List<WebElement> list = driver.findElements(By.cssSelector("button[class=\"ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only\"]"));
//click on the first button
list.get(0).click();
you can try the contains operator "*" of css selector.
List<WebElement> mylist = driver.findElements(By.cssSelector("button[class*='ui-corner-all']"));
mylist[0].click();
you can visit this link for CSS Selector tutorial in Selenium with c#
http://binaryclips.com/2015/02/16/css-selectors-for-selenium-webdriver/