teamcapybara / capybara

Acceptance test framework for web applications

Home Page:http://teamcapybara.github.io/capybara/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

app.lvh.me took too long to respond - Capybara 3.40.0 (but works with 3.39.2)

jibai31 opened this issue · comments

Meta

Capybara Version: 3.39.2 -> OK
Capybara Version: 3.40.0 -> ERROR

Driver Information (and browser if relevant): selenium_chrome_headless

# spec/support/capybara.rb
Capybara.configure do |config|
  config.always_include_port = true
  config.javascript_driver = :selenium_chrome_headless
end

Capybara.app_host = "http://app.lvh.me:#{Capybara.server_port}"
Capybara.server = :puma, { Silent: true }
Capybara.default_max_wait_time = 5

Expected Behavior

The test succeeds.

Actual Behavior

Capybara::ElementNotFound:
       Unable to find css "#signin"

It's not found because the Rails App cannot load in the browser (app.lvh.me took too long to respond).

Steps to reproduce

The issue started after upgrading capybara from 3.39.2 to 3.40.0.

The test does not matter (I put one below for reference). The first test of my js: true test suite will always fail. The Rails app cannot load in the browser. If I save_and_open_page, I can see an HTML error page saying:

app.lvh.me took too long to respond

The following tests run normally. But they would fail with the same error if I ran them individually, one by one.

Very simple test:

visit new_user_session_path
within('#signin') do
  fill_in 'user_email', with: user.email
  fill_in 'user_password', with: user.password
  click_button 'Se connecter'
end

For now I downgraded to 3.39.2, but I would like to understand what happens to keep Capybara up to date.

Here's the HTML if I run save_and_open_page just before the within

<body class="neterror" style="font-family: system-ui, sans-serif; font-size: 75%" jstcache="0">
  <div id="main-frame-error" class="interstitial-wrapper" jstcache="0">
    <div id="main-content" jstcache="0">
      <div class="icon icon-generic" jstcache="0"></div>
      <div id="main-message" jstcache="0">
        <h1 jstcache="0">
          <span jsselect="heading" jsvalues=".innerHTML:msg" jstcache="9">This site can’t be reached</span>
          <a id="error-information-button" class="hidden" onclick="toggleErrorInformationPopup();" jstcache="0"></a>
        </h1>
        <p jsselect="summary" jsvalues=".innerHTML:msg" jstcache="1"><strong jscontent="hostName" jstcache="22">app.lvh.me</strong> took too long to respond.</p>
        <!--The suggestion list and error code are normally presented inline,
          in which case error-information-popup-* divs have no effect. When
          error-information-popup-container has the use-popup-container class, this
          information is provided in a popup instead.-->
        <div id="error-information-popup-container" jstcache="0">
          <div id="error-information-popup" jstcache="0">
            <div id="error-information-popup-box" jstcache="0">
              <div id="error-information-popup-content" jstcache="0">
                <div id="suggestions-list" style="" jsdisplay="(suggestionsSummaryList &amp;&amp; suggestionsSummaryList.length)" jstcache="16">
                  <p jsvalues=".innerHTML:suggestionsSummaryListHeader" jstcache="18">Try:</p>
                  <ul jsvalues=".className:suggestionsSummaryList.length == 1 ? 'single-suggestion' : ''" jstcache="19" class="">
                    <li jsselect="suggestionsSummaryList" jsvalues=".innerHTML:summary" jstcache="21" jsinstance="0">Checking the connection</li><li jsselect="suggestionsSummaryList" jsvalues=".innerHTML:summary" jstcache="21" jsinstance="*1"><a href="#buttons" onclick="toggleHelpBox()" jstcache="0">Checking the proxy and the firewall</a></li>
                  </ul>
                </div>
                <div class="error-code" jscontent="errorCode" jstcache="17">ERR_TIMED_OUT</div>
                <p id="error-information-popup-close" jstcache="0">
                  <a class="link-button" jscontent="closeDescriptionPopup" onclick="toggleErrorInformationPopup();" jstcache="20">null</a>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div id="download-links-wrapper" class="hidden" jstcache="0">
          <div id="download-link-wrapper" jstcache="0">
            <a id="download-link" class="link-button" onclick="downloadButtonClick()" jsselect="downloadButton" jscontent="msg" jsvalues=".disabledText:disabledMsg" jstcache="6" style="display: none;">
            </a>
          </div>
          <div id="download-link-clicked-wrapper" class="hidden" jstcache="0">
            <div id="download-link-clicked" class="link-button" jsselect="downloadButton" jscontent="disabledMsg" jstcache="11" style="display: none;">
            </div>
          </div>
        </div>
        <div id="save-page-for-later-button" class="hidden" jstcache="0">
          <a class="link-button" onclick="savePageLaterClick()" jsselect="savePageLater" jscontent="savePageMsg" jstcache="10" style="display: none;">
          </a>
        </div>
        <div id="cancel-save-page-button" class="hidden" onclick="cancelSavePageClick()" jsselect="savePageLater" jsvalues=".innerHTML:cancelMsg" jstcache="4" style="display: none;">
        </div>
        <div id="offline-content-list" class="list-hidden" hidden="" jstcache="0">
          <div id="offline-content-list-visibility-card" onclick="toggleOfflineContentListVisibility(true)" jstcache="0">
            <div id="offline-content-list-title" jsselect="offlineContentList" jscontent="title" jstcache="12" style="display: none;">
            </div>
            <div jstcache="0">
              <div id="offline-content-list-show-text" jsselect="offlineContentList" jscontent="showText" jstcache="14" style="display: none;">
              </div>
              <div id="offline-content-list-hide-text" jsselect="offlineContentList" jscontent="hideText" jstcache="15" style="display: none;">
              </div>
            </div>
          </div>
          <div id="offline-content-suggestions" jstcache="0"></div>
          <div id="offline-content-list-action" jstcache="0">
            <a class="link-button" onclick="launchDownloadsPage()" jsselect="offlineContentList" jscontent="actionText" jstcache="13" style="display: none;">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div id="buttons" class="nav-wrapper suggested-right" jstcache="0">
      <div id="control-buttons" jstcache="0">
        <button id="reload-button" class="blue-button text-button" onclick="reloadButtonClick(this.url);" jsselect="reloadButton" jsvalues=".url:reloadUrl" jscontent="msg" jstcache="5">Reload</button>
        <button id="download-button" class="blue-button text-button" onclick="downloadButtonClick()" jsselect="downloadButton" jscontent="msg" jsvalues=".disabledText:disabledMsg" jstcache="6" style="display: none;">
        </button>
      </div>
      <button id="details-button" class="secondary-button text-button small-link" onclick="detailsButtonClick(); toggleHelpBox()" jscontent="details" jsdisplay="(suggestionsDetails &amp;&amp; suggestionsDetails.length > 0) || diagnose" jsvalues=".detailsText:details; .hideDetailsText:hideDetails;" jstcache="2">Details</button>
    </div>
    <div id="details" class="hidden" jstcache="0">
      <div class="suggestions" jsselect="suggestionsDetails" jstcache="3" jsinstance="0">
        <div class="suggestion-header" jsvalues=".innerHTML:header" jstcache="7">Check your Internet connection</div>
        <div class="suggestion-body" jsvalues=".innerHTML:body" jstcache="8">Check any cables and reboot any routers, modems or other network
    devices you may be using.</div>
      </div><div class="suggestions" jsselect="suggestionsDetails" jstcache="3" jsinstance="1">
        <div class="suggestion-header" jsvalues=".innerHTML:header" jstcache="7">Allow Chrome to access the network in your firewall or antivirus
          settings.</div>
        <div class="suggestion-body" jsvalues=".innerHTML:body" jstcache="8">If it is already listed as a program allowed to access the network, try
      removing it from the list and adding it again.</div>
      </div><div class="suggestions" jsselect="suggestionsDetails" jstcache="3" jsinstance="*2">
        <div class="suggestion-header" jsvalues=".innerHTML:header" jstcache="7">If you use a proxy server…</div>
        <div class="suggestion-body" jsvalues=".innerHTML:body" jstcache="8">Check your proxy settings or contact your network administrator to
      make sure that the proxy server is working. If you don't believe you should
      be using a proxy server:
      Go to
          Applications &gt; System Preferences &gt; Network &gt; Advanced &gt; Proxies
          and deselect any proxies that have been selected.</div>
      </div>
    </div>
  </div>
  <div id="sub-frame-error" jstcache="0">
    <!-- Show details when hovering over the icon, in case the details are
         hidden because they're too large. -->
    <div class="icon" jstcache="0"></div>
    <div id="sub-frame-error-details" jsselect="summary" jsvalues=".innerHTML:msg" jstcache="1"><strong jscontent="hostName" jstcache="22">app.lvh.me</strong> took too long to respond.</div>
  </div>
