diff --git a/app/controllers/admin/types_de_champ_controller.rb b/app/controllers/admin/types_de_champ_controller.rb
index ee3205901..912008ddb 100644
--- a/app/controllers/admin/types_de_champ_controller.rb
+++ b/app/controllers/admin/types_de_champ_controller.rb
@@ -45,4 +45,4 @@ class Admin::TypesDeChampController < AdminController
   def create_facade
     @types_de_champ_facade = AdminTypesDeChampFacades.new false, @procedure
   end
-end
\ No newline at end of file
+end
diff --git a/app/views/admin/accompagnateurs/_list_not_assign.html.haml b/app/views/admin/accompagnateurs/_list_not_assign.html.haml
index a5794d082..c0115fbbb 100644
--- a/app/views/admin/accompagnateurs/_list_not_assign.html.haml
+++ b/app/views/admin/accompagnateurs/_list_not_assign.html.haml
@@ -16,7 +16,7 @@
       %tr
         %td.col-md-11.col-lg-11{style:'padding-top: 11px; font-size:15px'}= accompagnateur.email
         %td.center
-          %a.btn.btn-success{href: "#{admin_procedure_accompagnateurs_path(procedure_id: @procedure.id, accompagnateur_id: accompagnateur.id, to: AccompagnateurService::ASSIGN)}", 'data-method' => 'put'}
+          %a.btn.btn-success.gestionnaire-affectation{href: "#{admin_procedure_accompagnateurs_path(procedure_id: @procedure.id, accompagnateur_id: accompagnateur.id, to: AccompagnateurService::ASSIGN)}", 'data-method' => 'put'}
             .fa.fa-arrow-right
 
 
diff --git a/app/views/admin/accompagnateurs/show.html.haml b/app/views/admin/accompagnateurs/show.html.haml
index e87fe13a8..07fdf1d98 100644
--- a/app/views/admin/accompagnateurs/show.html.haml
+++ b/app/views/admin/accompagnateurs/show.html.haml
@@ -19,7 +19,7 @@
               .col-md-2.col-lg-2
                 %br
                 %br
-                = f.submit 'Valider', class: 'btn btn-info', style: 'float:left'
+                = f.submit 'Valider', class: 'btn btn-info', style: 'float:left', id: 'add-gestionnaire-email'
       .col-md-6.col-lg-6
         %h3.text-success Affectés
         = smart_listing_render :accompagnateurs_assign
diff --git a/app/views/admin/gestionnaires/_informations.html.haml b/app/views/admin/gestionnaires/_informations.html.haml
index c83fd0de5..b7c9a268c 100644
--- a/app/views/admin/gestionnaires/_informations.html.haml
+++ b/app/views/admin/gestionnaires/_informations.html.haml
@@ -1,5 +1,5 @@
 -{email: 'Email*'}.each do |key, value|
   .form-group
     %h4
-      =value
-    =f.text_field key, class: 'form-control', placeholder: value
+      = value
+    = f.text_field key, class: 'form-control', placeholder: value
diff --git a/app/views/admin/gestionnaires/index.html.haml b/app/views/admin/gestionnaires/index.html.haml
index 78803f487..a6a487c30 100644
--- a/app/views/admin/gestionnaires/index.html.haml
+++ b/app/views/admin/gestionnaires/index.html.haml
@@ -12,8 +12,8 @@
       = form_for @gestionnaire, url: {controller: 'admin/gestionnaires', action: :create} do |f|
         .row
           .col-md-5.col-lg-5
-            =render partial: 'informations', locals: {f: f}
+            = render partial: 'informations', locals: {f: f}
           .col-md-2.col-lg-2
             %br
             %br
-            =f.submit 'Valider', class: 'btn btn-info', style: 'float:left'
+            = f.submit 'Valider', class: 'btn btn-info', style: 'float:left'
diff --git a/app/views/admin/pieces_justificatives/_fields.html.haml b/app/views/admin/pieces_justificatives/_fields.html.haml
index aaa552edd..f44cf396a 100644
--- a/app/views/admin/pieces_justificatives/_fields.html.haml
+++ b/app/views/admin/pieces_justificatives/_fields.html.haml
@@ -20,7 +20,7 @@
     .form-group
       %br &nbsp;
       - if ff.object.id.nil?
-        = f.submit('Ajouter la pièce', class: 'btn btn-success')
+        = f.submit('Ajouter la pièce', class: 'btn btn-success', id: 'add_piece_justificative')
       - else
         = link_to("", admin_procedure_piece_justificative_path(@procedure, ff.object.id), method: :delete, remote: true, id: "delete_type_de_piece_justificative_#{ff.object.id}", class: %w(form-control btn btn-danger fa fa-trash-o) )
 
