Embed a script tag in Capybara and pause execution until an asynchronous task is finished

Having trouble injecting a script in Capybara. Take a look at the code below:

Capybara.register_driver :poltergeist do |app|
      Capybara::Poltergeist::Driver.new(app, :phantomjs_options => ['--debug=no', '--ignore-ssl-errors=yes'], :js_errors => false)
    end

    Capybara.configure do |c|
      c.javascript_driver = :poltergeist
      c.default_driver = :poltergeist
      c.app_host = "http://www.google.com"
      c.default_wait_time = 120
    end

    Capybara.current_session.driver.headers = {
      'User-Agent' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36',
      'Accept' => 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'
    }
    visit('/')
    Capybara.current_session.driver.execute_script("alert('Working!');")
    sleep(1)
    system('rm /tmp/screenshot.png')
    Capybara.current_session.driver.save_screenshot('/tmp/screenshot.png')

When injecting this script, it should make some ajax calls and change the dom. However, after taking a snapshot, no changes are visible on the page. Even adding a simple alert doesn't show up in the snapshot. What could be causing this issue?

javascriptruby-on-railsseleniumcapybarapoltergeist

Answer №1

Do you really think http://somescript.js is a suitable URL for your script src? It seems highly unlikely that this would resolve to a local script.

Answer №2

When taking a screenshot, be aware that alerts in modal dialogs will not be captured.

This is because PhantomJS, being a headless browser, does not render the entire page when generating a screenshot. Instead, only the webpage content is saved without any additional modal windows. As a result, alert modals will not show up in PhantomJS screenshots.

Therefore, it is not possible to capture an alert in a screenshot. However, you can still access the context of the alert using the onAlert handler:

page.onAlert = function(msg) {
  console.log('ALERT: ' + msg);
};

Alternatively, if you are using Capybara with a javascript driver like Selenium:

alert = page.driver.browser.switch_to.alert
alertText = alert.text
alert.accept

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

A Ruby model saves controller values in a MYSQL database with additional characters included

