I'm trying to click a button using Capybara. I've tried all combinations I can think of but no luck. Trying to click on the 'delete' link. The delete link only shows up when you hover over the row in the table.
This is the HTML:
<tbody>
<tr class="even" id="informal_6">
<td class="columnOrganizationNameColumnValue" id="informal_7">
<div>
<a id="showLink_0" title="Organization Details" class="viewLink">
Institution / Automation
</a>
</div>
<div class="gridMenuDescription">
</div>
<div class="gridMenu">
<a id="gridMenuDirectLink_1" title="Edit Organization" class="gridMenuItem">
edit
</a>
<a id="gridMenuDirectLink_2" class="gridMenuItem delete">
delete
</a>
</div>
</td>
</tbody>
I'd like to note, that the "gridMenu" div, when you hover over it using Firebug it turns to:
<div class="gridMenu hover gridMenuShow">
Some things I've tried, but no luck:
find(:xpath, '//*[(#id = "gridMenuDirectLink_2")]').click
find("#informal_6").find("#informal_7").find(".gridMenu.hover.gridMenuShow").find(".gridMenuItem.delete").click
Suggestions?
After a crazy amount of attempts trying different things I was able to get it to work with this code:
find('#informal_6').hover.find('.gridMenu').hover.find('.gridMenuItem.delete').click
Try the below code to hover over the row.
page.driver.browser.mouse.move_to(page.driver.browser.find_element(:id=>"locator"))
I have a calendar interface where AJAX edit & delete links appear only when you hover over each calendar entry. It's nice and compact, but I had trouble getting Capybara to click on those dynamically displayed elements, and using .hover on the parent element didn't seem to make a difference. So I tried a brute-force approach that is working nicely so far:
# Use Jquery to force display a hidden element. Useful for getting at links
# that are dynamically displayed.
# Call it like: js_show(".entry.scheduled[data-id=\"#{#da3.id}\"] .actions")
def js_show(selector)
page.execute_script(" $('#{selector}').show(); ")
end
def js_hide(selector)
page.execute_script(" $('#{selector}').hide(); ")
end
Now, when I need to click on an element that's only displayed on hover etc., I can call js_show(".whatever.container.selector") to force the links to display, then page.find(...).click works.
Related
Im using the lastest version of fullpage.js(4.0.10).
I cannot suceed to put it on jsfidle license error block me to use CDN
so I put a really simple part of code here give a copy past it locally will reproduce the problem(and of course link back the fullpage.js and the fullpage.css).
so everything work fine until i click to the "button>a href=here" to go to the slide #here
then I can't scroll up at all I have to scroll all the way down and scroll one more time down to then be able to scroll up upper than the slide id "#here"
I want to be able to after I fire a link to an id element to scroll up.
<button type="button">here</button>
<h1>fullPage.js</h1></div>
<div class="section" id="section1">
<div class="slide" id="here"><h1>Simple Demo</h1></div>
<div class="slide"><h1>Only text</h1></div>
<div class="slide"><h1>And text</h1></div>
<div class="slide"><h1>And more text</h1></div>
</div>
<div class="section" id="section2">
<h1>No wraps, no extra markup</h1>
</div>
<div class="section" id="section3">
<h1>Just the simplest demo ever</h1>
</div>
</div>
code to run locally
The question has been answered here.
I paste:
You can use the anchors option to assign a different anchor to each section:
new fullpage('#fullpage', {
anchors: ['one', 'two', 'here', 'four'],
//your other options...
});
This way the #here anchor will be linked to the 3rd section.
https://jsfiddle.net/g26adykw/
The other option is just using the fullPage.js JS methods such as moveTo.
You can read more about anchors on the fullPage.js docs.
Below is my HTML
<div id="slectrole" class="collapse in" role="tabpanel" aria-labelledby="selectrole">
<div class="panel-body">
<div class="dropdown">
<input class="search-control jsSayt jsRolesFreeText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Eg: Delivery, BPO, Driver'" placeholder="Eg: Delivery, BPO, Driver" value="" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="text">
<ul class="jsSaytList jsRolesFilter">
<li id="jsFilter_subRole_1" class="checkbox-inline jsFilterSubRole jsRoleValue_1" data-value="Accountant">
<input id="Accountant" class="radio-custom jsFilterRadio jsRole" value="Accountant" name="Role" data-roleid="1" type="radio">
<label class="radio-custom-label" for="Accountant">Accountant</label>
Below is the code I am using to click the radio button:
wait.until(EC.visibility_of_element_located((By.XPATH, "//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']")))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']").click()
The code runs ok but it does not select the radio button.
OK, so I can understand your frustration, I tried your code and wasn't able to .click() (select) the element when located via xpath. See bellow print-screen:
As you can see, it was only clicking the radio-button when issuing a .click() via a CSS-located element.
Question No.1: Are you bound to the xpath locator strategy in one way or another?
If NOT, then just use a regulat CSS selector: 'input[id="Accountant"]'.
Else, you have to figure out what is wrong with the website you are testing, or switch to another WebElement locator strategy. (e.g.: ID, Class, CSS, LinkText, etc.)
If you would opt to go with the CSS locator-strategy, then your code would look like this:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("input[id='Accountant']").click()
Alternatively, you can try to click on the <label> tag attached to the radio-button, which in my console works the same way:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("label[for='Accountant']").click()
Explanation: In a real-life scenario, you can select the radio-button both via the actual radio-button, or via its label. That's why your solution worked.
Question No.2: Why are you using such a long xpath selector?
In order to have a optimal selector, you should ALWAYS go with the shortest, combination of tags/attributes that will UNIQUELY identify your target element. Else you will be susceptible to website changes, flaky test cases, etc.
You can perform the click on the drop down and then wait for the radio button to appear, before clicking it. Hence, try following:
driver.find_element_by_xpath("//div[#id='slectrole']/div/div[#class='dropdown']/input[1]")).click()
wait = WebDriverWait(driver, 10)
wait.until(EC.visibility_of_element_located((By.XPATH, '//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]')))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]").click()
Let me know, if above code works for you.
I just updated Firefox to 48.0.1 from 48.0 and now I'm seeing an issue with the Bootstrap tooltip. Looking at the HTML in Firebug, it appears that Firefox is adding a new <div> at the bottom of the page that is not in the .jsp:
<div id="tooltip404721" class="tooltip fade top in" role="tooltip" style="top: 162.4px; left: 1220.5px; display: block;">
<div class="tooltip-arrow" style="left: 50%;"></div>
<div class="tooltip-inner">Delete</div>
</div>
This only happens if the tooltip is attached to a button - links are not affected. The links and buttons are column elements in a jQuery DataTables table. The tooltip portion of the code for link vs. button is identical.
Link:
<td><a class="btn btn-info btn-xs" href="<c:url value='/recipe/viewRecipe/${recipe.id}'/>"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.view"></spring:message>">
<span class="glyphicon glyphicon-list-alt"></span></a>
Button:
<td><button class="btn btn-danger btn-xs" type="button" id="delete${recipe.id}" onclick="deleteRecipe(${recipe.id},
'<spring:escapeBody javaScriptEscape="true">${recipe.name}</spring:escapeBody>')"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.delete"></spring:message>">
<span class="glyphicon glyphicon-remove"></span></button>
This DataTables-specific setting is in a .js file included on the page:
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
});
Removing the above gets rid of the extra <div> but then the tooltip no longer appears with Bootstrap formatting. Adding data-container="body" to the button itself didn't work either.
Any ideas?
EDIT:
Although I just recently noticed the issue I downgraded to 47.0.1 and still see the problem. I will keep downgrading to find out which version this starting appearing in. I don't think it's my code because the production version has the same problem as my dev version. Also, this does not happen in Chrome but it does in Edge.
I found the problem. I have a function that's applied to all pages that sets the input focus for form pages to the first form control. This is because the menu contains a search input and button, which would otherwise get the focus instead of the first form input.
function setInputFocus() {$(':input:visible:enabled:eq(2)').focus();}
For some reason that I don't remember now I moved the code to toggle the tooltip (see question) above this focus code. That meant that the first button in the first row of the datatable ended up getting the focus, hence the tooltip being visible when the page was displayed. Moving the tooltip toggle after this focus code fixed the problem.
Obviously, I should be more careful about site-wide code that is specific to a particular issue but ends up being applied to all pages...
I am currently using selenium webdriver 2.35 for firefox being programmed in ruby. I am having an issue where I can not get the webdriver to focus correctly on an input field element. By default, there is some gray text already populated in the field. When a user clicks on this field, that gray text is supposed to disappear and allow the user type into field.
Using the webdriver, I would send the click command to that element and it would click, but nothing would visually happen. I also checked to see the active element and in fact it is that field(after clicking on the element). (I used this to check: driver.switch_to.active_element)
Also, I would send keys to that field and it will show up gray either appended to the default text or by clearing that field and sending those keys
Methods that I used but did not work
1) driver.find_element(element).click
2) driver.action.move_to.element.click.perform
Does anyone have any suggestions? (I know that this may sound ambiguous but feel free to question me need any more information)
I am not sure if this helps or not but here is the html from before the click(also the same result after using the click function in selenium
This is the html before the click (and the result after using the selenium click function
<html>
<td id="ext-gen273" class="x-toolbar-cell input-container">
<div id="ext-gen274" class="x-form-field-wrap x-form-field-trigger-wrap" style="width: 467px;">
<input id="ext-comp-1024" class="x-form-text x-form-field autofoo-search-txtbx foo-search-dropdown x-form-empty-field" type="text" name="ext-comp-1024" autocomplete="off" size="24" style="width: 398px;"></input>
</div>
</td>
</html>
This html appears after is after the user manually clicks on the field.
<html>
<td id="ext-gen273" class="x-toolbar-cell input-container">
<div id="ext-gen274" class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" style="width: 467px;">
<input id="ext-comp-1024" class="x-form-text x-form-field autofoo-search-txtbx foo-search-dropdown x-form-focus" type="text" name="ext-comp-1024" autocomplete="off" size="24" style="width: 398px;"></input>
</div>
</td>
</html>
I also noticed that after the user manually clicks on the field, the selenium commands work correctly
I'm trying to do some screen scraping, and I've gotten down to this last step. I'm trying to download a file, which is accessed via a button from the following html:
<button class="pdf ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">
<span class="icon-32 pdf-32"></span>
<span class="btn-txt"> PDF file </span>
I'm used to clicking buttons with the following ruby code:
browser.button(:value, "Sign In").click
But with this .. there doesn't seem to be any value I can use. Can anyone help me out?
I can think of a couple possibilities. One is that you can do a regular expression match on the value. Try:
browser.button(:value, /PDF file/).click
But you don't have to use the value, you can use a uniquely identifying attribute. In this case, you may be able to use the class, e.g.
browser.button(:class, "pdf").click
If the pdf class is not unique, you can add an :index to identify which one of the matches to click.