diff --git a/app/views/admin/procedures/_informations.html.haml b/app/views/admin/procedures/_informations.html.haml
index ee462383d..04f9d9304 100644
--- a/app/views/admin/procedures/_informations.html.haml
+++ b/app/views/admin/procedures/_informations.html.haml
@@ -4,12 +4,12 @@
 -{libelle: 'Libellé*', description: 'Description*', organisation: 'Organisation', direction: 'Direction', lien_site_web: 'Lien site internet', lien_notice: 'Lien notice'}.each do |key, value|
   .form-group
     %h4
-      =value
+      = value
     - if key == :description
       = f.text_area key, rows: '6', placeholder: 'Description du projet', class: 'form-control wysihtml5'
 
     - else
-      =f.text_field key, class: 'form-control', placeholder: value
+      = f.text_field key, class: 'form-control', placeholder: value
 
 .row
   .col-md-6.col-lg-6
diff --git a/app/views/admin/procedures/_list.html.haml b/app/views/admin/procedures/_list.html.haml
index b875ad19f..96be7bd49 100644
--- a/app/views/admin/procedures/_list.html.haml
+++ b/app/views/admin/procedures/_list.html.haml
@@ -15,7 +15,7 @@
         %td.col-md-6.col-lg-6
           = link_to(procedure.libelle, "/admin/procedures/#{procedure.id}")
         - if @active_class
-          %td= link_to procedure.lien, procedure.lien
+          %td= link_to procedure.lien, procedure.lien, class: 'procedure-lien'
         %td
           = procedure.created_at_fr
         %td
diff --git a/app/views/admin/procedures/_navbar.html.haml b/app/views/admin/procedures/_navbar.html.haml
index b9a736f4f..6a673b0b2 100644
--- a/app/views/admin/procedures/_navbar.html.haml
+++ b/app/views/admin/procedures/_navbar.html.haml
@@ -1,27 +1,27 @@
 %li{ class: ('active' if active == 'Informations') }
-  = link_to('Informations', admin_procedure_path(@procedure))
+  = link_to 'Informations', admin_procedure_path(@procedure), id: 'onglet-infos'
 
 %li{ class: ('active' if active == 'Accompagnateurs') }
-  = link_to(t('dynamics.admin.procedure.onglets.accompagnateurs'), admin_procedure_accompagnateurs_path(@procedure))
+  = link_to t('dynamics.admin.procedure.onglets.accompagnateurs'), admin_procedure_accompagnateurs_path(@procedure), id: 'onglet-accompagnateurs'
 
 %li{ class: ('disabled' if @procedure.locked?) || ('active' if active == 'Description') }
-  = link_to_unless(@procedure.locked?, 'Description', edit_admin_procedure_path(@procedure)) do
-    = link_to('Description', '#')
+  = link_to_unless(@procedure.locked?, 'Description', edit_admin_procedure_path(@procedure), id: 'onglet-description') do
+    = link_to 'Description', '#', id: 'onglet-description'
 
 %li{ class: ('disabled' if @procedure.locked?) || ('active' if active == 'Champs') }
-  = link_to_unless(@procedure.locked?, 'Champs', admin_procedure_types_de_champ_path(@procedure)) do
-    = link_to('Champs', '#')
+  = link_to_unless(@procedure.locked?, 'Champs', admin_procedure_types_de_champ_path(@procedure), id: 'onglet-champs') do
+    = link_to 'Champs', '#', id: 'onglet-champs'
 
 %li{ class: ('disabled' if @procedure.locked?) || ('active' if active == 'Pieces') }
-  = link_to_unless(@procedure.locked?, 'Pièces justificatives', admin_procedure_pieces_justificatives_path(@procedure)) do
-    = link_to('Pièces justificatives', '#')
+  = link_to_unless(@procedure.locked?, 'Pièces justificatives', admin_procedure_pieces_justificatives_path(@procedure), id: 'onglet-pieces') do
+    = link_to 'Pièces justificatives', '#', id: 'onglet-pieces'
 
 %li{ class: ('disabled' if @procedure.locked?) || ('active' if active == 'Champs privés') }
