thoughtbot / capybara-webkit

A Capybara driver for headless WebKit to test JavaScript web apps
https://thoughtbot.com/open-source
MIT License
1.97k stars 427 forks source link

JavaScript file never gets requested #939

Closed davidpdrsn closed 6 years ago

davidpdrsn commented 8 years ago

I'm having issues with javascript never being executed. I have tried putting <script> tags directly into the view which works just fine. When I look in the log it doesn't seem like application.js gets requested.

The test log looks like this:

Started GET "/foo" for 127.0.0.1 at 2016-08-24 11:38:35 +0200
Processing by WelcomeController#foo as HTML
  Rendering layouts/application.haml
  Rendering welcome/foo.haml within layouts/application
  Rendered welcome/foo.haml within layouts/application (2.1ms)
  Rendered layouts/application.haml (7.4ms)
Completed 200 OK in 16ms (Views: 14.8ms | ActiveRecord: 0.0ms)

I tried generating a new application and added rspec and capybara-webkit. The logs for this app looks like so

Started GET "/" for 127.0.0.1 at 2016-08-24 11:41:18 +0200
Processing by WelcomeController#index as HTML
  Rendering welcome/index.html.erb within layouts/application
  Rendered welcome/index.html.erb within layouts/application (6.0ms)
Completed 200 OK in 145ms (Views: 135.6ms | ActiveRecord: 0.0ms)
Started GET "/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css" for 127.0.0.1 at 2016-08-24 11:41:18 +0200
Started GET "/assets/application-1ba018a46ee45d11061cd6af070bbca44ce00909d024df9648ad6a8ac1cb08fd.js" for 127.0.0.1 at 2016-08-24 11:41:18 +0200

So seems like there is something within my app that makes capybara-webkit not request the javascript file. I am using webmock but I have configured it to allow local requests

WebMock.disable_net_connect!(allow_localhost: true)

I'm running Rails 5.0.0.1 on MacOS El Capitan with qt55 installed. You can find the source for my app here. I initially generated the app using suspenders.

Any idea what the problem might be?

davidpdrsn commented 8 years ago

The debug output is:

Finished "EnableLogging()" with response "Success()"
Wrote response true ""
Received "SetTimeout(-1)"
Started "SetTimeout(-1)"
Finished "SetTimeout(-1)" with response "Success()"
Wrote response true ""
Received "Visit(http://127.0.0.1:52303/foo)"
Started "Visit(http://127.0.0.1:52303/foo)"
Load started
"Visit(http://127.0.0.1:52303/foo)" started page load
Started request to "http://127.0.0.1:52303/foo"
Finished "Visit(http://127.0.0.1:52303/foo)" with response "Success()"
Received 200 from "http://127.0.0.1:52303/foo"
Started request to "http://127.0.0.1:52303/assets/application-1be9b23f41df37761d8c2f2cbd507aa254fe4e4456f0
77e97b664d985b4baac1.css"
Started request to "http://127.0.0.1:52303/assets/application-fb062b1f46cce97255aaaec5700bdcb1c923701802d8
121011042395d1dddcfe.js"
Received 200 from "http://127.0.0.1:52303/assets/application-1be9b23f41df37761d8c2f2cbd507aa254fe4e4456f07
7e97b664d985b4baac1.css"
Received 200 from "http://127.0.0.1:52303/assets/application-fb062b1f46cce97255aaaec5700bdcb1c923701802d81
21011042395d1dddcfe.js"
Page finished with true
Load finished
Page load from command finished
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(1)"
Wrote response true "1"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(2)"
Wrote response true "2"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(3)"
Wrote response true "3"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(4)"
Wrote response true "4"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(5)"
Wrote response true "5"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(6)"
Wrote response true "6"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(7)"
Wrote response true "7"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(8)"
Wrote response true "8"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(9)"
Wrote response true "9"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(10)"
Wrote response true "10"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(11)"
Wrote response true "11"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(12)"
Wrote response true "12"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(13)"
Wrote response true "13"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(14)"
Wrote response true "14"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(15)"
Wrote response true "15"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(16)"
Wrote response true "16"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(17)"
Wrote response true "17"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(18)"
Wrote response true "18"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(19)"
Wrote response true "19"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(20)"
Wrote response true "20"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(21)"
Wrote response true "21"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(22)"
Wrote response true "22"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(23)"
Wrote response true "23"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(24)"
Wrote response true "24"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(25)"
Wrote response true "25"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(26)"
Wrote response true "26"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(27)"
Wrote response true "27"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(28)"
Wrote response true "28"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(29)"
Wrote response true "29"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(30)"
Wrote response true "30"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(31)"
Wrote response true "31"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(32)"
Wrote response true "32"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(33)"
Wrote response true "33"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(34)"
Wrote response true "34"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(35)"
Wrote response true "35"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(36)"
Wrote response true "36"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(37)"
Wrote response true "37"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "FindXpath(/html)"
Started "FindXpath(/html)"
Finished "FindXpath(/html)" with response "Success(38)"
Wrote response true "38"
Received "Node.visible"
Started "Node.visible"
Finished "Node.visible" with response "Success(true)"
Wrote response true "true"
Received "Node.text"
Started "Node.text"
Finished "Node.text" with response "Success()"
Wrote response true ""
Received "Reset()"
Started "Reset()"
Finished "Reset()" with response "Success()"
Wrote response true ""
Received "EnableLogging()"
Started "EnableLogging()"
Finished "EnableLogging()" with response "Success()"
Wrote response true ""
Received "SetTimeout(-1)"
Started "SetTimeout(-1)"
Finished "SetTimeout(-1)" with response "Success()"
Wrote response true ""

So does look like it receives the javascript but just doesn't execute it.

jferris commented 8 years ago

When I look in the log it doesn't seem like application.js gets requested.

Your configuration may result in asset requests not showing up in the Rails log. You can see in the debug output that it does make a request to the compiled application.js:

Started request to "http://127.0.0.1:52303/assets/application-fb062b1f46cce97255aaaec5700bdcb1c923701802d8121011042395d1dddcfe.js"
Received 200 from "http://127.0.0.1:52303/assets/application-fb062b1f46cce97255aaaec5700bdcb1c923701802d8121011042395d1dddcfe.js"

What's the exact problem you're experiencing? Are you seeing a test failure? If so, could you paste the failure and the failing test?

davidpdrsn commented 8 years ago

Yeah I'm seeing some test failures that are unexpected. Everything is fine in the browser.

I have created a minimal test case that fails.

require "rails_helper"

feature "running js" do
  # OK
  scenario "rendering directly from controller action", :js do
    visit "/from_action"
    expect(page).to have_content "Hello World"
  end

  # OK
  scenario "from inline script", :js do
    visit "/from_inline_script"
    expect(page).to have_content "Hello World"
  end

  # Fails
  scenario "from application.js", :js do
    visit "/from_application_js"
    expect(page).to have_content "Hello World"
  end
end

Only the third test fails so it seems like the issue is only with JS coming from application.js

Here are some links if you wanna take a look

twalpole commented 6 years ago

The logs showed this was making JS requests. Odds are it was due to an error in the JS which only affected things when all the JS assets were concatenated into one file in the test environment (doesn't happen in the dev enviornment), or use of JS not supported by the version of Qt used.