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 (commons.wikimedia.beta.wmflabs.org or commons.wikimedia.org). At the moment it is used only in VisualEditor, but the same concept can be applied to other tools as well.

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


 * See commons:Special:ListFiles/LanguageScreenshotBot for the produced files.

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 add internationalized text in existing screenshots?

 * Call the method translate providing the key in i18n json file
 * This would add the translated text based on the language for which screenshot is being taken.

How to write a scenario that creates screenshots?

 * Screenshot capturing and cropping is done using the screenshot Ruby gem.
 * Uploading is done using the commons_upload Ruby gem
 * 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 Screensht.capture.
 * Example for VisualEditor:
 * Cucumber scenarios
 * Scenario steps implementation

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