-  = link_to_unless(@procedure.locked?, 'Champs privés', admin_procedure_types_de_champ_private_path(@procedure)) do
-    = link_to('Champs privés', '#')
+  = link_to_unless(@procedure.locked?, 'Champs privés', admin_procedure_types_de_champ_private_path(@procedure), id: 'onglet-private-champs') do
+    = link_to 'Champs privés', '#', id: 'onglet-private-champs'
 
 %li{ class: ('active' if active == 'E-mails') }
-  = link_to('E-mails', admin_procedure_mails_path(@procedure))
+  = link_to 'E-mails', admin_procedure_mails_path(@procedure), id: 'onglet-emails'
 
 %li{ class: ('active' if active == 'Prévisualisation'), style: 'float:right' }
-  = link_to('Prévisualisation', admin_procedure_previsualisation_path(@procedure), {style: 'font-style: italic;'})
\ No newline at end of file
+  = link_to 'Prévisualisation', admin_procedure_previsualisation_path(@procedure), id: 'onglet-preview'
diff --git a/app/views/admin/procedures/index.html.haml b/app/views/admin/procedures/index.html.haml
index ec374c914..926815f51 100644
--- a/app/views/admin/procedures/index.html.haml
+++ b/app/views/admin/procedures/index.html.haml
@@ -7,10 +7,8 @@
           %div.carret-down
           Procédures
         %a{href:'/admin/procedures/new'}
-          %div.col-lg-2.col-md-2.action
+          %div#new-procedure.col-lg-2.col-md-2.action
             Nouvelle
 
       %div.body
         = smart_listing_render :procedures
-
-
diff --git a/app/views/admin/procedures/new.html.haml b/app/views/admin/procedures/new.html.haml
index b798c980e..b6c555d99 100644
--- a/app/views/admin/procedures/new.html.haml
+++ b/app/views/admin/procedures/new.html.haml
@@ -4,5 +4,5 @@
 
   #procedure_new.section.section-label
     = form_for @procedure, url: {controller: 'admin/procedures', action: :create}, multipart: true do |f|
-      =render partial: 'informations', locals: {f: f}
-      =f.submit 'Valider', class: 'btn btn-info', style: 'float:right'
+      = render partial: 'informations', locals: {f: f}
+      = f.submit 'Valider', class: 'btn btn-info', id: 'save-procedure', style: 'float:right'
diff --git a/app/views/admin/procedures/show.html.haml b/app/views/admin/procedures/show.html.haml
index 664cea867..b88b0a7c7 100644
--- a/app/views/admin/procedures/show.html.haml
+++ b/app/views/admin/procedures/show.html.haml
@@ -4,11 +4,11 @@
 
     -unless @facade.procedure.published?
       - if @facade.procedure.gestionnaires.size == 0
-        %a.action_button.btn.btn-success{style:'float: right; margin-top: 10px', disabled: 'disabled', 'data-toggle' => :tooltip, title: 'Vous ne pouvez pas publier une procédure sans qu\'aucun accompagnateur ne soit affecté à celle-ci.'}
+        %a.action_button.btn.btn-success{style:'float: right; margin-top: 10px', disabled: 'disabled', 'data-toggle' => :tooltip, title: 'Vous ne pouvez pas publier une procédure sans qu\'aucun accompagnateur ne soit affecté à celle-ci.', id: 'publish-procedure'}
           %i.fa.fa-eraser
           Publier
-      -else
-        %a#publish.btn.btn-success{"data-target" => "#publishModal", "data-toggle" => "modal", :type => "button", style:'float: right; margin-top: 10px'}
+      - else
+        %a.btn.btn-success{"data-target" => "#publishModal", "data-toggle" => "modal", :type => "button", style:'float: right; margin-top: 10px', id: 'publish-procedure'}
           %i.fa.fa-eraser
           Publier
 
@@ -20,14 +20,14 @@
 
     =render partial: '/admin/procedures/modal_transfer'
 
-    -if @facade.procedure.archived?
+    - if @facade.procedure.archived?
       %a#reenable.btn.btn-small.btn-default.text-info{"data-target" => "#publishModal", "data-toggle" => "modal", :type => "button", style:'float: right; margin-top: 10px'}
         %i.fa.fa-eraser
         Réactiver
 
-      =render partial: '/admin/procedures/modal_publish'
+      = render partial: '/admin/procedures/modal_publish'
 
-    -elsif @facade.procedure.published?
+    - elsif @facade.procedure.published?
       = form_tag admin_procedure_archive_path(procedure_id: @facade.procedure.id, archive: !@facade.procedure.archived?), method: :put, style:'float: right; margin-top: 10px' do
         %button#archive.btn.btn-small.btn-default.text-info{type: :button}
           %i.fa.fa-eraser
