Language screenshots

The purpose of the project is to drive a browser, take a screenshot of a screen in multiple languages, crop the screenshot so only relevant part is left and upload the screenshot to Commons (at the moment to commons.wikimedia.beta.wmflabs.org, later to commons.wikimedia.org). At the moment it is used only in VisualEditor.

How to see the existing screenshots?

 * Images are stored in two places, Jenkins job and Commons.
 * At Wikimedia Jenkins, find the job, go to any configuration


 * For German, it is LANGUAGE_SCREENSHOT_CODE=de


 * https://integration.wikimedia.org/ci/view/BrowserTests/job/browsertests-VisualEditor-language-screenshot-linux-firefox-sauce/LANGUAGE_SCREENSHOT_CODE=de,label=contintLabsSlave/


 * The screenshots will be listed as png files under Last Successful Artifacts


 * For example, VisualEditor_Toolbar_Formatting-de.png
 * At Commons, take a look at Special:ListFiles for LanguageScreenshotBot


 * https://commons.wikimedia.org/w/index.php?title=Special:ListFiles/LanguageScreenshotBot

How to find the screenshot creating job?

 * The job URL looks like https://integration.wikimedia.org/ci/view/BrowserTests/job/browsertests-EXTENSION-language-screenshot-linux-firefox-sauce/


 * should be a template such as


 * Replace EXTENSION with the name of your extension.
 * Alternatively, go to BrowserTests tab and search for language-screenshot


 * https://integration.wikimedia.org/ci/view/BrowserTests/

How to run the screenshot creating job?

 * Log in (with Gerrit credentials) to Wikimedia Jenkins


 * https://integration.wikimedia.org/ci/


 * Request permission to run the job. (Ask the person that maintains Wikimedia Jenkins, at the moment it is Antoine.)


 * Click "Build Now" button at the Jenkins job page


 * Example for VisualEditor https://integration.wikimedia.org/ci/view/BrowserTests/job/browsertests-VisualEditor-language-screenshot-linux-firefox-sauce/

How to add a language to the current job?

 * Edit the file job_template.yaml in repository integration-jenkins-job-builder-config (cloudbees branch) and add the language code under LANGUAGE_SCREENSHOT_CODE


 * Exising languages: https://github.com/wikimedia/integration-jenkins-job-builder-config/blob/cloudbees/job_template.yaml#L25-L27

How to write a scenario that creates screenshots?

 * Support for taking screenshots, cropping them and uploading to Commons will soon be added to mediawiki_selenium Ruby gem, or a new gem will be created.


 * The gem should be added to Gemfile.


 * Environment variables that have to be set:


 * LANGUAGE_SCREENSHOT_CODE, two letter language code. For example, it is de for German.


 * MEDIAWIKI_API_UPLOAD_URL, API URL of the site where the images are to be uploaded. (For now http://commons.wikimedia.beta.wmflabs.org/wiki/api.php)


 * MEDIAWIKI_USER and MEDIAWIKI_PASSWORD for the site


 * LANGUAGE_SCREENSHOT_PATH, optional. If not set, ./screenshots folder will be used.


 * Write the scenarios the usual way.


 * Call method capture_screenshot.


 * Example for VisualEditor https://github.com/wikimedia/mediawiki-extensions-VisualEditor/blob/master/modules/ve-mw/test/browser/features/langauge_screenshot.feature

How to create a whole new job for another extension?

 * Edit the file jobs.yaml in repository integration-jenkins-job-builder-config (cloudbees branch) and add a job 'browsertests-{name}-language-screenshot-{platform}-{browser}-sauce'


 * Example for VisualEditor https://github.com/wikimedia/integration-jenkins-job-builder-config/blob/cloudbees/jobs.yaml#L283-L284