jenkins-bot has submitted this change and it was merged. Change subject: [BrowserTest] Language Screenshot (browser test and their screenshots) for Headings and Formatting ......................................................................
[BrowserTest] Language Screenshot (browser test and their screenshots) for Headings and Formatting This is an illustration of how one can get a screenshot of the Headings pull-down menu and formatting pull-down menu for the Visual Editor User guide[1]. To see how it works: * Set environment variable LANGUAGE_SCREENSHOT_CODE to which ever language you are planning to run browser test for. (Eg: de for German/en for English) * Set environment variable LANGUAGE_SCREENSHOT_PATH (optional) to store the screenshot in that path. If not provided the ./screenshots folder will be used. * Run the browser test as usual using cucumber or you can use @language_screenshot tag while executing (bundle exec cucumber --tags @language_screenshot) [1]: https://www.mediawiki.org/wiki/Help:VisualEditor/User_guide Bug: 62737 Change-Id: I0f27aec482458b6f04aa913426042f78695d451d --- M modules/ve-mw/test/browser/Gemfile M modules/ve-mw/test/browser/Gemfile.lock A modules/ve-mw/test/browser/features/langauge_screenshot.feature A modules/ve-mw/test/browser/features/step_definitions/langauge_screenshot_steps.rb M modules/ve-mw/test/browser/features/support/env.rb M modules/ve-mw/test/browser/features/support/hooks.rb A modules/ve-mw/test/browser/features/support/language_screenshot.rb M modules/ve-mw/test/browser/features/support/pages/visual_editor_page.rb A modules/ve-mw/test/browser/spec/rectangle_spec.rb 9 files changed, 341 insertions(+), 1 deletion(-) Approvals: Amire80: Looks good to me, approved jenkins-bot: Verified diff --git a/modules/ve-mw/test/browser/Gemfile b/modules/ve-mw/test/browser/Gemfile index 316fff2..c3ae179 100755 --- a/modules/ve-mw/test/browser/Gemfile +++ b/modules/ve-mw/test/browser/Gemfile @@ -3,5 +3,7 @@ source "https://rubygems.org"; -gem "mediawiki_selenium" +gem "chunky_png" gem "mediawiki_api" +gem "mediawiki_selenium" +gem "rspec" \ No newline at end of file diff --git a/modules/ve-mw/test/browser/Gemfile.lock b/modules/ve-mw/test/browser/Gemfile.lock index 93c067d..3275417 100644 --- a/modules/ve-mw/test/browser/Gemfile.lock +++ b/modules/ve-mw/test/browser/Gemfile.lock @@ -4,6 +4,7 @@ builder (3.2.2) childprocess (0.5.3) ffi (~> 1.0, >= 1.0.11) + chunky_png (1.3.1) cucumber (1.3.15) builder (>= 2.1.2) diff-lcs (>= 1.1.3) @@ -56,8 +57,14 @@ data_magic (>= 0.14) rest-client (1.6.7) mime-types (>= 1.16) + rspec (2.99.0) + rspec-core (~> 2.99.0) + rspec-expectations (~> 2.99.0) + rspec-mocks (~> 2.99.0) + rspec-core (2.99.1) rspec-expectations (2.99.0) diff-lcs (>= 1.1.3, < 2.0) + rspec-mocks (2.99.1) rubyzip (1.1.4) selenium-webdriver (2.42.0) childprocess (>= 0.5.0) @@ -77,5 +84,7 @@ ruby DEPENDENCIES + chunky_png mediawiki_api mediawiki_selenium + rspec diff --git a/modules/ve-mw/test/browser/features/langauge_screenshot.feature b/modules/ve-mw/test/browser/features/langauge_screenshot.feature new file mode 100644 index 0000000..7bde18a --- /dev/null +++ b/modules/ve-mw/test/browser/features/langauge_screenshot.feature @@ -0,0 +1,13 @@ +@firefox @language_screenshot +Feature: Language Screenshot + + Scenario: VisualEditor_Toolbar_Headings + Given I am editing a random page + When I click the down arrow on Headings interface + Then I should see Headings pull-down menu + + Scenario: VisualEditor_Toolbar_Formatting + Given I am editing a random page + When I click the text style menu + Then I should see Formatting pull-down menu + diff --git a/modules/ve-mw/test/browser/features/step_definitions/langauge_screenshot_steps.rb b/modules/ve-mw/test/browser/features/step_definitions/langauge_screenshot_steps.rb new file mode 100644 index 0000000..6acd1f0 --- /dev/null +++ b/modules/ve-mw/test/browser/features/step_definitions/langauge_screenshot_steps.rb @@ -0,0 +1,23 @@ +Given(/^I am editing a random page$/) do + step "I am at a random page" + @browser.goto "#{@browser.url}?vehidebetadialog=true&veaction=edit" + step "I click in the editable part" +end + +Then(/^I should see Headings pull-down menu$/) do + on(VisualEditorPage).heading_dropdown_menus_element.when_present.should be_visible + step "I take screenshot of pull-dowm menu" +end + +Then(/^I take screenshot of pull-dowm menu$/) do + capture_screenshot("#{@scenario.name}-#{ENV['LANGUAGE_SCREENSHOT_CODE']}.png", [@current_page.downarrow_element, @current_page.heading_dropdown_menus_element]) +end + +Then(/^I should see Formatting pull-down menu$/) do + on(VisualEditorPage).formatting_option_menus_element.when_present.should be_visible + step "I take screenshot of Formatting pull-down menu" +end + +Then(/^I take screenshot of Formatting pull-down menu$/) do + capture_screenshot("#{@scenario.name}-#{ENV['LANGUAGE_SCREENSHOT_CODE']}.png", [@current_page.ve_text_style_element,@current_page.formatting_option_menus_element]) +end diff --git a/modules/ve-mw/test/browser/features/support/env.rb b/modules/ve-mw/test/browser/features/support/env.rb index ec7b353..4ed657f 100644 --- a/modules/ve-mw/test/browser/features/support/env.rb +++ b/modules/ve-mw/test/browser/features/support/env.rb @@ -1,4 +1,5 @@ require_relative "hooks" +require_relative "language_screenshot" require "mediawiki_selenium" require "mediawiki_api" diff --git a/modules/ve-mw/test/browser/features/support/hooks.rb b/modules/ve-mw/test/browser/features/support/hooks.rb index 6984242..f95643a 100644 --- a/modules/ve-mw/test/browser/features/support/hooks.rb +++ b/modules/ve-mw/test/browser/features/support/hooks.rb @@ -11,3 +11,7 @@ $edit_user_page_login=true end end + +Before("@language_screenshot") do |scenario| + @scenario = scenario +end \ No newline at end of file diff --git a/modules/ve-mw/test/browser/features/support/language_screenshot.rb b/modules/ve-mw/test/browser/features/support/language_screenshot.rb new file mode 100644 index 0000000..e17877d --- /dev/null +++ b/modules/ve-mw/test/browser/features/support/language_screenshot.rb @@ -0,0 +1,78 @@ +def capture_screenshot(file_name, page_elements) + screenshot_directory = ENV["LANGUAGE_SCREENSHOT_PATH"] || "screenshots" + FileUtils.mkdir_p screenshot_directory + screenshot_path = "#{screenshot_directory}/#{file_name}" + @browser.send_keys [:control, :add] + @browser.screenshot.save screenshot_path + crop_image screenshot_path, page_elements +end + +def crop_image path, page_elements + crop_rectangle = rectangle(coordinates_from_page_elements(page_elements)) + top_left_x = crop_rectangle[0] + top_left_y = crop_rectangle[1] + width = crop_rectangle[2] + height = crop_rectangle[3] + + require "chunky_png" + element = ChunkyPNG::Image.from_file path + element.crop!(top_left_x, top_left_y, width, height) + element.save path +end + +def rectangle rectangles + + top_left_x, top_left_y = top_left_x_y rectangles + + bottom_right_x , bottom_right_y = bottom_right_x_y rectangles + # Finding width and height + width = bottom_right_x - top_left_x + height = bottom_right_y - top_left_y + + # The new rectangle is constructed with all the co-ordinates calculated above + [top_left_x, top_left_y, width, height] +end + +def coordinates_from_page_elements page_elements + page_elements.collect do |page_element| + coordinates_from_page_element page_element + end +end + +def coordinates_from_page_element page_element + [page_element.element.wd.location.x, page_element.element.wd.location.y, page_element.element.wd.size.width, page_element.element.wd.size.height] +end + +def top_left_x_coordinates input_rectangles + input_rectangles.collect do |rectangle| + rectangle[0] + end +end + +def top_left_y_coordinates input_rectangles + input_rectangles.collect do |rectangle| + rectangle[1] + end +end + +def bottom_right_x_coordinates input_rectangles + input_rectangles.collect do |rectangle| + rectangle[0]+rectangle[2] + end +end + +def bottom_right_y_coordinates input_rectangles + input_rectangles.collect do |rectangle| + rectangle[1]+rectangle[3] + end +end + +def bottom_right_x_y input_rectangles + [bottom_right_x_coordinates(input_rectangles).max, bottom_right_y_coordinates(input_rectangles).max] +end + +def top_left_x_y input_rectangles + [top_left_x_coordinates(input_rectangles).min, top_left_y_coordinates(input_rectangles).min] +end + + diff --git a/modules/ve-mw/test/browser/features/support/pages/visual_editor_page.rb b/modules/ve-mw/test/browser/features/support/pages/visual_editor_page.rb index 6b8e541..55b8e4e 100644 --- a/modules/ve-mw/test/browser/features/support/pages/visual_editor_page.rb +++ b/modules/ve-mw/test/browser/features/support/pages/visual_editor_page.rb @@ -34,6 +34,8 @@ a(:subheading3, text: /Sub-heading 3/) a(:subheading4, text: /Sub-heading 4/) span(:switch_to_source_editing, class: "oo-ui-iconedElement-icon oo-ui-icon-source") + div(:heading_dropdown_menus, class: "oo-ui-toolGroup-tools oo-ui-clippableElement-clippable") + div(:formatting_option_menus, class: "oo-ui-toolGroup-tools oo-ui-clippableElement-clippable", index: 1) if ENV["BROWSER"] == "chrome" div(:tools_menu, class: "oo-ui-widget oo-ui-widget-enabled oo-ui-toolGroup oo-ui-iconedElement oo-ui-popupToolGroup oo-ui-listToolGroup") diff --git a/modules/ve-mw/test/browser/spec/rectangle_spec.rb b/modules/ve-mw/test/browser/spec/rectangle_spec.rb new file mode 100644 index 0000000..3e0b4c2 --- /dev/null +++ b/modules/ve-mw/test/browser/spec/rectangle_spec.rb @@ -0,0 +1,208 @@ +require_relative '../features/support/language_screenshot' + +# Rectangle is defined as set of co-ordinates represented by top left x, top left y, width, height +describe "Rectangle" do + it "should return the co-ordinates of provided 1 rectangle" do + input_rectangle = [0,0,1,1] + input_rectangles = [input_rectangle] + expect(rectangle(input_rectangles)).to eq(input_rectangle) + end + + it "if we provide 2 rectangles and if one contains the other then it should return co-ordinates of bigger rectangle" do + input_rectangle_1 = [0,0,1,1] + input_rectangle_2 = [0,0,2,2] + input_rectangles = [input_rectangle_1, input_rectangle_2] + expect(rectangle(input_rectangles)).to eq(input_rectangle_2) + end + + it "if we provide 2 rectangles it should return co-ordinates of third rectangle which contains both" do + input_rectangle_1 = [0,0,1,1] + input_rectangle_2 = [1,0,1,1] + input_rectangles_1 = [input_rectangle_1, input_rectangle_2] + output_rectangle_1 = [0,0,2,1] + expect(rectangle(input_rectangles_1)).to eq(output_rectangle_1) + + input_rectangle_3 = [1,1,1,1] + input_rectangle_4 = [3,3,1,1] + input_rectangles_2 = [input_rectangle_3, input_rectangle_4] + output_rectangle_2 = [1,1,3,3] + expect(rectangle(input_rectangles_2)).to eq(output_rectangle_2) + end + + it "if we provide 3 rectangles it should return co-ordinates the rectangle which contains all the input rectangles" do + input_rectangle_1 = [1,1,1,1] + input_rectangle_2 = [2,2,1,1] + input_rectangle_3 = [3,3,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2, input_rectangle_3] + output_rectangle_1 = [1,1,3,3] + expect(rectangle(input_rectangles)).to eq(output_rectangle_1) + end +end + +describe "Calculate topleft co-ordinates" do + + it "if we provide 1 rectangle then it should return top left co-ordinates of the input rectangle" do + input_rectangle = [2,2,1,1] + input_rectangles = [input_rectangle] + output_coordinates = [2,2] + expect(top_left_x_y(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 2 rectangles then it should return top left co-ordinates of the biggest rectangle containing both rectangles" do + input_rectangle_1 = [1,0,1,1] + input_rectangle_2 = [0,0,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2] + output_coordinates = [0,0] + expect(top_left_x_y(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 3 rectangles then it should return top left co-ordinates of the biggest rectangle containing both rectangles" do + input_rectangle_1 = [3,3,1,1] + input_rectangle_2 = [2,2,1,1] + input_rectangle_3 = [1,1,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2, input_rectangle_3] + output_coordinates = [1,1] + expect(top_left_x_y(input_rectangles)).to eq(output_coordinates) + end + +end + +describe "Topleft co-ordinates x" do + + it "if we provide 1 rectangle then it should return array of top left x co-ordinate of the input rectangle" do + input_rectangle = [2,2,1,1] + input_rectangles = [input_rectangle] + output_coordinates = [2] + expect(top_left_x_coordinates(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 2 rectangles then it should return array top left x co-ordinates" do + input_rectangle_1 = [0,0,1,1] + input_rectangle_2 = [1,0,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2] + output_coordinates = [0,1] + expect(top_left_x_coordinates(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 3 rectangles then it should return array of top left x co-ordinates" do + input_rectangle_1 = [3,3,1,1] + input_rectangle_2 = [2,2,1,1] + input_rectangle_3 = [1,1,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2, input_rectangle_3] + output_coordinates = [3,2,1] + expect(top_left_x_coordinates(input_rectangles)).to eq(output_coordinates) + end + +end + +describe "Topleft co-ordinates y" do + + it "if we provide 1 rectangle then it should return array of top left y co-ordinate of the input rectangle" do + input_rectangle = [2,2,1,1] + input_rectangles = [input_rectangle] + output_coordinates = [2] + expect(top_left_y_coordinates(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 2 rectangles then it should return array top left y co-ordinates" do + input_rectangle_1 = [0,0,1,1] + input_rectangle_2 = [1,0,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2] + output_coordinates = [0,0] + expect(top_left_y_coordinates(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 3 rectangles then it should return array of top left y co-ordinates" do + input_rectangle_1 = [3,3,1,1] + input_rectangle_2 = [2,2,1,1] + input_rectangle_3 = [1,1,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2, input_rectangle_3] + output_coordinates = [3,2,1] + expect(top_left_y_coordinates(input_rectangles)).to eq(output_coordinates) + end + +end + +describe "Calculate bottomright co-ordinates" do + + it "if we provide 1 rectangle then it should return bottom right co-ordinates of the input rectangle" do + input_rectangle = [2,2,1,1] + input_rectangles = [input_rectangle] + output_coordinates = [3,3] + expect(bottom_right_x_y(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 2 rectangles then it should return bottom right co-ordinates of the biggest rectangle containing both rectangles" do + input_rectangle_1 = [1,0,1,1] + input_rectangle_2 = [0,0,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2] + output_coordinates = [2,1] + expect(bottom_right_x_y(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 3 rectangles then it should return bottom right co-ordinates of the biggest rectangle containing both rectangles" do + input_rectangle_1 = [3,3,1,1] + input_rectangle_2 = [2,2,1,1] + input_rectangle_3 = [1,1,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2, input_rectangle_3] + output_coordinates = [4,4] + expect(bottom_right_x_y(input_rectangles)).to eq(output_coordinates) + end + +end + +describe "Bottom right co-ordinates x" do + + it "if we provide 1 rectangle then it should return array of bottom right x co-ordinate of the input rectangle" do + input_rectangle = [2,2,1,1] + input_rectangles = [input_rectangle] + output_coordinates = [3] + expect(bottom_right_x_coordinates(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 2 rectangles then it should return array bottom right x co-ordinates" do + input_rectangle_1 = [0,0,1,1] + input_rectangle_2 = [1,0,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2] + output_coordinates = [1,2] + expect(bottom_right_x_coordinates(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 3 rectangles then it should return array of bottom right x co-ordinates" do + input_rectangle_1 = [3,3,1,1] + input_rectangle_2 = [2,2,1,1] + input_rectangle_3 = [1,1,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2, input_rectangle_3] + output_coordinates = [4,3,2] + expect(bottom_right_x_coordinates(input_rectangles)).to eq(output_coordinates) + end + +end + +describe "Bottom right co-ordinates y" do + + it "if we provide 1 rectangle then it should return array of bottom right y co-ordinate of the input rectangle" do + input_rectangle = [2,2,1,1] + input_rectangles = [input_rectangle] + output_coordinates = [3] + expect(bottom_right_y_coordinates(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 2 rectangles then it should return array bottom right y co-ordinates" do + input_rectangle_1 = [0,0,1,1] + input_rectangle_2 = [1,0,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2] + output_coordinates = [1,1] + expect(bottom_right_y_coordinates(input_rectangles)).to eq(output_coordinates) + end + + it "if we provide 3 rectangles then it should return array of bottom right y co-ordinates" do + input_rectangle_1 = [3,3,1,1] + input_rectangle_2 = [2,2,1,1] + input_rectangle_3 = [1,1,1,1] + input_rectangles = [input_rectangle_1, input_rectangle_2, input_rectangle_3] + output_coordinates = [4,3,2] + expect(bottom_right_y_coordinates(input_rectangles)).to eq(output_coordinates) + end + +end -- To view, visit https://gerrit.wikimedia.org/r/135616 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I0f27aec482458b6f04aa913426042f78695d451d Gerrit-PatchSet: 41 Gerrit-Project: mediawiki/extensions/VisualEditor Gerrit-Branch: master Gerrit-Owner: Vikassy <[email protected]> Gerrit-Reviewer: Amire80 <[email protected]> Gerrit-Reviewer: Cmcmahon <[email protected]> Gerrit-Reviewer: Manybubbles <[email protected]> Gerrit-Reviewer: Vikassy <[email protected]> Gerrit-Reviewer: Zfilipin <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