@@ -48,12 +48,12 @@
     %div
       %h3 Lien procédure
       %div{style:'margin-left:3%'}
-        -if @facade.procedure.archived?
+        - if @facade.procedure.archived?
           %b
             Cette procédure a été archivée et n'est plus accessible par le public.
-        -elsif @facade.procedure.published?
+        - elsif @facade.procedure.published?
           = @facade.procedure.lien
-        -else
+        - else
           %b
             Cette procédure n'a pas encore été publiée et n'est donc pas accessible par le public.
 
@@ -123,5 +123,5 @@
         = javascript_include_tag "https://code.highcharts.com/highcharts.js", "chartkick"
         - if @facade.dossiers_for_pie_highchart.blank?
           Aucune statistique pour le moment
-        -else
+        - else
           =pie_chart @facade.dossiers_for_pie_highchart
diff --git a/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml b/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml
index 6e43545ce..c246b2d97 100644
--- a/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml
+++ b/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml
@@ -9,19 +9,19 @@
 %div#menu-block
   %div.split-hr-left
   #procedure_list
-    %a{:href => "#{url_for :admin_procedures_draft}"}
+    %a{:href => "#{url_for :admin_procedures_draft}", id: "draft-procedures"}
       %div.procedure_list_element{class: @draft_class}
         = "Brouillons"
         .badge.progress-bar-default
           = current_administrateur.procedures.where(published: false, archived: false).count
 
-    %a{:href => "#{url_for :admin_procedures}"}
+    %a{:href => "#{url_for :admin_procedures}", id: "active-procedures"}
       %div.procedure_list_element{class: @active_class}
         = "Actives"
         .badge.progress-bar-success
           = current_administrateur.procedures.where(published: true, archived: false).count
 
-    %a{:href => "#{url_for :admin_procedures_archived}"}
+    %a{:href => "#{url_for :admin_procedures_archived}", id: "archived-procedures"}
       %div.procedure_list_element{class: @archived_class}
         ="Archivées"
         .badge.progress-bar-purple
diff --git a/app/views/users/description/_pieces_justificatives.html.haml b/app/views/users/description/_pieces_justificatives.html.haml
index e5fb27a14..b4de00fef 100644
--- a/app/views/users/description/_pieces_justificatives.html.haml
+++ b/app/views/users/description/_pieces_justificatives.html.haml
@@ -14,7 +14,7 @@
 
   - @dossier.types_de_piece_justificative.order('order_place ASC').each do |type_de_piece_justificative|
     %tr
-      %th.col-lg-6
+      %th.col-lg-6.piece-libelle
         = type_de_piece_justificative.libelle
       %td.col-lg-5
         -if type_de_piece_justificative.api_entreprise
diff --git a/app/views/users/description/champs/_render_list_champs.html.haml b/app/views/users/description/champs/_render_list_champs.html.haml
index 3763bf52f..94bf9163f 100644
--- a/app/views/users/description/champs/_render_list_champs.html.haml
+++ b/app/views/users/description/champs/_render_list_champs.html.haml
@@ -51,4 +51,4 @@
   - unless champ.description.empty? || champ.type_champ == 'engagement'
     .row
       .col-lg-8.col-md-8{class: 'description_div', id:"description_champs_#{champ.id}"}
