...a package functionality from window e.g. $(...).datepicker() from your dev console or any other javascript within the application. Background By default yarn will create a folder node_modules that includes...
...to window, to have access to jQuery from our dev console or any other javascript within the application. app/webpack/packs/main.js window.$ = jQuery window.jQuery = jQuery Now this will not allow us to...
...redirect with GET as expected. This is also what Unpoly or the Rails unobtrusive Javascript adapter does when you annotate a link with data-method="PATCH...
Jasmine is a great way to unit test your JavaScript components without writing an expensive end-to-end test for every small requirement. After we integrated Jasmine into a Rails...
...Our primary concern here is users uploading .html or .svg files that can run JavaScript and possibly hijack another user's session. A secondary concern is that malicious users can...
...prompt will have been closed already and can not be brought back. Also, any JavaScript code placed after the alert will be executed. Automatically closing user prompts happens when performing...
...E.g. console.log("Current string:", string, "Current number:", 12) Your output can have hyperlinks to Javascript objects E.g. console.log("Check out the current %o, it's great", location) Displaying tabular data...
...leading to validation errors and thus user confusion. We can fix all that with JavaScript: const element = document.querySelector('#your-input') // Number inputs allow incrementing/decrementing with arrow keys, and support exponential...
...sometimes your application will explode with an error outside your control. Two examples: A JavaScript library references a source map in its build, but forgets to package the source map...
...jQuery cache even exists. After all jQuery could simply attach event handlers to the Javascript object that represents the DOM element. The reason for the existence of the jQuery cache...
...is that old versions of Internet Explorer could not garbage-collect Javascript objects with circular references. For instance, the following object graph could not be reclaimed by old IE's...
...the required controller actions with @model.nested_model.build. If you are adding fields dynamically by using JavaScript, then the form helper method should take care of this: new_nested_record = f.object.send(nested...
timemachine.js allows you to mock the client's time by monkey-patching into Javascript core classes. We use timemachine.js in combination with the Timecop gem to synchronize the local...
...we see that Timecop is mocking the time: - if defined?(Timecop) && Timecop.top_stack_item = javascript_include_tag "timemachine.js" :javascript timemachine.config({ dateString: #{Time.now.to_json}, tick: true }) Warning timemachine.js will mock the...
...language settings. For example, German users will see 1,23 for . Values in the JavaScript API or when submitting forms to the server will always use a point as decimal...
...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...
...disabled text field is not possible (copy&paste does not work) Firefox cancels any JavaScript events at a fieldset[disabled] readonly fields post to the server get focus
...the matchers fail. This helps when browser state changes between expectations, e.g. by async JavaScript that mutates the DOM tree while you're making multiple observations. Custom matchers must be...
extract_css: true 3. Change stylesheet_link_tag to stylesheet_pack_tag and javascript_include_tag to javascript_pack_tag 4. Replace image_tag with image_pack_tag if...
...the modules in other files, like the app/webpack/stylesheets/boostrap.sass imports the bootstrap stylesheet. For old Javascript libraries you need to expose jQuery to the window object. Here is an example how...
...knowing what to look for. When coming from jQuery, also see the card on JavaScript without jQuery. This card includes a link to You Don't Need jQuery, which summarizes...
...most of the alternatives in native Javascript implementation to jQuery methods...
...you understand "impossible" behavior of your tests. When you run a Rack::Test (non-Javascript) test with Capybara, there is a single process in play. It runs both your test...
...and the server responding to the user interactions scripted by your test. A Selenium (Javascript) test has a lot more moving parts: One process runs your test script. This is...
...app, browser: :chrome, options: options) end Before do Capybara.current_driver = :rack_test end Before('@javascript') do Capybara.current_driver = :selenium
...scrolling. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user. elem.addEventListener('touchstart', fn, { passive: true...
...event on window. It will be emitted for all uncaught errors in the current JavaScript VM: window.addEventListener('error', function(event) { console.log("Got an uncaught error: ", event.error) }) Tip Testing tools like...
...markdown from user input, an attacker might be able to use this to inject javascript code into the source code of your page. The linked github page is a collection...
...common markdown XSS payloads which is handy for writing tests. Producing arbitrary links: [Basic](javascript:alert('Basic')) [Local Storage](javascript:alert(JSON.stringify(localStorage))) [CaseInsensitive](JaVaScRiPt:alert('CaseInsensitive')) [URL](javascript://www.google.com...
...are not written to input fields with fill_in. A workaround is to use javascript / jquery to change the contents of an input field. Use the following code or add...
...unknown reasons. field = find_field(locator) id = field[:id].presence if id execute_script <<~JAVASCRIPT var field = document.querySelector('##{id}'); field.value = #{text.to_json}; field.dispatchEvent(new Event('input')); field.dispatchEvent(new Event('change...
Collection of useful tools in the Chrome JavaScript console. Make the whole page editable This is not special to Chrome, but still a clever thing: document.body.contentEditable=true Taking time