Language Screenshots

Jump to: navigation, search

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, later to At the moment it is used only in VisualEditor, but the same concept can be applied to other tools as well.

For existing projects[edit]

How to see the existing screenshots?[edit]

  • 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
  • The screenshots will be listed as png files under Last Successful Artifacts. For example, VisualEditor_Toolbar_Formatting-de.png

How to find the screenshot creating job?[edit]

  • should be a template such as {{language-screenshot-job|VisualEditor}}
  • Replace EXTENSION with the name of your extension.
  • Alternatively, go to BrowserTests tab and search for language-screenshot

How to run the screenshot creating job?[edit]

  • Log in (with Gerrit credentials) to Wikimedia Jenkins
  • 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

How to add a language to the current job?[edit]

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

How to add internationalized text in existing screenshots?[edit]

  • 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.

New projects[edit]

How to write a scenario that creates screenshots?[edit]

  • 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
    • 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:

How to create a whole new job for another extension?[edit]

  • 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'

See also[edit]