-        = champ.description
\ No newline at end of file
+        = champ.description
diff --git a/spec/features/admin/procedure_creation_spec.rb b/spec/features/admin/procedure_creation_spec.rb
new file mode 100644
index 000000000..49f033bc0
--- /dev/null
+++ b/spec/features/admin/procedure_creation_spec.rb
@@ -0,0 +1,101 @@
+require 'spec_helper'
+
+feature 'as an administrateur I wanna create a new procedure', js: true do
+
+  let(:administrateur) { create(:administrateur) }
+
+  before do
+    login_as administrateur, scope: :administrateur
+    visit root_path
+  end
+
+  context 'Right after sign_in I shall see all procedure states links' do
+
+    scenario 'Finding draft procedures' do
+      page.find_by_id('draft-procedures').click
+      expect(page).to have_current_path(admin_procedures_draft_path, only_path: true)
+    end
+
+    scenario 'Finding active procedures' do
+      page.find_by_id('active-procedures').click
+      expect(page).to have_current_path(admin_procedures_path, only_path: true)
+    end
+
+    scenario 'Finding archived procedures' do
+      page.find_by_id('archived-procedures').click
+      expect(page).to have_current_path(admin_procedures_archived_path, only_path: true)
+    end
+  end
+
+  context 'Creating a new procedure' do
+
+    scenario 'Finding new procedure link' do
+      page.find_by_id('new-procedure').click
+      expect(page).to have_current_path(new_admin_procedure_path, only_path: true)
+    end
+
+    scenario 'Finding save button for new procedure, libelle and description required' do
+      page.find_by_id('new-procedure').click
+      page.find_by_id('save-procedure').click
+      page.find_by_id('flash_message').visible?
+      fill_in 'procedure_libelle', with: 'libelle de la procedure'
+      page.execute_script("$('#procedure_description').data('wysihtml5').editor.setValue('description de la procedure')")
+      page.find_by_id('save-procedure').click
+      expect(page).to have_current_path(admin_procedure_types_de_champ_path(Procedure.first.id.to_s))
+    end
+  end
+
+  context 'Editing a new procedure' do
+
+    before 'Create procedure' do
+      page.find_by_id('new-procedure').click
+      fill_in 'procedure_libelle', with: 'libelle de la procedure'
+      page.execute_script("$('#procedure_description').data('wysihtml5').editor.setValue('description de la procedure')")
+      page.find_by_id('save-procedure').click
+    end
+
+    scenario 'Add champ, add file, visualize them in procedure preview' do
+      page.find_by_id('procedure_types_de_champ_attributes_0_libelle').set 'libelle de champ'
+      page.find_by_id('add_type_de_champ').click
+      page.find_by_id('procedure_types_de_champ_attributes_1_libelle')
+      expect(Procedure.first.types_de_champ.first.libelle).to eq('libelle de champ')
+
+      page.find_by_id('onglet-pieces').click
+      expect(page).to have_current_path(admin_procedure_pieces_justificatives_path(Procedure.first.id.to_s))
+      page.find_by_id('procedure_types_de_piece_justificative_attributes_0_libelle').set 'libelle de piece'
+      page.find_by_id('add_piece_justificative').click
+      page.find_by_id('procedure_types_de_piece_justificative_attributes_1_libelle')
+
+      page.find_by_id('onglet-preview').click
+      expect(page).to have_current_path(admin_procedure_previsualisation_path(Procedure.first.id.to_s))
+      expect(page.find_by_id('champs_1')['placeholder']).to eq('libelle de champ')
+      expect(page.first('.piece-libelle').text).to eq('libelle de piece')
+    end
+
+    scenario 'After adding champ and file, check impossibility to publish procedure, add accompagnateur and make publication' do
+      page.find_by_id('procedure_types_de_champ_attributes_0_libelle').set 'libelle de champ'
+      page.find_by_id('add_type_de_champ').click
+      page.find_by_id('onglet-pieces').click
+      page.find_by_id('procedure_types_de_piece_justificative_attributes_0_libelle').set 'libelle de piece'
+      page.find_by_id('add_piece_justificative').click
+
+      page.find_by_id('onglet-infos').click
+      expect(page).to have_current_path(admin_procedure_path(Procedure.first.id.to_s))
+      expect(page.find_by_id('publish-procedure')['disabled']).to eq('disabled')
+
+      page.find_by_id('onglet-accompagnateurs').click
+      expect(page).to have_current_path(admin_procedure_accompagnateurs_path(Procedure.first.id.to_s))
+      page.find_by_id('gestionnaire_email').set 'gestionnaire@apientreprise.fr'
+      page.find_by_id('add-gestionnaire-email').click
+      page.first('.gestionnaire-affectation').click
+
+      page.find_by_id('onglet-infos').click
+      expect(page).to have_selector('#publish-procedure', visible: true)
+      page.find_by_id('publish-procedure').click
+
+      expect(page.find_by_id('procedure_path')['value']).to eq('libelle_de_la_procedure')
+      page.find_by_id('publish').click
+      expect(page).to have_selector('.procedure-lien')
+    end
+  end
+end
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index d80386c74..a5bb73528 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -34,11 +34,12 @@ require 'factory_girl'
 
 require 'capybara/poltergeist'
 Capybara.javascript_driver = :poltergeist
+Capybara.ignore_hidden_elements = false
 Capybara.register_driver :poltergeist do |app|
   Capybara::Poltergeist::Driver.new(app, js_errors: true, port: 44_678 + ENV['TEST_ENV_NUMBER'].to_i, phantomjs_options: ['--proxy-type=none'], timeout: 180)
 end
 
-# ActiveSupport::Deprecation.silenced = true
+#ActiveSupport::Deprecation.silenced = true
 
 Capybara.default_max_wait_time = 1