TL;DR: The developer had bound the jQuery click listener to the parent div, not the child span that I had been trying to click.
I'm trying to click the delete button that is in the span tag.
HTML:
<div class="user j isotope-item" data-id="5362" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
<div class="delete-x">
<span title="Delete">x</span>
</div>
<div class="name longText" title="Edit Location">
Jkogo Rqrqn
</div>
</div>
C#:
public void DeleteUser(IWebDriver webDriver, long userId)
{
var deleteButton =
webDriver.FindElement(
By.CssSelector($"#userlist-container > div[data-id='{userId}'] > div.delete-x > span"));
deleteButton.Click(webDriver);
}
I printed to Console and it looks right/is getting the id at least:
#userlist-container > div[data-id='5362'] > div.delete-x > span
I'm stumped on how to click on this child element! Any help appreciated.
Try this:
webDriver.FindElement(By.xpath($".//div[#data-id='{userId}']/div/span")).Click(webDriver);
but possibly delete action is calling not by span click. In this case nothing happens after the click and you need to find more correct element for this. Somethimes this is parent element, sometimes parent-of-parent.
Related
I created a Bootstrap Slideshow and several card components. How would I even begin testing that the slideshow works with Xunit? I need to ensure that the slider, left right arrows actually work, that they render the same picture, that the captions show. I added some custom code. How would I write a webtest to ensure that slide arrows work for example?
https://getbootstrap.com/docs/4.0/components/carousel/
.imgcarousel {
width:100%;
}
.carouselleftarrow {
font-family: Material Icons;
position: absolute;
bottom: 5px;
content: "\e408";
}
.carouselrightarrow {
font-family: Material Icons;
position: absolute;
bottom: 5px;
content: "\e409";
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="carousel slide" data-ride="carousel" id="Carouselid0efe5f93f1734c5a967cf4ff7c47775a" style=" width: 500px;
height: 500px;">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class=""></li>
<li data-slide-to="1" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class=""></li>
<li data-slide-to="2" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item"><img class="imgcarousel mCS_img_loaded" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"></div>
<div class="item"><img class="imgcarousel mCS_img_loaded" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div>
<div class="item active"><img class="imgcarousel mCS_img_loaded" src="https://www.mcpl.us/sites/default/files/styles/large/public/bookstack.jpg?itok=pHICdzg9"></div>
</div>
<a class="left carousel-control" data-slide="prev" href="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a"><span class="carouselleftarrow">navigate_before</span></a><a class="right carousel-control" data-slide="next" href="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a"><span class="carouselrightarrow">navigate_next</span></a>
</div>
Something like:
public class MyTests
{
private IWebDriver _webdriver = new ChromeDriver();
[Fact]
public void CarouselWithMultipleItems_ClickRightButton_NavigatesToNextItem()
{
// Arrange
// Load page
_webdriver.Url = "your-url-here";
// Wait until right button is clickable
WebDriverWait wait = new WebDriverWait(_webdriver, new TimeSpan(0, 0, 30));
WebElement rightArrow = wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector("a.right.carousel-control")));
// Act
rightArrow.Click();
// Assert
WebElement caption = wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementIsVisible(By.CssSelector("<caption-selector-here>")));
// You might need another wait here
WebElement picture = _webdriver.FindElement(By.CssSelector(".imgcarousel.active"));
// Do your assert logic here
}
}
Should get you started. It goes without saying that you will need to include the relevant xUnit NuGet pacakges
along with the Selenium.WebDriver, Selenium.Support, SeleniumChrome.WebDriver, and DotNetSeleniumExtras (there might be some other required ones too).
I am trying to login to a website. I am able to fill out the form correctly with all of the connection information, but I cannot get the page to login. The button is a link without a name or id, so I can't click it directly. I have been working on invokeScript() stuff, but that doesn't seem to work either. This is the button code:
<div style="float:left; width:50px; margin: 0px auto 0px auto; text-align:center;">
<div id="loginBtn">
<a href="#" style="text-decoration:none; font-weight:bold; font-size: 10px; color:#FFFFFF;" onClick="javascript: LoginSubmit(event, true);" tabindex="3">
Log In
</a>
</div>
</div>
How can I click a link like that?
I have tried stuff like this:
webBrowserControl.InvokeScript("LoginSubmit", "true" );
webBrowserControl.InvokeScript("LoginSubmit(event, true)");
and
webBrowserControl.InvokeScript("LoginSubmit", new object[] { new string[] { "event", "true" } });
You may be missing Document, like so:
webBrowserControl.Document.InvokeScript(name, args)
if not try invoking the script with this wrapper method, extract:
private object MyInvokeScript(string name, params object[] args)
{
return webBrowserControl.Document.InvokeScript(name, args);
}
…
int x = 50;
int y = 100;
MyInvokeScript("LoginSubmit",x, y);
please see the demo below :
http://www.templateaccess.com/demos/walkin/
i bought this template and really really could n't find a way how does active class on menu_nav li work?
that menu_nav html is like this :
<div class="menu_nav">
<ul>
<li class="active"><span>Home</span></li>
<li><span>Blog</span></li>
<li><span>Support</span></li>
<li><span>About Us</span></li>
<li><span>Contact Us</span></li>
</ul>
</div>
and it's css :
/* menu */
.menu_nav { margin:0; padding:50px 0 0; float:right; width:auto; height:43px;}
.menu_nav ul { list-style:none; padding:0; height:43px;}
.menu_nav ul li { margin:0; padding:0 0 0 2px; float:left;}
.menu_nav ul li a { display:block; margin:0; padding:0 0 0 20px; font-size:16px; line-height:19px; font-weight:normal; color:#fff; text-decoration:none; text-transform:none; text-align:center;}
.menu_nav ul li a span { display:block; padding:12px 20px 12px 0; height:19px;}
.menu_nav ul li.active a, .menu_nav ul li a:hover { color:#fff; background:url(images/menu_a_l.png) no-repeat left top;}
.menu_nav ul li.active a span, .menu_nav ul li a:hover span { background:url(images/menu_a_r.png) no-repeat right top;}
as you see there is a class named 'active' that moves by clicking on every menu and never jumps to home menu during postbacks.
there is no jquery or javascript about that.
how does it work?
in my asp.net that active class does not work, so i add the jquery below :
<script type="text/javascript">
$(function () {
$('.menu_nav ul li').click(function () { $(this).addClass('active'); alert('a'); });
});
</script>
but during postbacks i lose active class on selected item.
any idea?
You are adding the '.active' class on the client-side, so as soon as your page does a full postback everything is being re-created on the server-side. If you want to prevent that from happening, use an UpdatePanel and only refresh the page content (leaving the navigation menu intact).
That active class is set manually on each page for the menu items. So you don't need JavaScript to set it unless you are using AJAX to get the new page and display it.
Your menu seemed to work fine for me, every-page has it's menu item properly styled.
HTML:
<div class="menu_nav">
<ul>
<li class="index-2"><span>Home</span></li>
<li class="blog"><span>Blog</span></li>
<li class="support"><span>Support</span></li>
<li class="about"><span>About Us</span></li>
<li class="contact"><span>Contact Us</span></li>
</ul>
</div>
jQuery:
$(function() {
var location = window.location.href,
nav = $('.menu_nav');
$('li', nav).each(function() {
var index = location.indexOf($(this).prop('class'));
if (index != -1) {
$(this).addClass('active');
return false;
}
});
});
I'm trying to create an application that can fill html form automatically using WebBrowser control(C#). There is a option list on the web page and I can get corresponding elements in the drop down box. But when I call the invokemember("click") methods, there is no responce.Below in the selection element of HTML
<div>
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
<a class="select" v="0" href="javascript:;">Not </a>
<a v="419000" href="javascript:;">insure</a></div>
Here is my codes,I find ScrollIntoView and Focus method is ok
HtmlElementCollection element_div=currentWindow.Frames[0].Document.GetElementsByTagName ("div");
foreach (HtmlElement item in element_div)
{
if (item.GetAttribute("classname") == "ddlcont" && item.Children.Count !=0)
{
item.Children[1].ScrollIntoView(true);
item.Children[1].Focus();
item.Children [1].SetAttribute("selected", "true");
item.Children [1].InvokeMember("Click");
}
}
I am appreciate that if anyone can help me to solve the problem. Thanks for your help!
You may have pasted wrong, but in your example div doesn't have a class.
Look:
<div>
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
should be
<div
class="ddlcont" style="display: block; width: 150px; top: 414px; left: 790.75px;">
(no > on the first line)
Try something like this instead:
Button1.GetType().GetEvent("OnClick").GetRaiseMethod().Invoke(Button1, EventArgs.Empty);
You may need to tweak the syntax a little bit, but this should put you on the right path.
I have a gridview with some imagebuttons, each of which kicks off a report page for that item. The report take 10-15 seconds to run, so I'd like a popup 'Generating report, please wait' type thing. I can think of a few ways but would like the opinion of those more experienced than I. The options I was considering:
a) link my imagebutton to an intermediate page that says 'please wait', and then refer it onto the report page from there. Seems a bit clunky
b) Investigate using jquery or similar. I have telerik controls, they have a few things but it isn't clear if any are suitable.
c) Define some kind of CSS layer with a please wait warning on it, and make it visible as part of the button's onclick event
d) Look into jquery or similar
Any thoughts?
Thanks!
I use Div with transparency, and its pretty cool and simple. Give it a try.
<div id="ModalPopup" style="visibility: hidden;">
<div style="position: fixed; width: 100%; height: 100%; z-index: 10002; background-color: Gray;
filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: fixed; width: 100%; height: 100%; z-index: 10003;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
width: 200px;">
<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
Procesando....
</div>
</td>
</tr>
</table>
</div>
To display the div, use this JavaScript:
document.getElementById('ModalPopup').style.visibility = 'visible';
I have the exact same problem before but I found the AJAX Server Control UpdateProgress very useful. Here's a link to UpdateProgress Control.
you can have an <iframe> on the page, of which its style is set to display:none. a button (which you will use to execute an action) will perform a javascript function that will set the style of the <iframe> to display:block on click.
please wait on page load in js can be used in any language give a try
in body place this code
<body>
<div id='loadingmsg' style='display: none;'></div>
<div id='loadingover' style='display: none;'></div>
</body>
in css
#loadingmsg {
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("assets/img/loaders/load10.gif") no-repeat center center rgba(255,255,255,0);
}
#loadingover {
background: #23351f;
z-index: 99;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
js
<script>
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
showLoading();
}
else if (state == 'complete') {
hideLoading();
}
}
function showLoading() {
document.getElementById('loadingmsg').style.display = 'block';
document.getElementById('loadingover').style.display = 'block';
}
function hideLoading() {
document.getElementById('loadingmsg').style.display = 'none';
document.getElementById('loadingover').style.display = 'none';
}
</script>