Search code examples
htmlrubycucumbercapybarax-tag

Cucumber/Capybara testing with x-tag


I'm testing the app I'm creating with Cucumber/Capybara. It looks like it doesn't see the x-tag I am using. It looks like Cucumber doesn't render the page properly with the x-tag. Is there a way to solve this? I think this is the problem because when I put the input field outside of the xlogin.js and into the body or the div with id=login it does work.

Body:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/jquery/jqueryMobile/jquery.mobile-1.2.0.css" />
    <link rel="stylesheet" href="components/login/login.css"/>
    <link rel="stylesheet" href="master.css"/>
</head>
<body>
    <div id="login" data-role="page" class="ui-tass-page">
        <x-login></x-login>
    </div>

    <div id="main" data-role="page" class="ui-tass-page">
    </div>


    <script src="js/x-tag.js"></script>
    <script src="components/login/login.js"></script>
    <script src="js/jquery/jquery-1.8.2.js"></script>
    <script src="js/jquery/jqueryMobile/jquery.mobile-1.2.0.js"></script>
</body>

Feature:

Feature: log in
    In order to get access to the app's functionality
    As a user
    I want to log in

Scenario: happy flow
    Given I am on the index.html#login page
    Then I should be on the index.html page
    When I give my username
    And I give my password
    And I click on login
    Then I should go to the main page
    And the username and password are saved

steps:

When /^I give my username$/ do
  fill_in 'username', :with => '[email protected]'
end

Given /^I am on the (.*?) page$/ do |uri|
  visit uri
  response = page.driver.response
  response.status.should eql 200
  response.status.should_not eql 401
end 

Then /^I should be on the (.*?) page$/ do |uri|
  current_url.include?( uri ).should be true
end

output:

 Scenario: happy flow                      # features/login.feature:6
    Given I am on the index.html#login page # features/step_definitions/generic_steps.rb:1
    Then I should be on the index.html page # features/step_definitions/generic_steps.rb:8
    When I give my username                 # features/step_definitions/login_steps.rb:1
      cannot fill in, no text field, text area or password field with id, name, or label 'username' found (Capybara::ElementNotFound)
      (eval):2:in `fill_in'
      ./features/step_definitions/login_steps.rb:2:in `/^I give my username$/'
      features/login.feature:9:in `When I give my username'

Solution

  • I solved the issue. What went wrong:

    1: I was using the default driver in Capybara. This driver can't handle Javascript.

    Solution: using the driver Selenium

      Capybara.javascript_driver = :selenium
    

    2: I was using a Ubuntu server through ssh. So the browser Selenium was using (firefox) didn't work.

    Solution: I switched to desktop Ubuntu and used vnc to connect to it.