What are the methods of examining a scenario when JavaScript is enabled versus when it is disabled?

My application now includes ajaxy table sorting, and I am looking to implement cucumber tests that cover the functionality with and without JavaScript support.

Using capybara, I know that by using the @javascript flag, it will execute the test with a javascript driver. Is there a way to run the scenario twice - once with javascript enabled and once without?

Perhaps something like this...

  @test-both-javascript-and-non-javascript
  Scenario: Table Search
    When I enter "search" as "Jonathan"
    And I click "Search"
    Then I should be able to view users matching the search criteria:
      | Jonathan | Smith | <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7471707f6a767f705e7b7360767976703b767a78">[email protected]</a> | active |
javascriptruby-on-railsseleniumcucumbercapybara

Answer №1

When using @javascript, it switches drivers to one that can handle javascript on your pages. Omitting @javascript does not imply testing "when javascript is not supported" or "without javascript support." For example, a test involving 

Then I should see "Javascript is not supported"
on a page with 
<noscript>Javascript is not supported.</noscript>
will fail when using the default driver (i.e., no @javascript tag).

If you truly need to test scenarios with javascript not supported, you can set up a new driver with javascript disabled and use a different tag (e.g., @nojavascript) to switch to that driver in a Before('@nojavascript') block and revert back to the default in the After('@nojavascript') block. This way, you can create scenarios specifically for that tag and repeat them for cases when you need to verify when javascript is disabled.

Answer №2

Does the behavior remain consistent even when JavaScript is turned off? If it does, why utilize JavaScript at all? ;-)

I have a hunch that there may be some slight differences in behavior depending on whether JavaScript is enabled or disabled. It would be beneficial to outline two scenarios describing how the behavior differs in each case. For example, does the JavaScript version provide suggestions as you type?

Answer №3

In my opinion, it is not advisable to continuously enable and disable Javascript support during a single run.

Instead, I suggest tagging the scenarios that require (or do not require) javascript and running them separately. It may be necessary to repeat some scenarios to account for various behaviors, but the benefit is that you are only duplicating the feature, not the implementation.

Furthermore, consider executing these scenarios with different drivers to consolidate your suite of tests into a unified platform.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to eliminate HTML encoding from a string in Angular 4?

Looking for a simple solution to my problem. I have two strings that look like this: htmlStr = "&lt;strong&gt;News Body&lt;/strong&gt;"; htmlStr1 = "<strong>News Body2</strong>"; To display these strings on a website, I am usi ...

javascripthtmlangular

Creating an array of objects data is a breeze with Vue.js

