I have an element I'd like to use this on node.trigger("click") but I'm not sure how to find the element. it is a link_to and I'm relatively new to integration tests os I'm trying to find a answer to this question.
Here is the element
<%= link_to '✚ Invite Another Team Member', "#email", data: { invitation_modal_add: "" } %>
Here is my test I'd like to change.
click_link "✚ Invite Another Team Member"
Id like to replace that with something like this
link.trigger("click")
Because that is what capybara is telling me to try at the moment because I'm getting this error
Capybara::Poltergeist::MouseEventFailed:
Firing a click at co-ordinates [0, 0] failed. Poltergeist detected another element with CSS selector 'html.no-mobile.wf-loading.js.touch-events body.accounts.users.index div.jquery-modal.blocker' at this position. It may be overlapping the element you are trying to interact with. If you don't care about overlapping elements, try using node.trigger('click').
To find the element you can just do
link = find(:link, "✚ Invite Another Team Member")
However before you start using trigger you should read the part of the error message before that - "if you don't care about overlapping elements". If you're actually testing your app you probably do care about overlapping elements since they can prevent your user from actually being able to click the link, and the fact that it's trying to click the link at 0,0 may indicate an issue with your page layout. You should probably try setting a larger window size (window_size option when registering your driver - https://github.com/teampoltergeist/poltergeist#customization) so the link is not overlapped, make sure the link isn't fully hidden/collapsed in some way, or use execute_script with JS to scroll the page so the element becomes interactable. If you really don't care about a user actually being able to click the link then feel free to use #trigger
Related
I am experimenting with AppiumLibrary in RobotFramework and have a simple test for a requirement that states: "the Set button should exist on this page.". I am testing this by retrieving the button that has a specified ID and then checking if that button has the right text.
I am able to retrieve the button I want via ID however am having trouble getting the actual text on the button.
Here is how the button is defined on the web page:
<button id="button-set" class="button ng-binding" style="width: 20%">Set</button>
Very simple! Using Appium Desktop in web/hybrid app mode and clicking on the Set button it says the "text" attribute shows "Set". However I've learned that using the attributes in Appium Desktop arent valid when searching for elements on a webpage, for example searching by the Class attribute in Appium Desktop (android.widget.Button) is not correct because on the web page the class for the button is instead: "button ng-binding".
I have tried the following:
# this retrieves the button fine, by ID
PAGE SHOULD CONTAIN ELEMENT xpath=//button[#id="button-set"]
# these all return 'None'
${name}= GET ELEMENT ATTRIBUTE xpath=//button[#id="button-set"] name
${text}= GET ELEMENT ATTRIBUTE xpath=//button[#id="button-Set"] text
So, I am unsure which Attribute to use to retrieve the text when retrieving element by ID. Instead, I have tried to retrieve the element this way:
# this also passes fine - I feel like I should also make sure this button has the correct ID, to make the mapping
# between test procedures and cases easier, but if this is as good as it gets then
# this can be argued for
PAGE SHOULD CONTAIN ELEMENT xpath=//button[contains(text(),'set')]
# however, the following does not make sense, this returns "button" instead of "button-set", which makes me think the xpath query is not correct
${id2}= GET ELEMENT ATTRIBUTE xpath=//button[contains(text(),'set')] id
# again, both of these return 'None'
${name2}= GET ELEMENT ATTRIBUTE xpath=//button[contains(text(),'set')] name
${text2}= GET ELEMENT ATTRIBUTE xpath=//button[contains(text(),'set')] text
I have also tried the following:
${element}= GET WEBELEMENT xpath=//button[#id="button-set"]
# this returns "button-set" as you'd expect:
${id3}= GET ELEMENT ATTRIBUTE ${element} id
# these again return 'None'
${name3}= GET ELEMENT ATTRIBUTE ${element} name
${text3}= GET ELEMENT ATTRIBUTE ${element} text
I feel like this should be a very simple thing to do, and can see in other questions that you would use the Name attribute when using pure Appium. However, using the Robot Framework library instead, that these doesn't appear to be the right approach. I must be doing something pretty simple wrong here, can anyone point it out?
Thank you!
Stumbling across the same issue when trying to fetch element's attributes via Get Element Attribute keyword. It seems that when fetching for the element's text, your best bet is to use Get Text keyword. Switching to Get Text keyword solved the problem on my case. Please see the links below for further details. Spoiler: there aren't any real explanations as to why the Get Element Attribute is flaky.
https://serhatbolsu.github.io/robotframework-appiumlibrary/AppiumLibrary.html#Get%20Text
https://github.com/serhatbolsu/robotframework-appiumlibrary/issues/98
I'm running Rails 5.x, with, Cucumber, Siteprism and Capybara through chromedriver. Most things work except..
I have a tiny bit of javascript that changes the class on an element in response to an event. But Capybara never sees the change. It only ever sees the class the element has when the page initially loaded.
Using Chrome, and debugging my Cucumber steps, I can see the element has the new class, but Capybara doesn't see it.
This must be an issue other people have encountered and solved, though I can't find the right subject title.
example coffeescript
$(document).on('focus', 'tbody#item-entry > tr > td > input', (e) ->
$(#).closest('tr').addClass('focused-row')
$(#).closest('td').addClass('focused-cell')
)
example html after the focus event has been triggered
<tr class="focused-row">
<td>ignore this </td>
</tr>
The purpose is to change the background colour of the row containing an input element that has focus. It works.
But Capybara, can't see the class, but it can see any classes added when the page is loaded. e.g.
expect(siteprism_stuff.root_element['class']).to match(/focused-row/)
Ignore the SitePrism stuff, that just gets the right element. root_element is the Capybara class for the dom node.
Now I know it's getting the right Capybara element because if I change my view to put stuff in the class for each row, then it sees that perfectly OK. What it can't see is the any new class added via Coffeescript. Although it's visible in the Chrome inspector, and changes the background color of the focused row as required.
You're specifying an "ends with" CSS attribute selector ($=)
input[class$='form-control']
which since the class attribute for the element you're interested in
<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="universitiesTable">
doesn't end with 'form-control' is correctly not matching. You probably just want to use a normal CSS class selector input.form-control if continuing to do it the way you are. Any of the following options should find the search field and fill in the data you are trying to fill in.
fill_in 'Search:', with: string
fill_in type: 'search', with: string
find(:field, type: 'search').set(string)
find('input.form-control').set(string)
Note: Your question is still unclear as to whether you are seeing the class added in the inspector in test mode, and whether the line color is changing while the tests are running (or whether you're only seeing that in dev mode) - This answer assumes the JS is actually running in test mode and you're seeing the line color change while the tests are running.
You don't show how you're actually triggering the focus event but I'll assume you're clicking the element. The thing to understand when working with Capybara is that the browser works asynchronously, so when something like click has been done, the actions triggered by that click have not necessarily been done yet. Because of that, whenever doing any type of expectation with page elements you should always be using the matchers provided by Capybara rather than the basic matchers provided by RSpec. The Capybara provided matchers include waiting/retrying behavior to handle the asynchronous nature of dealing with the browser. In this case, assuming siteprism_stuff.root_element is the row element then you could be doing something like
expect(siteprism_stuff.root_element).to match_css('.focused-row')
or depending on exactly how your siteprism page objects are setup you could pass the class option to the siteprism existence checker
# `page_section` and `have_row` would need to be replaced with whatever is correct for your site prism page object
expect(page_section).to have_row(class: ['.focused-row'])
I try to write a web-component to create a simple login menu. it has paper-inputs for name and password and a button which fires a script to check the data.
the right data redirect to the next page while false credentials should open a toast element right above the button with an error message, siimilar to this one:
http://www.polymer-project.org/tools/designer/#6f21f8d26e14d614c9cb
Select the paper-toast-element in the tree-view and check the 'opened'-checkbox get get a vision what I try to do and please excuse the strange style.
The problem:
I included this element in my main page, but the toast element is always visible right from the start. and it doesn't react to the button click if I move the toast away with css.
I don't wanna spam this page with my code, so I uploaded it here:
https://gist.github.com/Gemoron/6b8f41d1bb6ff522e23c
I appreciate any suggestion on how to fix the problem.
You cannot access the hidden shadow DOM of an element directly with jQuery's $ function, nor with document.querySelector. Also jQuery is not needed anyway. Use Polymer's automatic node finding utility instead: this.$.paper_toast.
You can access the paper-input values with this.$.name.inputValue. But i would prefer to use data-binding instead: <paper-input value={{name}}>. Then you can access the input value in your JavaScript with this.name.
The function to display the toast is show().
I'm unable to reproduce the issue that the toast is visible right after the page has loaded. On my computer the toast is initially hidden and displayed when i click on the button (Chrome 37, Polymer 0.3.3).
In line 76 you try to use an "open()" method, which does not exist on paper-toast. It should be "show()". You can find paper-toasr API here: http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast
Also, because the ids in shadow dom are encapsulated, you should be using the id selection mechanism from Polymer instead of jquery-style selector
this.$.paper_toast.show();
More on automatic node finding in Polymer: http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding
Here's jsbin (you might need to refresh as jsbin sometimes breaks with Polymer imports)
http://jsbin.com/fened/1/edit
I'm trying to tracking this form https://secure-www.seat.com/content/lu/brand/fr/contact/arrange-a-test-drive.htx with Dynamic Tag Manager (DTM)of Adobe.
I've create a Rule Based Event like this:
Event Type --> Submit
Apply event handler directly... (In fact I try with check and uncheck)
Element Tag --> form
The same rule, with my personal page form is successful: http://pujoljulia.com/ (!Hablémos! link). As you can see I used form Tag selector, but also I tried other, button, div... and rule doesn't trigger ever.
However, in both pages the Click Map listener recognized event. Honestly I try all options and I can't see why. Can someone help me?
I'm trying to tracking this form
https://secure-www.seat.com/content/lu/brand/fr/contact/arrange-a-test-drive.htx
with Dynamic Tag Manager (DTM)of Adobe.
I took a look at your page and there it looks like DTM is not being loaded on that page. I could not find the _satellite object.
Dynamic form handlers on sites that have customized forms are fairly unstable, usually one or the other breaks. I did not look too deeply to the seat.com page, but it looks to me like JavaScript is used to override default behavior and this could be causing the problem. Clicks do get registered, but this would not solve your problems, as
What I would suggest is that you move the tracking to the next page, where the form has been submitted. This is far more reliable and has a lower chance of causing issues. Usually you can use URL parameters or page naming variables to target on these pages.
I have a file field that has opacity: 0 and is overlaping a fake button. Its a common css technic to fake a sort of "Upload button" that displays consistently across different browsers.
Capybara doesn't allows me to call attach_file on that input. The error is Selenium::WebDriver::Error::ElementNotVisibleError: Element is not currently visible and so may not be interacted with.
Anybody knows any way to force capybara to interact with invisible elements?
The answer is still unanswered, but I've found a work around. Nothing intelligent, just make visible the element with a simple script
page.execute_script %Q{
$('#photos').css({opacity: 1, transform: 'none'});
}
I post it for the record.
You can interact with hidden elements using the visible: false property in Capybara.
If you want to click on hidden element use:
find("#photos", visible: false).click
Don't use click_button('#photo') directly
The author of Capybara recommends setting Capybara.ignore_hidden_elements immediately prior to needing to see the invisible element, and resetting it afterwards:
Capybara.ignore_hidden_elements = false
click_button 'my invisible button'
Capybara.ignore_hidden_elements = true
In general interacting with non-visible elements should not be possible when using Capybara (you can find them using the visible: false/hidden option in most finders but not actually do anything to them). However, the file input is a special case because of how common it is to hide the element and, due to security restrictions, no other way to actually add a file by interacting with the pages visible elements. Because of this attach_file has a make_visible option which can be used to have Capybara make the element visible, attach the file, and then reset the CSS to the original setting.
attach_file('photos', file_path, make_visible: true)
I ended up resolving it a different route.
execute_script() was giving me a hard time (it would freeze test execution on FireFox), so this is what I did:
I already had an appropriate javascript file. I appended the following
<% if ENV["RAILS_ENV"] == "test" %>
$('#photos').show()
<% end %>
I also had to append .erb to my javascript file for proper Rails asset handling.
And in my test file, I was already setting ENV["RAILS_ENV"] = "test"
This way I could just dumb down the UI for test, and yet maintain the look and feel for production.
Miquel, thanks for workaraund.
I have similar issue for interacting with hidden file input on C# binding for Selenium Webdriver 2.35 and Firefox 24. To make file selection working did similar trick:
((IJavaScriptExecutor)webdriver).ExecuteScript("$('#fileUploadInput').css({opacity: 1, transform: 'none'});");
IWebElement e = webdriver.FindElement(By.CssSelector("input#fileUploadInput")));
e.SendKeys("c:\\temp\\inputfile.txt");
I've done it this way with elements that has the CSS style display:none; set:
page.execute_script("$('.all-hidden-elements').show();");
all('.all-hidden-elements').first.click
If the hidden element is nested in a visible parent element (e.g. a hidden input inside a visible label), you can click on the parent instead. If you still want to find the input by ID, you can traverse to the parent like so:
find('#hidden_input').find(:xpath, '..').click