Question

当我运行我的测试时，它失败如下：测试错误消息：

Failure/Error: page.should have_content 'Email'
     Capybara::Ambiguous:
       Ambiguous match, found 2 elements matching xpath "/html"

我在网上搜索了如何构建haml文件，我认为它是正确的。

这是我的application.html.haml

!!! 5
%html
%head
  %title Hello
  = stylesheet_link_tag    'application', media: 'all'
  = javascript_include_tag 'application'
  = csrf_meta_tags

%body
  = yield

这是：new.html.haml

%h1 Sign Up
= render partial: 'form'

这是我的部分形式：_form.html.haml

= form_for @user do |f|
  - if @user.errors.any?
    %div.error_messages
      %h2 Form is invalid
      %ul
        - @user.errors.full_messages.each do |message|
          %li= message
  = f.label :full_name, 'Full Name:'
  = f.text_field :full_name
  %br

  = f.label :email, 'Email:'
  = f.text_field :email
  %br

  = f.label :password, 'Password:'
  = f.text_field :password
  %br

  = f.label :password_confirmation, 'Confirm Password:'
  = f.text_field :password_confirmation
  %br

  = f.submit 'Sign Up'

从视图源页面可以看到，结束标记位于打开标记旁边的顶部，而不是页面末尾。这就是为什么Capybara抱怨的。

<!DOCTYPE html>
<html></html>
<head>
  <title>Hello</title>
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" />
  <script src="/assets/jquery.js?body=1"></script>
  <script src="/assets/jquery_ujs.js?body=1"></script>
  <script src="/assets/turbolinks.js?body=1"></script>
  <script src="/assets/application.js?body=1"></script>
</head>
<body>
  <h1>Sign Up</h1>
  <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="n6sYrcT+Z7LtaH1AwT6h5/knsdMFRzwDTXAWZh6VyfI=" /></div>  <label for="user_full_name">Full Name:</label>
    <input id="user_full_name" name="user[full_name]" type="text" />
    <br>
    <label for="user_email">Email:</label>
    <input id="user_email" name="user[email]" type="text" />
    <br>
    <label for="user_password">Password:</label>
    <input id="user_password" name="user[password]" type="text" />
    <br>
    <label for="user_password_confirmation">Confirm Password:</label>
    <input id="user_password_confirmation" name="user[password_confirmation]" type="text" />
    <br>
    <input name="commit" type="submit" value="Sign Up" />
  </form>
</body>

我在这里遗漏了什么吗？

Answer 1

所有内容都应该在HAML html标记之后缩进。此缩进使HAML知道如何嵌套标记。因此，application.html.haml应为：

!!! 5
%html
  %head
    %title Hello
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
    = csrf_meta_tags

  %body
    = yield

Answer 2

您需要缩进html代码的所有内容：

!!! 5
%html
  %head
    %title Hello
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
    = csrf_meta_tags

  %body
    = yield

你所做的不同：

!!! 5
%html
%head
  ...

这告诉haml呈现没有嵌入内容的html标记，然后是带有嵌入内容的head标记。缩进html标记内的所有内容可以解决此问题。

为什么我的haml页面在源视图中被破坏了？

2 个答案: