Problem with 3rd party javascript

[nqtien310]

Am i wrong or being drunk, but seem like in Capybara Webkit , 3rd party service ( such as Google Chart ) is unable to be loaded.
The chart renders fine in development mode, but when I try to run the spec for the page that renders the chart, it returns variable "Can't find variable: google"

Any help is highly appreciated

[nritholtz]

Could you try using :webkit_debug as a driver and pasting the output?

Also if possible, can you please extract a test case where this spec is failing?

[nqtien310]

@nritholtz , thanks for your reply, below is the example code:

scenario 'see report data of subordinates and himself' do
  visit leave_requests_overview_report_path
  expect(page).to have_content 'Content displayed after Google Chart is loaded'
end

html

javascript_include_tag 'https://www.google.com/jsapi'

javascript

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){
  $("body").html("Content displayed after Google Chart is loaded")
});

When user visits this page, the text "Content displayed after Google Chart is loaded" is supposed to be displayed in the DOM after Chart API has been loaded , and this works fine in Development mode and in Test mode using Chrome driver

But when i switch to Webkit driver, the var google doesn't exist

undefined|0|ReferenceError: Can't find variable: google

So i suspect that somehow Webkit driver unable to load the external Javascript library.

Hope it's clear

[nritholtz]

@nqtien310 A :webkit_debug output would greatly help here, since there's some still unknown variables for your spec.

Also, is this spec working in selenium-webdriver?

However, if what I believe is the problem, it could be that the scripts are getting blacklisted due to 3804dd5. If your current Capybara Webkit version >= v1.4.0, then if the requested URL or in this case the javascript, is not local, then you need to whitelist the URL.

For example in your case, you might want to add beforehand a page.driver.allow_url(www.google.com) as you should see in the STDOUT for when you are running this spec.

There is a pull request 756 for creating a configuration block to set these kind of options, however for now you can include in somewhere within your spec or as a before.

[nqtien310]

My Capybara webkit version is: 0.12.1
I tried

page.driver.allow_url('www.google.com')

unfortunately seem like allow_url is added in the later versions of 0.12.1 , i can't do an upgrade now since it might break other specs in the test suite.

I tried webkit_debug and this is the output

 Admin/Owner view Accrued Leave Report
  sign in as employee
    has permission reports_reporting_employee
      is manager
        with report data
 >> Visit
 >> 1
 >> 23
 >> http://127.0.0.1:63510/
 << ok
 << 0
 >> Visit
 >> 1
 >> 53
 >> http://127.0.0.1:63510/leave_requests/overview_report
DEPRECATION WARNING: payroll? is deprecated and will be removed from Rails 4.0. (called from only_keypay_organisation at /Users/tiennguyen/code/employment-hero/app/controllers/application_controller.rb:338)
DEPRECATION WARNING: payroll? is deprecated and will be removed from Rails 4.0. (called from _app_views_leave_requests__sub_sidebar_haml___2580098140804595192_70360916399700 at /Users/tiennguyen/code/employment-hero/app/views/leave_requests/_sub_sidebar.haml:2)
undefined|0|ReferenceError: Can't find variable: google
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 70
 >> ./descendant-or-self::*[contains(normalize-space(.), 'Accrued Leave')]
 << ok
 << 0
 >> Find
 >> 1
 >> 5
 >> /html
 << ok
 << 1
 << 1
 >> Node
 >> 2
 >> 10
 >> isAttached
 >> 1
 >> 1
 << ok
 << 4
 << true
 >> Node
 >> 2
 >> 7
 >> visible
 >> 1
 >> 1
 << ok
 << 4
 << true
 >> Node
 >> 2
 >> 10
 >> isAttached
 >> 1
 >> 1
 << ok
 << 4
 << true
 >> Node
 >> 2
 >> 4
 >> text
 >> 1
 >> 1
 << ok
 << 470
 <<
[email protected]
Help
Dashboard
Personnel
Documents
Induction
Leave Requests
Reports
Leave
Leave Overview
Leave Report
Timesheet Report
Goals
Reviews
Pay Slips
Timesheets
Tasks
Safety
Benefits
Organisation
Notifications
Home About us Contact Terms & Conditions Privacy Policy
Copyright in the documents on this site belongs to EI and they cannot be reproduced, copied or used for any purpose other than as provided in the terms and conditions on this site.
 >> Evaluate
 >> 1
 >> 13
 >> jQuery.active
 << ok
 << 1
 << 0
 >> CurrentUrl
 >> 0
 << ok
 << 53
 << http://127.0.0.1:63510/leave_requests/overview_report
 >> Reset
 >> 0
 << ok
 << 0

[jferris]

@nqtien310 that version (0.12) is a few years old, so I don't think it makes sense for us to debug issues with it. I'd give a newer version a try. If you use the latest version of Capybara, capybara-webkit, and Qt (5.x), you should run into significantly fewer issues, particularly if you're using anything interesting on the JavaScript side, like React or Google APIs.