Navigating through the browser history in a cucumber feature using selenium
In order to navigate through the browser history. you can manipulate the window.history object via javascript like follows:
When /^I go back in the browser history$/ do
page.evaluate_script('window.history.back()')
end
For further functions of the window and history objects check out this link.
An improved version of this step is now part of our gem spreewald on Github.
Type text into Javascript prompt dialogs in Capybara/Selenium
Spreewald gives you steps like these:
When I enter "text" into the browser dialog
Also see Accept or deny JavaScript confirmation dialogs in Capybara/Selenium.
Scroll a textarea to a given line with jQuery
You can use this code:
function scrollToLine($textarea, lineNumber) {
var lineHeight = parseInt($textarea.css('line-height'));
$textarea.scrollTop(lineNumber * lineHeight);
}
Some caveats about this code:
- Your textarea needs to have a line-height in Pixels.
- The code will scroll to the line number in the text area, not the line number of the original text. These will differ if any lines wrap at the edge of the textarea.
Also see our solution for [scrolling a textarea to a given position with jQuery](htt...
Convert primitive Ruby structures into Javascript
Controller responses often include Javascript code that contains values from Ruby variables. E.g. you want to call a Javascript function foo(...)
with the argument stored in the Ruby variable @foo
. You can do this by using ERB tags (<%= ruby_expression %>
) or, in Haml, interpolation syntax (#{ruby_expression}
).
In any case you will take care of proper quoting and escaping of quotes, line feeds, etc. A convenient way to do this is to use Object#json
, which is defined for Ruby strings, numb...
Google Analytics: Changing the tracked URL path
By default, Google Analytics tracks the current URL for every request. Sometimes you will want to track another URL instead, for example:
- When an application URL contains a secret (e.g. an access token)
- When you want to track multiple URLs under the same bucket
- When you want to track interactions that don't have a corresponding URL + request (e.g. a Javascript button or a PDF download)
Luckily the Analytics code snippet allows you to freely choose what path is being tracked. Simple change this:
ga('send', 'pageview');
......
zClip :: jQuery ZeroClipboard
zClip is a lightweight jQuery "copy to clipboard" plugin built using the popular Zero Clipboard library. This plugin uses an invisible Adobe Flash movie that is fully compatible with Flash Player 10 and below.
fnando/i18n-js
A small library to provide the Rails I18n translations in Javascript clients.
CodeMirror
CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.
Tabs in Textarea Plugin for jQuery
This is a demo of the "Tabby" Javascript jQuery plugin to use tabs in regular textareas to make them suitable for in-browser coding of languages like HTML, CSS, Javascript, or your favorite server-side language. The idea is to be able to use a press of the TAB button or SHIFT+TAB to indent or outdent your code.
Change how Capybara sees or ignores hidden elements
Short version
- Capybara has a global option (
Capybara.ignore_hidden_elements
) that determines whether Capybara sees or ignores hidden elements. - Prefer not to change this global option, and use the
:visible
option when callingpage.find(...)
. This way the behavior is only changed for this onefind
and your step doesn't have confusing side effects. - Every Capybara driver has its own notion of "visibility".
Long version
Capybara has an option (Capybara.ignore_hidden_elements
) to configure the default...
Debugging Google Analytics
If you need to debug Analytics tracking, consider using this chrome extension. It will replace the tracking code with a debug version that prints debugging info to the JavaScript console.
TodoMVC - A common learning application for popular JavaScript MV* frameworks
Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps. Backbone, Spine, Ember (SproutCore 2.0), JavaScriptMVC... the list of new and stable solutions goes on and on, but just how do you decide on which to use in a sea of so many options?
To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
Solutions look and feel the same...
Moment.js - A lightweight javascript date library
A lightweight javascript date library for parsing, manipulating, and formatting dates.
High-level Javascript frameworks: Backbone vs. Ember vs. Knockout
This is a very general introduction to MV* Javascript frameworks. This card won't tell you anything new if you are already familiar with the products mentioned in the title.
As web applications move farther into the client, Javascript frameworks have sprung up that operate on a higher level of abstraction than DOM manipulation frameworks like jQuery and Prototype. Such high-level frameworks typically offer support for client-side view rendering, routing, data bindings, etc. This is useful, and when you write a moderately complex Javascript ...
turn.js - The page flip effect for HTML5
turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.
I tested it successfully on Chrome, Firefox and IE9.
Flexible overflow handling with CSS and JavaScript
You can use text-overflow
to truncate a text using CSS but it does not fit fancy requirements.
Here is a hack for the special case where you want to truncate one of two strings in one line that can both vary in length, while fully keeping one of them. See this example screenshot where we never want to show an ellipsis for the distance:
 are fully loaded.
The following snippets show how you can do this with plain JavaScript, jquery or prototype ([dom ready ...
jQuery UI Bootstrap
Twitter's Bootstrap CSS blueprint as a jQuery UI theme. Even if you don't want to use Bootstrap as a CSS framework, this theme looks better than jQuery UI's default theme.
Date or datetime picker for touch devices
jQuery UI's date picker and date time picker doesn't work on touch interfaces.
Solution 1: Use Mobiscroll
Another way is to detect touch devices and for those devices use the Date and DateTime picker from Mobiscroll instead:
if (isTouchDevice()) {
$('.date_picker').scroller();
} else...
Detect mobile or touch devices on both server and client
Although it's tempting flirt with detecting mobile/touch devices with CSS media queries or Javascript feature detection alone, this approach will be painful when heavily customizing a feature beyond just tweaking the looks. Eventually you will want want the same detection logic to be available on both server and client side.
This card shows how to get a Ruby method touch_device?
for your Rails views and a method TouchDevice.isPresent()
for your Javascripts.
Note that we are detecting touch devices by grepping the user agent, and the ke...
How to click hidden submit buttons with Selenium
In your Cucumber features you can't really click hidden elements when using Selenium (it does work for a plain Webrat scenario, though).
Unfortunately you need to hack around it, like this:
When /^I press the hidden "([^\"]+)" submit button$/ do |label|
page.evaluate_script <<-JS
$('input[type=submit][value="#{label}"]').show().click();
JS
end
If your button is nested into a container that is hidden this will not do the trick. You need a more complex method to also show surrounding containers:
When /^I pre...