Initial setup for Multimedia Viewer browser tests and first basic e2e test.

Did some clean-up for Cucumber tags and code conventions.

Change-Id: Ifc954f60a50c41211043493fd64c2dcfa64848ff
Mingle: Multimedia card #100
Bug: 60049

tests/browser/Gemfile

@@ -0,0 +1,6 @@
+#ruby=ruby-2.1.0
+#ruby-gemset=MultimediaViewer
+
+source "https://rubygems.org"
+
+gem "mediawiki-selenium"

tests/browser/Gemfile.lock

@@ -0,0 +1,63 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    builder (3.2.2)
+    childprocess (0.3.9)
+      ffi (~> 1.0, >= 1.0.11)
+    chunky_png (1.2.9)
+    cucumber (1.3.10)
+      builder (>= 2.1.2)
+      diff-lcs (>= 1.1.3)
+      gherkin (~> 2.12)
+      multi_json (>= 1.7.5, < 2.0)
+      multi_test (>= 0.0.2)
+    data_magic (0.16.1)
+      faker (>= 1.1.2)
+      yml_reader (>= 0.2)
+    diff-lcs (1.2.5)
+    faker (1.2.0)
+      i18n (~> 0.5)
+    ffi (1.9.3)
+    gherkin (2.12.2)
+      multi_json (~> 1.3)
+    i18n (0.6.9)
+    json (1.8.1)
+    mediawiki-selenium (0.1.15)
+      cucumber
+      json
+      net-http-persistent
+      page-object
+      rest-client
+      rspec-expectations
+      syntax
+    mime-types (2.0)
+    multi_json (1.8.2)
+    multi_test (0.0.3)
+    net-http-persistent (2.9)
+    page-object (0.9.4)
+      page_navigation (>= 0.8)
+      selenium-webdriver (>= 2.37.0)
+      watir-webdriver (>= 0.6.4)
+    page_navigation (0.9)
+      data_magic (>= 0.14)
+    rest-client (1.6.7)
+      mime-types (>= 1.16)
+    rspec-expectations (2.14.4)
+      diff-lcs (>= 1.1.3, < 2.0)
+    rubyzip (1.1.0)
+    selenium-webdriver (2.39.0)
+      childprocess (>= 0.2.5)
+      multi_json (~> 1.0)
+      rubyzip (~> 1.0)
+      websocket (~> 1.0.4)
+    syntax (1.2.0)
+    watir-webdriver (0.6.4)
+      selenium-webdriver (>= 2.18.0)
+    websocket (1.0.7)
+    yml_reader (0.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  mediawiki-selenium

tests/browser/config/config.yml

@@ -0,0 +1,36 @@
+mediawiki_username: Selenium_user
+
+chrome:
+  name: chrome
+  platform: Linux
+  version:
+
+firefox:
+  name: firefox
+  platform: Linux
+  version: 25
+
+internet_explorer_6:
+  name: internet_explorer
+  platform: Windows XP
+  version: 6
+
+internet_explorer_7:
+  name: internet_explorer
+  platform: Windows XP
+  version: 7
+
+internet_explorer_8:
+  name: internet_explorer
+  platform: Windows XP
+  version: 8
+
+internet_explorer_9:
+  name: internet_explorer
+  platform: Windows 7
+  version: 9
+
+internet_explorer_10:
+  name: internet_explorer
+  platform: Windows 8
+  version: 10

tests/browser/config/cucumber.yml

@@ -0,0 +1,2 @@
+ci: --format Cucumber::Formatter::Sauce --out reports/junit
+default: --format progress

tests/browser/features/basic_mmv_navigation.feature

@@ -0,0 +1,25 @@
+@en.wikipedia.beta.wmflabs.org
+Feature: Basic Multimedia Viewer navigation
+
+  NOTE: This test should be run against '/Lightbox_demo' to work correctly
+
+  Original acceptance criteria:
+  1) Open MMV
+  2) Check metadata and picture are there
+  3) Move to next image
+  4) Check corresponding metadata and picture are there
+  5) Move to the previous image
+  6) Check corresponding metadata and picture are there
+  7) Close MV and make sure we go back to article.
+
+  Scenario: Multimedia Viewer (MMV)
+    Given I am logged in
+    And I am at a wiki article with at least two embedded pictures
+    When I click on the first image in the article
+    Then the image metadata and the image itself should be there
+    When I click the next arrow
+    Then the image and metadata of the next image should appear
+    When I click the previous arrow
+    Then the image and metadata of the previous image should appear
+    When I close MMV
+    Then I should be navigated back to the original wiki article

tests/browser/features/step_definitions/basic_mmv_navigation_steps.rb

