2014-01-15 00:03:34 +00:00
|
|
|
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
|
|
|
|
|
|
|
|
When(/^I click on the first image in the article$/) do
|
|
|
|
on(LightboxDemoPage) do |page|
|
2014-04-15 14:09:18 +00:00
|
|
|
# We store the offset of the image as the scroll position, because cucumber/selenium
|
|
|
|
# automatically scrolls to it when we ask it to click on it
|
|
|
|
@articleScrollTop = page.execute_script("return Math.round($('a[href=\"/wiki/File:Sunrise_over_fishing_boats_in_Kerala.jpg\"]').first().find('img').offset().top);")
|
|
|
|
# Scrolls to the image and clicks on it
|
2014-01-15 00:03:34 +00:00
|
|
|
page.image1_in_article
|
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
When(/^I click the next arrow$/) do
|
|
|
|
on(LightboxDemoPage) do |page|
|
2014-02-20 21:46:08 +00:00
|
|
|
page.mmv_next_button_element.when_present.click
|
2014-01-15 00:03:34 +00:00
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
When(/^I click the previous arrow$/) do
|
|
|
|
on(LightboxDemoPage) do |page|
|
2014-02-20 21:46:08 +00:00
|
|
|
page.mmv_previous_button_element.when_present.click
|
2014-01-15 00:03:34 +00:00
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
When(/^I close MMV$/) do
|
|
|
|
on(LightboxDemoPage) do |page|
|
2014-02-20 21:46:08 +00:00
|
|
|
page.mmv_close_button_element.when_present.click
|
2014-01-15 00:03:34 +00:00
|
|
|
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
|
|
|
|
|
2014-02-20 02:46:28 +00:00
|
|
|
check_elements_in_viewer_for_image2(page)
|
2014-01-15 00:03:34 +00:00
|
|
|
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
|
|
|
|
|
2014-02-20 02:46:28 +00:00
|
|
|
check_elements_in_viewer_for_image1(page)
|
|
|
|
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
|
|
|
|
page.image1_in_article_element.should_not be_visible
|
|
|
|
|
|
|
|
check_elements_in_viewer_for_image1(page)
|
|
|
|
end
|
|
|
|
end
|
|
|
|
|
2014-04-11 09:31:38 +00:00
|
|
|
Then(/^the wiki article should be scrolled to the same position as before opening MMV$/) do
|
|
|
|
on(LightboxDemoPage) do |page|
|
|
|
|
page.execute_script("return $(window).scrollTop();").should eq @articleScrollTop
|
|
|
|
end
|
|
|
|
end
|
|
|
|
|
2014-02-20 02:46:28 +00:00
|
|
|
# Helper function that verifies the presence of various elements in viewer
|
|
|
|
# while looking at image1 (Kerala)
|
|
|
|
def check_elements_in_viewer_for_image1(page)
|
2014-01-15 00:03:34 +00:00
|
|
|
# Check basic MMV elements are present
|
|
|
|
page.mmv_wrapper_element.should be_visible
|
|
|
|
page.mmv_image_div_element.should be_visible
|
|
|
|
|
|
|
|
# Check image content
|
Use cross-origin img attribute instead of data URI
After lots of experimenting with Wireshark and
current Chrome + Firefox on Ubuntu 13.10, this is my
current understanding of the caching when preloading images
with AJAX requests:
* on Chrome, the image request always comes from browser cache
* Firefox makes two separate requests by default
* Firefox with img.crossOrigin = 'anonymous' makes two separate
requests, but the second one is a 304 (does not load the
image twice)
* when the image has already been cached by the browser (but not in
this session), Chrome skips both requests; Firefox skips the AJAX
request, but sends the normal one, and it returns with 304.
"wish I knew this when I started" things:
* the Chrome DevTools has an option to disable cache. When this is
enabled, requests in the same document context still come from
cache (so if I load the page, fire an AJAX request, then without
reloading the page, fire an AJAX request to the same URL, then the
second request will be cached), but an AJAX request - image request
pair is an exception from this.
* when using Ctrl-F5 in Firefox, requests on that page will never hit
the cache (even AJAX request fired after user activity; even if
two identical requests follow each other). When using clear cache
+ normal reload, this is not the case.
* if the image does not have an Allow-Origin header and is loaded
with crossOrigin=true, Firefox will refuse to load it. Chrome will
log an error in the console saying it refused to load it, but will
actually load it.
* Wireshark rocks.
Pushed some tech debt (browser + domain whitelist) into other tickets:
https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/232
https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/233
Reverted commits:
8a8d74f01d3dbd6d0c43b7fadc5284d204091761.
63021d0b0e95442cce101f9f92de8f0ff97d5f49.
Change-Id: I84ab2f3ac0a9706926adf7fe8726ecd9e9f843e0
Bug: 61542
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/207
2014-02-23 21:46:18 +00:00
|
|
|
page.mmv_image_div_element.image_element.attribute('src').should match /Kerala/
|
2014-01-15 00:03:34 +00:00
|
|
|
|
2014-02-20 02:46:28 +00:00
|
|
|
# Check basic metadata is present
|
|
|
|
|
|
|
|
# Title
|
|
|
|
page.mmv_metadata_title_element.when_present.text.should match /Sunrise over fishing boats in Kerala/
|
|
|
|
# License
|
|
|
|
page.mmv_metadata_license_element.when_present.attribute('href').should match /boats_in_Kerala.jpg$/
|
|
|
|
page.mmv_metadata_license_element.when_present.text.should match /CC BY-SA 3.0/
|
|
|
|
# Credit
|
|
|
|
page.mmv_metadata_credit_element.when_present.should be_visible
|
|
|
|
page.mmv_metadata_source_element.when_present.text.should match /Own work/
|
|
|
|
|
|
|
|
# Image metadata
|
|
|
|
page.mmv_image_metadata_wrapper_element.when_present.should be_visible
|
|
|
|
# Caption
|
|
|
|
page.mmv_image_metadata_caption_element.when_present.text.should match /Sunrise over fishing boats/
|
|
|
|
# Description
|
|
|
|
page.mmv_image_metadata_desc_element.when_present.text.should match /Sunrise over fishing boats on the beach south of Kovalam/
|
|
|
|
# Image metadata links
|
|
|
|
page.mmv_image_metadata_links_wrapper_element.when_present.should be_visible
|
|
|
|
# Repo link
|
|
|
|
page.mmv_image_metadata_repo_link_element.when_present.text.should match /Learn more on Wikimedia Commons/
|
|
|
|
page.mmv_image_metadata_repo_link_element.when_present.attribute('href').should match /boats_in_Kerala.jpg$/
|
|
|
|
# Category links
|
|
|
|
page.mmv_image_metadata_category_links_wrapper_element.when_present.should be_visible
|
|
|
|
# File usage
|
|
|
|
page.mmv_image_metadata_fileusage_wrapper_element.when_present.should be_visible
|
|
|
|
page.mmv_image_metadata_fileusage_wrapper_element.when_present.h3_element.text.should match /Used in [0-9] page/
|
|
|
|
page.mmv_image_metadata_fileusage_local_section_title_element.when_present.text.should match /On this site/
|
2014-01-15 00:03:34 +00:00
|
|
|
end
|
|
|
|
|
2014-02-20 02:46:28 +00:00
|
|
|
# Helper function that verifies the presence of various elements in viewer
|
|
|
|
# while looking at image2 (Aquarium)
|
|
|
|
def check_elements_in_viewer_for_image2(page)
|
|
|
|
# MMV was launched, article is not visible
|
|
|
|
page.image1_in_article_element.should_not be_visible
|
2014-01-15 00:03:34 +00:00
|
|
|
|
|
|
|
# Check basic MMV elements are present
|
|
|
|
page.mmv_wrapper_element.should be_visible
|
|
|
|
page.mmv_image_div_element.should be_visible
|
|
|
|
|
|
|
|
# Check image content
|
Use cross-origin img attribute instead of data URI
After lots of experimenting with Wireshark and
current Chrome + Firefox on Ubuntu 13.10, this is my
current understanding of the caching when preloading images
with AJAX requests:
* on Chrome, the image request always comes from browser cache
* Firefox makes two separate requests by default
* Firefox with img.crossOrigin = 'anonymous' makes two separate
requests, but the second one is a 304 (does not load the
image twice)
* when the image has already been cached by the browser (but not in
this session), Chrome skips both requests; Firefox skips the AJAX
request, but sends the normal one, and it returns with 304.
"wish I knew this when I started" things:
* the Chrome DevTools has an option to disable cache. When this is
enabled, requests in the same document context still come from
cache (so if I load the page, fire an AJAX request, then without
reloading the page, fire an AJAX request to the same URL, then the
second request will be cached), but an AJAX request - image request
pair is an exception from this.
* when using Ctrl-F5 in Firefox, requests on that page will never hit
the cache (even AJAX request fired after user activity; even if
two identical requests follow each other). When using clear cache
+ normal reload, this is not the case.
* if the image does not have an Allow-Origin header and is loaded
with crossOrigin=true, Firefox will refuse to load it. Chrome will
log an error in the console saying it refused to load it, but will
actually load it.
* Wireshark rocks.
Pushed some tech debt (browser + domain whitelist) into other tickets:
https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/232
https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/233
Reverted commits:
8a8d74f01d3dbd6d0c43b7fadc5284d204091761.
63021d0b0e95442cce101f9f92de8f0ff97d5f49.
Change-Id: I84ab2f3ac0a9706926adf7fe8726ecd9e9f843e0
Bug: 61542
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/207
2014-02-23 21:46:18 +00:00
|
|
|
page.mmv_image_div_element.image_element.attribute('src').should match /Offsite/
|
2014-01-15 00:03:34 +00:00
|
|
|
|
2014-02-20 02:46:28 +00:00
|
|
|
# Check basic metadata is present
|
|
|
|
|
|
|
|
# Title
|
|
|
|
page.mmv_metadata_title_element.when_present.text.should match /All Hands Offsite/
|
|
|
|
# License
|
|
|
|
page.mmv_metadata_license_element.when_present.attribute('href').should match /All_Hands_Offsite.*\.jpg$/
|
|
|
|
page.mmv_metadata_license_element.when_present.text.should match /CC BY-SA 3.0/
|
|
|
|
# Credit
|
|
|
|
page.mmv_metadata_credit_element.when_present.should be_visible
|
|
|
|
page.mmv_metadata_source_element.when_present.text.should match /Wikimedia Foundation/
|
|
|
|
|
|
|
|
# Image metadata
|
|
|
|
page.mmv_image_metadata_wrapper_element.when_present.should be_visible
|
|
|
|
# Caption
|
|
|
|
page.mmv_image_metadata_caption_element.when_present.text.should match /Tropical Fish Aquarium/
|
|
|
|
# Description
|
|
|
|
page.mmv_image_metadata_desc_element.when_present.text.should match /Photo from Wikimedia Foundation/
|
|
|
|
# Image metadata links
|
|
|
|
page.mmv_image_metadata_links_wrapper_element.when_present.should be_visible
|
|
|
|
# Repo link
|
|
|
|
page.mmv_image_metadata_repo_link_element.when_present.text.should match /Learn more on Wikimedia Commons/
|
|
|
|
page.mmv_image_metadata_repo_link_element.when_present.attribute('href').should match /All_Hands_Offsite.*\.jpg$/
|
|
|
|
# Category links
|
|
|
|
page.mmv_image_metadata_category_links_wrapper_element.when_present.should be_visible
|
|
|
|
# File usage
|
|
|
|
page.mmv_image_metadata_fileusage_wrapper_element.when_present.should be_visible
|
|
|
|
page.mmv_image_metadata_fileusage_wrapper_element.when_present.h3_element.text.should match /Used in [0-9] page/
|
|
|
|
page.mmv_image_metadata_fileusage_local_section_title_element.when_present.text.should match /On this site/
|
2014-01-15 00:03:34 +00:00
|
|
|
end
|