Using selenium for testing JavaScript elements through RSpec results in failures in other segments of the RSpec test

Trying to implement Stripe into my web application has brought me to a frustrating roadblock. Every attempt to test the "Pay with Card" button seems to be thwarted by an ElementNotFound error thrown by rspec.

Research revealed that the root cause of this issue was due to the default driver, rack_test, lacking Javascript support. To address this, I consulted some documentation at https://github.com/jnicklas/capybara#drivers and included :js => true in one of my RSpec scenarios, along with adding the selenium-webdriver gem to my gemfile.

Unfortunately, these adjustments unveiled a new hurdle. Now, during testing, I receive an error indicating an invalid username/password combination, preventing me from advancing to verify if I can successfully click the elusive button! It appears that Selenium is struggling to recognize or validate my user factory.

Frustrated gesture.

Any guidance on overcoming this would be greatly appreciated.

spec/features/user_upgrade_premium_spec.rb:

require 'rails_helper'

describe "Upgrading from Standard to Premium Plan" do
    before do
     @user = create(:user)
     visit root_path
     click_link "Sign In"
     fill_in 'Email', with: @user.email
     fill_in 'Password', with: @user.password
     click_button "Sign In"
     expect(page).to have_content "Signed in successfully."
  end

  scenario "Successful Upgrade", :js => true do
    click_link "My Account"
    click_link "Upgrade Account"

    click_button "Pay with Card"
 

Answer №1

Experiment with the script_timeout setting in the Timeouts section, along with implicit_wait and page_load. Define it on a global level and observe its impact on our current situation!!

@driver.manage.timeouts.script_timeout = 15

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

How can I extract tag values from soup text using BeautifulSoup? Also, what is the best way to iterate through a list of URLs?

I am new to web scraping using Python with BeautifulSoup and Selenium. My goal is to extract contact information, specifically emails, from a list of URLs. listOfURLs=['https://oooo.com/Number=xxxxx', 'https://oooo.com/Number/yyyyyy', ...

How to access data from a child component in a Vue 3 template

Within my project, there are three Vue components that utilize the Composite API with the setup option. My goal is to access data within a nested tree structure. The code below provides a simplified version of what I am trying to achieve. The application ...

A Vue.js component modifies one store state variable but leaves another unchanged

Currently developing a Vue 3 application that utilizes Vuex and the Composition API. Encountered an issue while working on it. A component is supposed to display elements based on the state of two store variables. One is an array, and the other is a bool ...

What is the best way to select a navigation bar option with Selenium?

As a newcomer to Selenium, I have been working on automating the login process for a specific [website]. However, I am encountering an issue where the element.click() function in Selenium is not working when attempting to click on the Login button. Instead ...

Conceal all div elements except for displaying the initial two

Can an entire div be hidden with only the first 2 entities visible? <div class="inline-edit-col"> <span class="title inline-edit-categories-label">Brands</span> <ul class="cat-checklist product_brand-checklist"> < ...

Using the angular function directly is not possible without using setTimeout

My goal is to maintain the functionality of the back button in our application. We have implemented a back button that, when clicked, should preserve all the values selected or filled out by the user in the form. This task is being carried out in an MVC fr ...

What is the best way to set up a server in React using Express or HTTP?

I am currently in the process of developing a web application using react js. In order to create a server for my client within the project, I have decided to utilize either express or http. Here is the code snippet that I attempted: import React from " ...

Switch up the query parameter in the current Vue router route

I am working on appending attribute parameters to a URL using the following code snippet: this.$router.push({ query: Object.assign({}, this.$route.query, { attributes: this.encodedAttributes() }) }); However, I have noticed that when I call this method fo ...

Having trouble implementing connect-busboy in my Node.js application

Currently, I'm trying to implement image uploads in my node.js application using connect-busboy. Here's the code snippet I've written based on the reference guide https://www.npmjs.org/package/connect-busboy: router.post('/upload&apos ...

Guide on extracting a string from an Instagram page using Selenium in a programmable way

Upon successfully logging into my Instagram account using Selenium, I navigate to https://www.instagram.com/example/?__a=1, a JSON page filled with various user information such as: {"logging_page_id":"profilePage_11288110","show_suggested_profiles":false ...

Using SVG files as properties in React from a data.js file

I have a website where I store my content in a data.js file and pass it to my components using props. Everything is working correctly, except for my .svg files. When I try to display them, they do not appear. However, if I change the extension of the image ...

What is the purpose of implementing asynchronous loading for JavaScript in my webpack setup?

I am facing difficulties with handling unusual codes. I am trying to add some query parameters using $.ajaxPrefilter in all jQuery ajax requests. I came across the following code snippet which seems to ensure synchronous loading order, but in my entry.js ...

Creating a Custom Rule for Checkbox Validation using jQuery

Can the jQuery Validation plugin be used to validate custom values on checkboxes, rather than just True or False? For instance: <input id="test" type="checkbox" name="test" value="something"> I am struggling to find a method that can check if &apo ...

Sorry, the server cannot be reached at the moment. Please try again later

Recently delving into Node.js and just getting started on using MongoDB. Currently establishing a connection with my MongoDB Cluster that I have set up. const dbURI = 'mongodb+srv://testuser:<a href="/cdn-cgi/l/email-protection" class="__cf_email_ ...

Having trouble getting the Facebook like button to display on my website using an iframe in the markup

I gave it my all to try and get it to work, but unfortunately, I was unsuccessful. This is the approach I took. First, I followed the instructions provided on https://developers.facebook.com/docs/plugins/like-button. Next, I copied and pasted the iframe ...

View cards from a restricted Trello board without requiring visitors to have a Trello account or to authorize through a popup

I have a company with ongoing projects listed on a private Trello board. We are interested in showcasing these projects on our website in real-time by connecting to the board. After implementing this example, I can successfully retrieve and display the ca ...

Create 3000 unique squares using a procedural generation method

Looking to build a widget that consists of 3000 squares, but creating them manually would be extremely time-consuming. Does anyone have advice on how to efficiently generate the class .square 3000 times? Additionally, I need to have the ability to customiz ...

Can you explain the process of implementing a conditional render with three parts in React?

Currently, I am attempting to implement a conditional render but encountering some issues. Is it achievable? location: `${props.off_campus_location ? ( `${props.off_campus_location}` ) : ( `${props.campus_location.name}` ) : ( `${props.location_type}` )}` ...

Eliminate duplicated partial objects within a nested array of objects in TypeScript/JavaScript

I'm dealing with a nested array of objects structured like this: const nestedArray = [ [{ id: 1 }, { id: 2 }, { id: 3 }], [{ id: 1 }, { id: 2 }], [{ id: 4 }, { id: 5 }, { id: 6 }], ] In the case where objects with id 1 and 2 are already grou ...

The simplest method to make HTML elements inaccessible to the Simple HTML Dom Parser in PHP

Imagine a scenario where a basic web application is running and utilizing Simple HTML Dom Parser. The code snippet below demonstrates this: <?php include('simple_html_dom.php'); $html = file_get_html('http://someurl.com'); ...