In my controller method, the issue arises with the schedule = params[:message][:schedule] input receiving a value like ["","2"] which is being stored as a string in a MySQL database. When using Schedule.create(execution_time: scheduled_time, lists: "lists ...

mysqlruby-on-railsruby

I'm looking for a way to implement a jQuery-style initialization pattern using TypeScript - how can I

My library utilizes a jQuery-like initialization pattern, along with some specific requirements for the types it should accept and return: function JQueryInitializer ( selector /*: string | INSTANCE_OF_JQUERY*/ ) { if ( selector.__jquery ) return select ...

javascriptjquerytypescript

Getting parameters from a URL with a React frontend and Express backend: A step-by-step guide

I am currently developing a react application with an express backend. I am in the process of integrating socket io chat functionality into the frontend. Everything is functioning properly, but I am now looking to extract parameters from the URL in order t ...

javascriptreactjsexpressreact-routerexpress-router

What is the best way to retrieve data from app.post within react.js?

//server.js app.post('/trip', function(req,res){ var params = "something"; getResult(params).then((db)=>{ // I am trying to access the variable called "db" in my App.js(React) file, but I am unsure of how to do so. res.s ...

javascriptnode.jsreactjsexpress

Tips for chaining actions in Javascript using ActionSequence, LegacyActionSequence, or a similar method

I encountered an error while attempting to execute this example, despite trying both ActionSequence and LegacyActionSequence. I am in search of the correct method to chain actions. My attempts to find a solution in resources such as https://seleniumhq.git ...

javascriptnode.jsseleniumselenium-webdriver

Is there a way for me to send a form containing pre-existing data from a different page?

Seeking advice: I realize that utilizing jQuery's ajax function may be the simplest approach, however I am facing an issue with the form field names. The var_dump below displays the typical values submitted by the form using test data. It appears that ...

javascriptphphtmlforms

Will it function properly if it is (NULL)?

Here's the code snippet I'm currently using: <html> <head> <link type="text/css" rel="stylesheet" href="html.css" /> <script type="text/javascript"> function getName() { if(name) alert("Did y ...

javascript

display a screen based on conditions using conditional rendering techniques

As I work on the onboarding screen, my goal is to navigate to a different screen when the last item is displayed or clicked instead of just logging "last item" on the console. Here's the code snippet: import React,{useState,useRef} from 'react&a ...

javascriptandroidreact-nativeexpo

Temporarily withhold the execution of useEffect until useSelector successfully fetches data from the Redux store within a React

I have a functional React component called Tasks_1. Initially, I retrieve the userId from the Redux store, which is working successfully. After obtaining the userId from the Redux store, I want to use it in a useEffect hook to fetch data from the backend. ...

javascriptreactjsreact-nativereact-redux

Issue with Bootstrap 5 Dropdown not toggling back

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Admin Panel</title> <link rel="stylesheet" href=&q ...

javascriptdrop-down-menubootstrap-5

Anticipated outcome for absent callbacks in module API implementation

I am seeking advice on the expected behavior when developing a Node module API. It is becoming complicated in my module implementation to check if the caller has provided a callback before calling it. I am starting to believe that it may be the user's ...

javascriptnode.js

Successful response from WordPress AJAX

I am currently working on setting up a contact form in WordPress using wp_mail along with Ajax. The email functionality is working fine, but I am facing some issues with the success response from Ajax. After sending the email, I want to display a message ...

javascriptjqueryajaxwordpress

How can I transfer data from two queries to Jade using Node.js (Express.js)?

I have a database with two tables - one for storing user information and another for managing friendship connections: setting up a friend list in mysql My goal is to create a profile page using Jade, specifically profile.jade: - each user in users ...

javascriptmysqlnode.jsexpresspug

Utilize Vue3 to categorize items and showcase the quantities from the product list

I successfully counted every repeated element in my array, now I just need to display only one of each product along with its quantity. Here is the current progress: https://i.sstatic.net/SBm64.png I have a function that I'm exporting from a file n ...

javascriptarraysvue.jsobjectvuejs3

Creating a stroke in SVG using JavaScript

I created a code that inserts a line into my svg page when I press a button Here is the html snippet: <body> <svg width="500" height="400"> </svg> <button id="btn1">Append text</button> </body> Below is the script us ...

javascripthtmlsvg

What is the process for assigning specific tags to specific items within an array?

As I navigate through a list of students, I am encountering an issue with my tag functionality. Currently, when a student adds a tag to their container, it is being added to every student's tags instead of just the intended student. How can I modify t ...

javascriptreactjsjsx

Guide to creating an asynchronous function

Starting my first react website and needing assistance with writing an asynchronous JavaScript function. I am currently working on uploading user input files to firebase storage and then making a post request to the API in order to store the data in the da ...

javascriptreactjsasynchronousasync-awaitasynchronous-javascript

Unable to target an element using selenium

Whenever I attempt to click on an element and then send keys to it, I encounter a "cannot focus on element" error. I attempted using action chains, but unfortunately, that did not solve the issue. Although I can successfully click on the element, as soon ...

pythonseleniumselenium-webdriverpycharmselenium-chromedriver

Bandcamp API sales data retrieval feature

Looking for assistance with a call to the Bandcamp API. Every time I request /http://bandcamp.com/api/sales/1/sales_report/, I receive this message in the response: /"error_message":"JSON parse error: 757: unexpected token at ''/ ...

javascriptjsonapigoogle-apps-script

What is the best way to arrange the elements of a dropdown list in reverse order?

I have the following code snippet used to retrieve data from a database and display it in a dropdown list: @{ int m = 1; foreach (var item in Model.MessagesList) { if (@item.receiverUserId == userId) { <li> <a class=&qu ...

javascriptjqueryasp.net