diff --git a/modules/ve-mw/tests/browser/features/cite.feature b/modules/ve-mw/tests/browser/features/cite.feature
new file mode 100644
index 0000000000..384cb5fdad
--- /dev/null
+++ b/modules/ve-mw/tests/browser/features/cite.feature
@@ -0,0 +1,44 @@
+@chrome @en.wikipedia.beta.wmflabs.org @firefox @login @test2.wikipedia.org
+Feature: VisualEditor Cite
+
+  Background:
+    Given I go to the "Cite VisualEditor Test" page with content "Cite VisualEditor Test"
+    And I click in the editable part
+    And I click the Cite button
+    And I can see the Cite User Interface
+
+  Scenario: Website
+    When I click Website
+      And I fill in the first textarea with "http://en.wikipedia.org/"
+      And I fill in the second textarea with "Website Source title"
+      And I fill in the third textarea with "Website Source date 28 July 2014"
+      And I fill in the fourth textarea with "28 July 2014"
+      And I fill in the fifth textarea with "Website title"
+      And the Website input field titles are in the correct order
+      And I click Add more information
+      And I see Show more fields
+      And I type in a field name "New website field"
+      And I fill in the new field "New website field contents"
+      And I click Insert Citation
+      And I click Save page
+      And I click Links Review your changes
+    Then diff view should show the Website citation added
+
+  Scenario: Book
+    When I click Book
+      And I fill in the first textarea with "Book title"
+      And I fill in the second textarea with "Book author last name"
+      And I fill in the third textarea with "Book author first name"
+      And I fill in the fourth textarea with "Book publisher"
+      And I fill in the fifth textarea with "2014"
+      And I fill in the sixth textarea with "9780743273565"
+      And I fill in the seventh textarea with "Location of publication"
+      And I fill in the eighth textarea with "123"
+      And the Book input field titles are in the correct order
+      And I click Book Add more information
+      And I type in a field name "New book field"
+      And I fill in the new field "New book field contents"
+      And I click Insert Citation
+      And I click Save page
+      And I click Links Review your changes
+    Then diff view should show the Book citation added
\ No newline at end of file
diff --git a/modules/ve-mw/tests/browser/features/step_definitions/cite_steps.rb b/modules/ve-mw/tests/browser/features/step_definitions/cite_steps.rb
new file mode 100644
index 0000000000..f62d7a562b
--- /dev/null
+++ b/modules/ve-mw/tests/browser/features/step_definitions/cite_steps.rb
@@ -0,0 +1,98 @@
+Given(/^I click the Cite button$/) do
+  on(VisualEditorPage).cite_button_element.when_present.click
+end
+
+Given(/^I can see the Cite User Interface$/) do
+  on(VisualEditorPage).cite_select_element.when_present
+end
+
+When(/^I click Add more information$/) do
+  on(VisualEditorPage).cite_add_more_information_button_element.when_present.click
+end
+
+When(/^I click Book$/) do
+  on(VisualEditorPage).cite_book_element.when_present.click
+end
+
+When(/^I click Book Add more information$/) do
+  on(VisualEditorPage).book_add_more_information_button_element.when_present.click
+end
+
+When(/^I click Insert Citation$/) do
+  on(VisualEditorPage).insert_citation_element.when_present.click
+end
+
+When(/^I click Website$/) do
+  on(VisualEditorPage).cite_website_element.when_present.click
+end
+
+When(/^I fill in the first textarea with "(.*?)"$/) do |first_string|
+  on(VisualEditorPage).cite_first_textarea_element.when_present.send_keys first_string
+end
+
+When(/^I fill in the second textarea with "(.*?)"$/) do |second_string|
+  on(VisualEditorPage).cite_second_textarea_element.when_present.send_keys second_string
+end
+
+When(/^I fill in the third textarea with "(.*?)"$/) do |third_string|
+  on(VisualEditorPage).cite_third_textarea_element.when_present.send_keys third_string
+end
+
+When(/^I fill in the fourth textarea with "(.*?)"$/) do |fourth_string|
+  on(VisualEditorPage).cite_fourth_textarea_element.when_present.send_keys fourth_string
+end
+
+When(/^I fill in the fifth textarea with "(.*?)"$/) do |fifth_string|
+  on(VisualEditorPage).cite_fifth_textarea_element.when_present.send_keys fifth_string
+end
+
+When(/^I fill in the sixth textarea with "(.*?)"$/) do |sixth_string|
+  on(VisualEditorPage).cite_sixth_textarea_element.when_present.send_keys sixth_string
+end
+
+When(/^I fill in the seventh textarea with "(.*?)"$/) do |seventh_string|
+  on(VisualEditorPage).cite_seventh_textarea_element.when_present.send_keys seventh_string
+end
+
+When(/^I fill in the eighth textarea with "(.*?)"$/) do |eighth_string|
+  on(VisualEditorPage).cite_eighth_textarea_element.when_present.send_keys eighth_string
+end
+
+When(/^I fill in the new field "(.*?)"$/) do |new_field_text|
+  on(VisualEditorPage).cite_new_field_instance_element.when_present.click
+  on(VisualEditorPage).cite_new_website_field_element.when_present.send_keys new_field_text
+end
+
+When(/^I see Show more fields$/) do
+  on(VisualEditorPage).cite_show_more_fields_element.when_present
+end
+
+When(/^I type in a field name "(.*?)"$/) do |custom_field|
+  on(VisualEditorPage).cite_custom_field_name_element.when_present.send_keys custom_field
+end
+
+When(/^the Book input field titles are in the correct order$/) do
+  on(VisualEditorPage).cite_ui.should match /Title.+Last name.+First name.+Publisher.+Year of publication.+ISBN.+Location of publication.+Pages/m
+end
+
+When(/^the Website input field titles are in the correct order$/) do
+  on(VisualEditorPage).cite_ui.should match /URL.+Source title.+Source date.+URL access date.+Website title/m
+end
+
+Then(/^diff view should show the Book citation added$/) do
+  on(VisualEditorPage) do |page|
+    page.wait_until(10) do
+      page.links_diff_view.include? "Cite VisualEditor Test"
+    end
+    page.links_diff_view.should match Regexp.escape("<ref>{{Cite book|title = Book title|last = Book author last name|first = Book author first name|publisher = Book publisher|year = 2014|isbn = 9780743273565New book field contents|location = Location of publication|pages = 123|New book field = }}</ref>Cite VisualEditor Test")
+  end
+end
+
+Then(/^diff view should show the Website citation added$/) do
+  on(VisualEditorPage) do |page|
+    page.wait_until(10) do
+      page.links_diff_view.include? "Cite VisualEditor Test"
+    end
+    page.links_diff_view.should match Regexp.escape("<ref>{{Cite web|url = http://en.wikipedia.org/|title = Website Source title|date = Website Source date 28 July 2014|accessdate = 28 July 2014|website = Website title|New website field = New website field contents}}</ref>Cite VisualEditor Test")
+  end
+end
\ No newline at end of file
diff --git a/modules/ve-mw/tests/browser/features/support/pages/visual_editor_page.rb b/modules/ve-mw/tests/browser/features/support/pages/visual_editor_page.rb
index ba5c175ff2..bf896cf6cf 100644
--- a/modules/ve-mw/tests/browser/features/support/pages/visual_editor_page.rb
+++ b/modules/ve-mw/tests/browser/features/support/pages/visual_editor_page.rb
@@ -4,6 +4,10 @@ class VisualEditorPage
   include URL
   page_url URL.url("User:#{ENV['MEDIAWIKI_USER']}/#{ENV['BROWSER']}?vehidebetadialog=true&veaction=edit")
   span(:bullet_number_selector, class: "oo-ui-iconedElement-icon oo-ui-icon-bullet-list")
