User:IIgwilo (WMF)/Real Time Preview for Wikitext/Release Testing

From Meta, a Wikimedia project coordination wiki

Which wikis to test[edit]

Dom:

George:

How to enable and start using Realtime Preview[edit]

  1. Login as any user on the target wiki. Your staff account is fine.
  2. Go to Special:Preferences (or click "Preferences" in the top right menu).
  3. (Optional, if the target wiki's default language is not English) The first dropdown you see in Preferences allows you to set the language for the wiki. You may find it easier to change this to English, if the wiki's default language is not already English. Then save.
  4. (Optional, but recommended) Click the "Editing" tab. In the dropdown titled "Editing mode" select "Show me both editing tabs".
    "Show both editor tabs"
  5. Click the "Beta features" tab.
  6. Check "Realtime Preview" and save.
    Enabling Realtime Preview in Beta features
  7. Go to any article on the wiki.
    • You could use "Random page" in the left-hand menu.
    • Or select articles which are linked from the Main_Page.
  8. (Optional, but recommended) Open your browser's developer tools.
  9. Click "Edit source".
    • If you didn't do step 4, you may only see "Edit". Click this, then when the visual editor loads click the pen icon and select "Source editing".
  10. You should see "Preview" in the menu bar of the wikitext editor. Click this to open Realtime Preview.
    How to open the Realtime Preview feature

What to test for[edit]

  1. Functional errors. A user should be able to edit the wikitext in the left-hand pane and have that edit reflected in the right-hand Preview pane.
    • The right-hand Preview pane should be updated automatically (~2 seconds after they have stopped typing).
    • They can also update the preview manually by clicking the "Reload" button or pressing alt + shift + ).
    • If the article you are editing is large, you may enter what is called "manual-mode". A new bar will appear above the right-hand Preview pane. In this case, automatic updates are disabled, but you can reload manually.
  2. Visual errors, in particular where content inside the right-hand Realtime Preview pane overflows (such as phab:T313376, phab:T314467, phab:T310064).
  3. Problems resizing the wikitext editor or using Realtime Preview's horizontal resizer.
    Location of wikitext editor and horizontal resizers
  4. Javascript errors. If you followed step 8 above, from time to time look in the "Console" of the developer tools to check for any errors.
    • If you see the error WikiEditor realtime preview error this is expected and can be ignored.
      Example of an expected JavaScript error
  5. You don't need to test saving an edit.