PhantomJS (Poltergeist) does not display twitter bootstrap label element - ruby-on-rails

I am trying to click an link with twitter bootstrap label class in capybara test, however, the element is not displayed. After I remove the label class, the element is displayed and clickable.
This observation is based on using capybara's screenshot_and_open_image method when debugging the problem. Any idea for this strange behaviour?
(The page is rendered correctly in major browsers.)

PhantomJS 1.9.8 implements a pretty old browser (Safari 5ish IIRC) so it could be some kind of css issue - 2.0.0 is a much more feature complete modern browser, but has issues with file upload -- 2.0.1 (unreleased as of now) fixes the file upload issues - Try using PhantomJS 2.0.0+

Related

Unknown Format in feature testing rails capybara

I am writing capybara tests. There is a link I have in the view. When I click over the link that links open a pop-up js warning. I have configured Js. in capybara by using phantomjs and petergiest gem.
Without the requested information it's impossible to give an exact answer, but the error you are seeing means the app is requesting a non-JS response (probably HTML). This could be occurring for a couple of reasons
You're not actually running the test with a JS supporting driver. I don't see any js metadata on your scenarios so depending on how you've configured Capybara/RSpec this could by your issue. To confirm, swap from Poltergeist to using Selenium with Chrome or Firefox (non-headless while trying to debug) so you can see if the browser actually starts
You have a JS error preventing JS from running so a normal request is being made instead of XHR. This could be because you actually have a bug in your JS or because you're using Poltergeist/PhantomJS which is massively out of date in JS/CSS support. To test this, swap to using Selenium with Chrome or Firefox and look in the developer console.
Your link isn't correctly configured to make an ajax request - This is impossible to tell without the HTML of the link
Additionally, neither of the tests shown in your image are actually asserting/expecting anything so it's very unclear what exactly you're trying to test.

Why is my RSpec + Capybara test failing to render view?

I use wicked (1.3.1) (not sure if relevant) for an onboarding flow on my rails 5 app. On the last step of my onboarding process, there is an <a> link that navigates to a user#dashboard page.
This works totally fine in all browsers. For some reason that transition does not work in Capybara (rspec 3.7, rspec-rails 3.7.2, Capybara 2.14). The url changes in the automated browser to the desired route, but the page does not render any content, it retains the old view. Visually its as if someone typed in a url but did not press return, however, the controller method and view are getting touched when i debug them. They appear to return a rendering, but the value is not rendered in the browser
If i throw a sleep in my test after the <a> click, I can manually click on the url bar, press return (to navigate to the correct url) and the page will render then. But not on its own. Anyone experience this before?
I have tried changing the href to a different path to see if it is a problem with the target view/controller - it is not, happens to all of the paths I try. I have also tried different capybara drivers: :selenium, :chrome, :poltergeist. All same result!
Would love to provide more detail but i'm not sure what to show. Its a simple href and i'm not sure what could go wrong.
Cheers
EDIT:
turns out there was an error in the logs. Will update with a solution.
error:
Could not log "render_template.action_view" event. NoMethodError: undefined method `render_views?' for RSpec::ExampleGroups::LayoutsSplash::View:Class ["/Users/mitchellmeyer/.rvm/gems/ruby-2.3.1/gems/rspec-core-3.6.0/lib/rspec/core/example_group.rb:732:in `method_missing'",
The error shown in the logs is a know rspec/rspec-rails 3.6 issue - upgrading will fix that. Beyond that, the fact it works when a URL is submitted manually to the browser but not when clicking on the link indicates the link is probably being interfered with by JS. Most likely that's Turbolinks which you can disable for a given link by adding a data-turbolinks=“false” attribute to the link. If that fixes the behavior (which you state it did) then it's probable you have a JS error in one of your files. Check the developer console in the browser for any errors shown and fix them.
Since you mention Poltergeist, as a driver you tried, in your question it's possible for there to be silent errors that cause JS to fail when using it since it doesn't support anything beyond ES 5.1 so it's not really that suitable for testing modern webapps any more and I would recommend sticking to headless chrome if you need headless testing.

Why is rspec/capybara not reloading my javascript

I am trying to write some integration tests in rspec/capybara/selenium for my Rails 5 app. I have recently started testing some javascript features in the app with headless Chrome.
I struck a problem where I was unable to choose a select element on the page with capybara despite this working fine when I loaded the site manually in chrome in development environment. After some investigating I figured out that the select element was not currently visible. It is hidden when the page loads but should then be made visible immediately on loading by my javascript.
I disabled headless and paused my test with a quick and dirty sleep 60. I then looked at the javascript file in Chrome's developer tools and discovered that it has loaded an old version of the file with none of my recent changes. The file it has loaded no longer exists in my app so it must be being cached somewhere. Any ideas how this might be occurring and how I can fix it?

Rails 4, Polymer and Zurb Foundation

I'm trying to integrate Polymer components into my Rails 4 app that is already integrated with zurb foundation 5.
I have followed the instructions for the polymer-rails && polymer-paper-rails gems and included require paper-button/paper-button into my application.html.erb
My buttons.haml file looks like this:
%paper-button= "Flat Button"
What is however displayed on the ui,is Flat Button plain text and not a Polymer Flat Button.
Am I doing something wrong or is there a known issue with these Gems(Polymer and Foundation) not functioning well together?
UPDATE:
After a long struggle, I have managed to get this GEM to run without any notice/error in the Google Chrome Console. Firefox is still not happy however. It does seem to be a different issue now, since I've added platform.js into the pre-compiler. After adding platform.js to the pre-compiler, components have disappeared from the UI completely (As if no component code exists), and this only happens in Firefox.
See below a screenshot of Firebug:
Thanks.

jQuery and Safari 4.0.1 - ToggleClass effect

I am currently developing a webpage where I want to use the ToggleClass function from jQuery. I went on to the jQuery UI website, as I think this is an extension of the original jQuery.
http://jqueryui.com/demos/toggleClass/
When I click the 'Run Effect' button, nothing happens. Is it just my browser or slow computer or do any of you also get this in Safari 4.0.1 4.0 (4530.17)?
I tested in Firefox 3.0.10 and it worked, so by the looks of it, jQuery UI is not all that compatible with Safari 4.0.1 4.0 (4530.17), or just maybe their demos on their site?
Anyone care to elaborate?
Edit: sorry, was under the impression that I had 4.0.1
Windows: Safari 4.0 (530.17): Fail
That being the case, .animate() still appears to work. If your transformation isn't too complicated, you could use that as your alternative.
I had the same problem, but I knew it was my code b/c the example page at the reference you provided above worked just fine.
Check your .css. For some reason, the css
'a.filterOn:link, a.filterOn:visited{
background: green;
}'
wouldn't work in Safari, but worked just fine in FF. However, b/c these were nested inside of another element, I tried:
'#filters a.filterOn:link, #filters a.filterOn:visited{
background: green;
}'
which for some reason worked. My guess is that, if you haven't solved it yet, the problem is in the .css, not the jquery.

Resources