+  span(:cite_button, text: "Cite")
+  div(:cite_select, css: "div.oo-ui-widget:nth-child(5) > div:nth-child(2)")
+  a(:cite_book, css: ".oo-ui-tool-name-cite-book > a:nth-child(1)")
+  span(:cite_website, css: ".oo-ui-icon-ref-cite-web")
   div(:container_disabled, class: "oo-ui-widget oo-ui-widget-disabled oo-ui-flaggableElement-constructive oo-ui-.oo-ui-buttonedElement-framed")
   div(:content, class: "ve-ce-branchNode")
   span(:decrease_indentation, class: "oo-ui-iconedElement-icon oo-ui-icon-outdent-list")
@@ -82,7 +86,25 @@ class VisualEditorPage
 
   in_iframe(index: 0) do |frame|
     a(:beta_warning, title: "Close", frame: frame)
+    a(:cite_add_more_information_button, css: ".ve-ui-mwParameterPage-more a", index: 4, frame: frame)
+    a(:book_add_more_information_button, css: ".ve-ui-mwParameterPage-more a", index: 7, frame: frame)
+    text_field(:cite_custom_field_name, css: ".oo-ui-textInputWidget-decorated > input:nth-child(1)", frame: frame)
+    li(:cite_new_field_instance , class: "oo-ui-widget oo-ui-widget-enabled oo-ui-optionWidget ve-ui-mwParameterResultWidget oo-ui-labeledElement", frame: frame)
+    text_area(:cite_new_website_field, css: "div.oo-ui-layout:nth-child(7) > div:nth-child(3) > div:nth-child(1) > textarea:nth-child(1)", frame: frame)
+    div(:cite_show_more_fields, class: "ve-ui-mwMoreParametersResultWidget-label", frame: frame)
+    div(:cite_ui, class: "oo-ui-window-body", frame: frame)
+
+    text_area(:cite_first_textarea, index: 0, frame: frame)
+    text_area(:cite_second_textarea, index: 1, frame: frame)
+    text_area(:cite_third_textarea, index: 2, frame: frame)
+    text_area(:cite_fourth_textarea, index: 3, frame: frame)
+    text_area(:cite_fifth_textarea, index: 4, frame: frame)
+    text_area(:cite_sixth_textarea, index: 5, frame: frame)
+    text_area(:cite_seventh_textarea, index: 6, frame: frame)
+    text_area(:cite_eighth_textarea, index: 7, frame: frame)
+
     div(:content_box, class: "ve-ce-documentNode ve-ce-branchNode", frame: frame)
+    span(:insert_citation, text: "Insert citation", frame: frame)
     span(:links_done, text: "Done", frame: frame)
     text_field(:link_textfield, index: 0, frame: frame)
     span(:another_save_page, class: "oo-ui-labeledElement-label", text: "Save page", frame: frame)