@@ -0,0 +1,96 @@
+Given(/^I am at a wiki article with at least two embedded pictures$/) do
+  visit(LightboxDemoPage)
+  on(LightboxDemoPage).image1_in_article_element.should be_visible
+end
+
+Given(/^I am logged in$/) do
+  visit(LoginPage).login_with(ENV["MEDIAWIKI_USER"], ENV["MEDIAWIKI_PASSWORD"])
+end
+
+When(/^I click on the first image in the article$/) do
+  on(LightboxDemoPage) do |page|
+    page.image1_in_article
+  end
+end
+
+When(/^I click the next arrow$/) do
+  on(LightboxDemoPage) do |page|
+    page.next_image()
+  end
+end
+
+When(/^I click the previous arrow$/) do
+  on(LightboxDemoPage) do |page|
+    page.previous_image()
+  end
+end
+
+When(/^I close MMV$/) do
+  on(LightboxDemoPage) do |page|
+    page.exit_mmv()
+  end
+end
+
+Then(/^I should be navigated back to the original wiki article$/) do
+  on(LightboxDemoPage) do |page|
+    page.image1_in_article_element.should be_visible
+    page.mmv_wrapper_element.should_not be_visible
+  end
+end
+
+Then(/^the image and metadata of the next image should appear$/) do
+  on(LightboxDemoPage) do |page|
+    # MMV was launched, article is not visible yet
+    page.image1_in_article_element.should_not be_visible
+
+    # Check basic MMV elements are present
+    page.mmv_wrapper_element.should be_visible
+    page.mmv_image_div_element.should be_visible
+
+    # Check image content
+    page.mmv_image_div_element.image_element.attribute('src').should match /Offsite/
+
+    # Check metadata is present
+    page.mmv_metadata_title_element.should exist
+    page.mmv_metadata_title_element.should exist
+    page.mmv_metadata_desc_element.should exist
+  end
+end
+
+Then(/^the image metadata and the image itself should be there$/) do
+  on(LightboxDemoPage) do |page|
+    # MMV was launched, article is not visible now
+    page.image1_in_article_element.should_not be_visible
+
+    # Check basic MMV elements are present
+    page.mmv_wrapper_element.should be_visible
+    page.mmv_image_div_element.should be_visible
+
+    # Check image content
+    page.mmv_image_div_element.image_element.attribute('src').should match /Kerala/
+
+    # Check metadata is present
+    page.mmv_metadata_title_element.should exist
+    page.mmv_metadata_title_element.should exist
+    page.mmv_metadata_desc_element.should exist
+  end
+end
+
+Then(/^the image and metadata of the previous image should appear$/) do
+  on(LightboxDemoPage) do |page|
+    # MMV was launched, article is not visible yet
+    on(LightboxDemoPage).image1_in_article_element.should_not be_visible
+
+    # Check basic MMV elements are present
+    page.mmv_wrapper_element.should be_visible
+    page.mmv_image_div_element.should be_visible
+
+    # Check image content
+    page.mmv_image_div_element.image_element.attribute('src').should match /Kerala/
+
+    # Check metadata is present
+    page.mmv_metadata_title_element.should exist
+    page.mmv_metadata_title_element.should exist
+    page.mmv_metadata_desc_element.should exist
+  end
+end

tests/browser/features/support/env.rb

@@ -0,0 +1 @@
+require "mediawiki/selenium"

tests/browser/features/support/modules/url_module.rb

@@ -0,0 +1,10 @@
+module URL
+  def self.url(name)
+    if ENV["MEDIAWIKI_URL"]
+      mediawiki_url = ENV["MEDIAWIKI_URL"]
+    else
+      mediawiki_url = "http://en.wikipedia.beta.wmflabs.org/wiki/"
+    end
+    "#{mediawiki_url}#{name}"
+  end
+end

tests/browser/features/support/pages/lightbox_demo_page.rb

@@ -0,0 +1,34 @@
+class LightboxDemoPage
+  include PageObject
+
+  include URL
+  page_url URL.url("Lightbox_demo")
+
+  # Tag page elements that we will need.
+  a(:login, text: "Log in")
+  a(:image1_in_article, href: /\.jpg$/)
+  div(:mmv_wrapper, class: "mlb-wrapper")
+  div(:mmv_image_div, class: "mlb-image")
+  span(:mmv_metadata_title, class: "mw-mlb-title")
+  p(:mmv_metadata_desc, class: "mw-mlb-image-desc")
+  div(:mmv_next_button, class: "mw-mlb-next-image")
+  div(:mmv_previous_button, class: "mw-mlb-prev-image")
+  div(:mmv_close_button, class: "mlb-close")
+
+  # Convenient functions on some of these elements
+  def next_image()
+    mmv_next_button_element.fire_event("onfocus")
+    mmv_next_button_element.when_present.click
+  end
+
+  def previous_image()
+    mmv_previous_button_element.fire_event("onfocus")
+    mmv_previous_button_element.when_present.click
+  end
+
+  def exit_mmv()
+    mmv_close_button_element.fire_event("onfocus")
+    mmv_close_button_element.when_present.click
+  end
+
+end

tests/browser/features/support/pages/login_page.rb

@@ -0,0 +1,22 @@
+class LoginPage
+  include PageObject
+
+  include URL
+  page_url URL.url("Special:UserLogin")
+
+  button(:login, id: "wpLoginAttempt")
+  text_field(:password, id: "wpPassword1")
+  text_field(:username, id: "wpName1")
+
+  def logged_in_as_element
+    @browser.div(id: "mw-content-text").p.b
+  end
+  def login_with(username, password)
+    self.username_element.when_present.send_keys(username)
+    self.password_element.when_present.send_keys(password)
+    login_element.fire_event("onfocus")
+    login_element.when_present.click
+  end
+end
+
+