I am new to Watir,and I met trouble when I tried to click the "Add" button in a website. Here is source code:
<div class="page_and_btn">
<div>
<a href="javascript:addUser();" class="myBtn">
<em>Add</em></a>
</div>
So far,I tried any way I can find,but just got an exception:unable to locate element.
Here are the code I have tried:
ie.div(:class,"myBtn").click
ie.link(:class,"myBtn").click
ie.link(:text,"Add").click
ie.button(:text,"Add").click
Please tell me what should I do?
You can write short selector
ie.em(:text => 'Add').click
but better will be write long
ie.div(:class => 'page_and_btn').em(:text => 'Add').click
very useful method flash
what show element on page
ie.div(:class => 'page_and_btn').em(:text => 'Add').flash
ie.link(:class,'myBtn').click works fine for me.Still you are not able to proceed further,try below code.
ie.div(:class,'page_and_btn').link(:class,'myBtn').em(:text,'Add').click
Related
I'm trying to find a element by binding, the problem is that the the element is an toast.
I'm using:
element(by.css('.btn-primary3')).click()
To simulate the click. As a result the toast does appear in the browser during the test.
Then I'm trying to store the element in a variable and test if the text value of the toast is equal to the expected value.
var toast = element(by.binding('toast.toast.title'));
expect(toast.getText()).toEqual('Inloggen mislukt');
But here the error pops up.
Failed: No element found using locator: by.binding("toast.toast.tile")
When I check the toast element in the the Chrome dev tools it shows up like this,
<div data-ng-repeat="toast in activeToasts">
<span data-ng-bind="toast.toast.title" class="ng-binding"> Inloggen mislukt</span>
</div>
I think the problem comes from the fact that that the span containing the binding doesn't exist on the dom when the page is loaded. It gets created when the button is clicked.
If this is the case, wait for the presence of the element after clicking the button:
element(by.css('.btn-primary3')).click();
var toast = element(by.binding('toast.toast.title'));
browser.wait(EC.presenceOf(toast), 5000);
expect(toast.getText()).toEqual('Inloggen mislukt');
May you should try:
<div data-ng-repeat="toast in activeToasts">
<span data-ng-bind="toast.toast.title" class="ng-binding"> Inloggen mislukt</span>
</div>
I try to find button on just opened page without sleep command.
HTML:
<span id="create-user-button" class="ui-button ui-widget ui-state-default
ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Create·User</span>
</span>
Initialization of my element:
span(:create_user_button, :id => "create-user-button")
def open_user_creation_dialog
sleep 1
self.create_user_button_element.when_visible.click
end
When i use piece of code without sleep for Chrome browser, my page is closed and i can't find defined button. There isn't such problem for FF.
I try to use a lot of variants to fix it, like :
self.create_user_button_element.when_visible(2).click
self.create_user_button_element.when_present(2).click
Solution was found :
My page doesn't use Ajax, but there is very big table with users on my page, it takes a lot of time to download.
So i am waiting for download big table and after that i find very well my element.
My problem was solved.
div(:total_users_number, :id => "users-table_info")
def open_user_creation_dialog
self.wait_until(10, "No users displayed") do
self.total_users_number_element.when_visible.text != ""
end
self.create_user_button_element.when_visible.click
end
I have page with a very loadful content, namely list of users, so i should wait for element with big content. I do it, this way :
div(:total_users_number, :id => "users-table_info")
self.wait_until(10, "No users displayed") do
self.total_users_number_element.when_visible.text != ""
end
When this element loaded, i can find my sought element
self.create_user_button_element.when_visible.click
I am new to watir, and (believe me) I tried all the options that are avaliable here for adding wait and assert but have not been successful in doing so.
Here's a brief description of what I'm trying to do and appreciate your help.
I log into my website
I login using userid/password and hit click button.
I want watir to wait until next page is loaded
I want to do some assert to verify the login was successful.
My step 3 and step 4 are failing with the error element not found.
If I login manually and login is successful, I see text Hello,username at the top of the second page and this is what I've been trying to key off of but not having any success. It could be something very simple, but since I'm new to watir, I'm unable to figure it out.
Here are all the commands I tried:
$b.button(:id, 'usernameLogfaceinButton').click
#$b.wait_until($b.text.include?("Hello"))
#($b.text.include?("Hello")).wait_until_present
#$b.text_field(:text, "Hello").wait_until_present
if $b.text.include? "Hello"
puts "Test Passed. Found the test string: Hello- Actual Results match Expected Results."
else
puts "Test Failed! Could not find: Hello"
end
HTML on Page:
<body id="myAccounts" class="cardholderLayout ">
<div id="content">
<div id="navigationContainer">
<div id="headerNavigationMenu" class="innerContents">
<div class="logo"><img alt="xxx" src="/images/xxx.png?xxxxxxxx"></div>
<ul class="menu">
<li class="menuItem">
Hello, Bob
I hope someone can help me or point me in the right direction.
Try:
$b.link(:text => /^Hello/).wait_until_present
Notice that:
It is $b.link instead of $b.text_field. The method needs to match the type of element you are looking for.
The text in the locator is /^Hello/ instead of "Hello". If you pass a string (ie "Hello", watir will look for an element where the text exactly matches. If you want to do a partial text match, then you need to use a regular expression. The expression /^Hello/ says to find a text starting with "Hello".
I am trying to select the surround element when a image within the span is clicked 'remove()', but I am a little new to jQuery and can't figure out how to do it. I can't use a unique id as the element are generated dynamically.
For example:
<span class='type_link'> <img src='/images/deleteCross.gif' onclick='remove()' />Example</span>
I want to select the span when the image is clicked.
Here is an example to hide the parent element of the image:
<span class='type_link'> <img src='/images/deleteCross.gif' onclick='$(this).parent().hide();' />Example</span>
The trick is to use "this" and the parent()-function.
Cheers,
Chris
Look at this (for selector) and this (for event)!
Also W3schools provide Good example for first step in Jquery.
How about .parent() http://api.jquery.com/parent/
I have a page that lists content that are contained in a div with a class ad-container. in that container there is a hidden div with the class ad-contact. on the hover of the ad class i want to animate the display of ad-info. since there are multiple ads on a paticular page, i want only the ad-info of the currently hovered ad-container to slide in. my problem is that since there are more than 10 ads a page when you hover over any of the ads, all of the ads-contact divs slideDown and not the one you are hovering over.
$(document).ready(function() {
$('.ad-container').hover(
function(){
$(".ad-contact").slideDown(1000);
},
function(){
$(".ad-contact").slideUp(1000);
});
});
i think, (this) is used here but im not sure. and this would really shed the light for me.
<div class="ad-container">
<div class="ad-title">title<span class="ad-title-img">(pic)</span></div>
<div class="ad-description">texttext</div>
<div class="ad-contact" style="display:none">contact poster</div>
<div class="ad-sellerinfo" style="display:none">* Verified ***-****<br />
Paid Member</div>
</div>
The jQuery constructor accepts a 2nd parameter which can be used to override the context of the selection. Something like this should work:
$(document).ready(function() {
$('.ad-container').hover(
function(){
$(".ad-contact", this).slideDown(1000);
},
function(){
$(".ad-contact", this).slideUp(1000);
});
});
Also, worth mentioning, $(".ad-contact", this) is internally converted into: $(this).find(".ad-contact") so you can use this one instead, it might be slightly faster.
You could use the .children() selector:
$(this).children(".ad-contact").slideDown(1000);
This way you will only act on the class ad-contact if its a child of the object in context (which is the object currently being hovered)
See a working demo here
You should use event to handle this,
First you need like
ad-container.hover(function(event){
event.target.children();
})
and then this.show().delay(1000).hide();
the code sample provide may not work when copy paste you have to write your own code in editor.