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 ( or 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]