I have an array of data containing selected items, and I need to extract the IDs from this array into a new array so that I can send only the IDs to the back-end. Sample Code method toggleSelection(rows) { console.log('this.multipleSelection : &a ...

javascripttypescriptvue.jsvuejs2

Video playback disabled on hover in Chrome browser

I have added videos to a search results page. When the user hovers over the video, I want to show a preview of it in a separate container and start playing the video. $(".videoSearchResults video").mouseenter(function () { var container = document.cre ...

javascriptjqueryhtmlvideo

What steps can I take to make sure that the asynchronous initialization in the Angular service constructor has finished before proceeding?

Hello experts, can you advise on ensuring that asynchronous initialization in the service constructor is completed before calling other functions within the class? constructor() { var sock = new SockJS(this._chatUrl); this.stompClient = Stomp.ov ...

javascriptangulartypescriptasynchronousrxjs5

Leverage the power of Vuex within your Nuxt application

I successfully obtained and displayed data using Nuxt's Fetch API, but now I'm looking to transition to using Vuex instead. store/index.js: import Axios from 'axios' export const getters = { isAuthenticated: (state) => { retu ...

javascriptvue.jsnuxt.js

Implement responsive data tables by setting a specific class for hiding columns

Having trouble assigning a specific class name to individual columns in datatables? It seems that when columns are hidden using the responsive extension, the desired class is not applied. Looking for a solution or workaround. Check out this example from D ...

javascriptjqueryhtmlcssdatatables

Implement a React Component as a unique OverlayView within the Google Maps application

Utilizing the Google Maps JavaScript API V3, I have created a map with clustered and draggable map markers. Instead of relying on React libraries that interact with the google maps API, we chose to build our own solution due to limitations in drag function ...

javascriptreactjsgoogle-mapsgoogle-maps-api-3

Troubleshooting: EJ Syncfusion React Scheduler Issues

I have recently implemented a syncfusion calendar for managing appointments in my ReactJs project, following the code examples from this link . After editing the JS and CSS codes (available at ), I encountered an issue with the CSS not displaying correctl ...

javascriptcssreactjssyncfusionej2-syncfusion

Implementing a controller's method within a jQuery/ajax URL in Rails: A step-by-step guide

My goal is to use jQuery/Ajax to create and save data in the cart model by calling the controller's method in the Ajax URL. Here's the jQuery/Ajax script: $(document).ready(function() { $('.add-cart-product').click(function() { va ...

javascriptjqueryruby-on-railsrubyajax

What is the method for inserting JSON data into a select element's options?

Below is the HTML code snippet provided: <html> <head> <link rel="stylesheet" type="text/css" href="CarInfoStyle.css"> </head> <script src="CarInfoJavascript.js"></script> <body> <div class="search ...

javascripthtmljsondynamic-arrays

Is it possible to retrieve the user's input value within a custom filter? I am attempting to access the user's input number either from the controller or

I am a beginner in AngularJS and I am attempting to filter data based on temperature by subtracting the user input (x) from the currentTemp variable. However, I am unsure how to access the user input value in a custom filter. This approach may work for now ...

javascriptangularjsangularjs-scopeangularjs-controllerangularjs-filter

Is there a way to make a button on a single div only affect that specific div

I have a PHP query that echoes a div for each row in the table. I want the div to slide up and then, when the user clicks the "read more" button, the div slides down. However, since it is echoed in a loop, all the divs have the same IDs and classes. I wo ...

javascriptjqueryhtmlcss

Selenium for Web Scraping with Python

Check out this website for scraping: here Highlighted item to scrape - Section 1 (HTML snippet below) Highlighted item to scrape - Section 2 For this code, a selenium driver is needed to interact with the link After selecting "name:myForm", only 95% ...

pythonseleniumselenium-webdriverbeautifulsoup

What could be causing my CSS and Bootstrap.css styles not to be implemented on my webpage?

While working on my Ruby on Rails application, I am trying to customize the design to resemble (which can be downloaded from ). However, I am facing an issue where the style sheets are not being applied. I have moved the style sheets from the bootstrap/c ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Using Angular to share JSON data efficiently between controllers

Greetings everyone, I am a beginner in Angular and not very skilled with JavaScript. The issue I'm facing is that although this setup successfully fetches the JSON data, whenever I modify certain object properties, they revert back to their original s ...

javascriptjsonangularjsservicecontroller

What is the most straightforward method to access these four buttons?

Looking to create 4 interactive buttons with a unique behavior. When clicked, the chosen button will change its background image while the other 3 buttons retain their original background image unless hovered over by the user. Additionally, hovering over a ...

javascriptjqueryhtmlcss

Colorful D3.js heatmap display

Hello, I am currently working on incorporating a color scale into my heat map using the d3.schemeRdYlBu color scheme. However, I am facing challenges in getting it to work properly as it only displays black at the moment. While I have also implemented a ...

javascripthtmld3.js

Chrome headless has been initialized and cannot accept any further commands

I am currently utilizing Travis CI to test my webpage using selenium. Below is the content of my .travis.yml file: sudo: false language: node_js node_js: - node addons: chrome: stable install: - npm ci script: - google-chrome-stable --headle ...

node.jsseleniumgoogle-chromenpmtravis-ci

What possible reasons could cause an API request to result in an empty array being returned?

I recently encountered an issue when calling this API using npm request. The response I receive is an empty array, despite having loaded request, defined the content value at the top of the page (not displayed here), and modified the API key. Surprisingly, ...

javascriptnode.jsnpm

Issues encountered with loading rewarded video ad due to varying errors specific to each device

I've been encountering issues while trying to display rewarded video ads in my app. Every time I attempt to load the ad, it immediately goes to the "failed to load ad" method. On my phone, the error message reads: W/Ads: Fail to instantiate adapter ...

javascriptjavaandroidandroid-studioads