<script jstcache="0">var loadTimeDataRaw = {"details":"Details","errorCode":"ERR_TIMED_OUT","fontfamily":"system-ui, sans-serif","fontfamilyMd":"system-ui, sans-serif","fontsize":"75%","heading":{"hostName":"app.lvh.me","msg":"This site can’t be reached"},"hideDetails":"Hide details","iconClass":"icon-generic","language":"en","reloadButton":{"msg":"Reload","reloadUrl":"http://app.lvh.me:58387/connexion"},"suggestionsDetails":[{"body":"Check any cables and reboot any routers, modems or other network\n    devices you may be using.","header":"Check your Internet connection"},{"body":"If it is already listed as a program allowed to access the network, try\n      removing it from the list and adding it again.","header":"Allow Chrome to access the network in your firewall or antivirus\n          settings."},{"advancedTitle":"+ Show advanced settings","body":"Check your proxy settings or contact your network administrator to\n      make sure that the proxy server is working. If you don't believe you should\n      be using a proxy server:\n      Go to\n          Applications > System Preferences > Network > Advanced > Proxies\n          and deselect any proxies that have been selected.","header":"If you use a proxy server…","proxyTitle":"Change proxy settings…","settingsTitle":"Settings"}],"suggestionsSummaryList":[{"summary":"Checking the connection"},{"summary":"\u003Ca href=\"#buttons\" onclick=\"toggleHelpBox()\">Checking the proxy and the firewall\u003C/a>"}],"suggestionsSummaryListHeader":"Try:","summary":{"failedUrl":"http://app.lvh.me:58387/connexion","hostName":"app.lvh.me","msg":"\u003Cstrong jscontent=\"hostName\">\u003C/strong> took too long to respond."},"textdirection":"ltr","title":"app.lvh.me"};</script></body></html>

This may be your environment not being compatible with the chrome --headless=new option. Register your own driver without that option and try that instead. Other than that look in your apps logs for any errors. Capybara just starts your app, it really doesn't have any control over how long your app takes to become accessible.