Skip to content
Robot Framework Electron & VS Code

Videos and slow motion

A video shows what a test did, which helps when a test fails on CI, and it is a good way to demonstrate an extension.

Recording a video

Section titled “Recording a video”

New Electron Application and Open VS Code record a video when they get record_video. The keys are those of Browser’s recordVideo for New Context, plus Playwright’s overlay of the performed actions:

  • dir: the folder for the videos. Relative paths are relative to Browser’s video folder browser/video in the output directory, which is also the default.
  • size: the size of the video, as width and height. The default is 1280×720.
  • showActions: shows each performed action in the video, with duration in milliseconds, position (for example top-right), fontSize and cursor.

An empty dictionary records with the defaults:

*** Settings ***
Library    Electron


*** Test Cases ***
Recorded Run
    New Electron Application    /opt/my-app/my-app    record_video={}
    Click    text=Say hello
    Close Electron Application

The log embeds the video, and the page details that the keyword returns contain its path. Playwright finishes the file when the application closes, through Close Electron Application, Close VS Code, Close Browser or Browser’s automatic closing.

A full frame of VS Code

Section titled “A full frame of VS Code”

A window keeps its own size in the video: a larger window is scaled down to fit, and a smaller one is shown at its own size with a grey margin. For a full frame, open VS Code maximised and record in the size of the screen. Maximising needs a window manager, which the display profiles xvfb and xephyr start, see CI and the Linux display.

The example project’s video.robot does this. Its keyword reads the screen size from SCREEN_SIZE, which the display profiles use as well, and opens VS Code, which the example opens maximised, with record_video in that size and with the action overlay. The tests do not close VS Code themselves: Browser closes it at the end of each test, which finishes the video.

  • With presenter mode: the first two tests switch on presenter mode, which slows them down and highlights what they act on, so the videos are easy to follow. In presenter mode, Browser also waits five seconds before it closes VS Code, so the video shows the result. The second test creates a Python script, saves it through VS Code’s own dialog and runs it with the run button above the editor.
  • Without presenter mode: the third test runs at full speed and creates the script in the explorer. Presenter mode could not reach the explorer’s actions reliably, because VS Code redraws them while the mouse moves over the explorer. Browser does not wait before closing VS Code then, so the test pauses at the end.
  • Scope: presenter mode has no scope and stays on after a test, so each test sets it, and the suite switches it off when it ends.
tests/video.robot
*** Settings ***
Documentation       Records videos of VS Code while the tests demonstrate the extension
...                 and create and run a Python script.
...
...                 The videos have the size of the screen, which the display profiles set with
...                 SCREEN_SIZE, so that the maximised VS Code fills them, and Playwright shows each
...                 action in the video. The log embeds the videos. Browser closes VS Code at the end
...                 of each test, which finishes the video.
...
...                 The first two tests use presenter mode, which slows the steps down and highlights
...                 what they act on; Browser then also waits five seconds before it closes VS Code,
...                 so that the video shows the result. The last test records without presenter mode.
...
...                 The Python tests need network access for the Marketplace; leave them out with
...                 `--exclude network`.


Library             String
Resource            resources/vscode.resource
Resource            resources/command_palette.resource
Resource            resources/quick_pick.resource
Resource            resources/notifications.resource
Resource            resources/webview.resource
Resource            resources/editor.resource
Resource            resources/explorer.resource
Resource            resources/file_dialog.resource
Resource            resources/python.resource
Resource            resources/terminal.resource


# Presenter mode stays on after a test, so the suite switches it off when it ends.
Suite Teardown      Set Presenter Mode    False




*** Test Cases ***
Demonstration Of The Extension
    Set Presenter Mode    ${{ {"duration": "1s"} }}
    Open Example VS Code With Video
    Run Command    Robot Example: Say Hello
    Notification Should Be Shown    Hello Robot
    Run Command    Robot Example: Pick
    Select Quick Pick Item    Banana
    Notification Should Be Shown    You picked Banana
    Run Command    Robot Example: Open Webview
    ${previous} =    Enter Webview    robot.example-extension
    Click    id=click-me
    Get Text    id=status    ==    Clicked
    Leave Webview    ${previous}


Python Script Created And Run
    [Tags]    network
    Set Presenter Mode    ${{ {"duration": "1s"} }}
    Open Example VS Code With Video    extensions=${{ ["ms-python.python"] }}
    New File
    Keyboard Input    type    print("Hello Robot Framework")
    ${workspace} =    Example Workspace
    Save File With Dialog    ${workspace}/greeting.py
    Active Editor Should Be    greeting.py
    Run Python File
    Terminal Should Show    Hello Robot Framework


Python Script Created In The Explorer Without Presenter Mode
    [Documentation]    Without presenter mode, the steps run at full speed, and the explorer's
    ...    actions, which VS Code redraws while the mouse moves over the explorer, work reliably.
    ...    Browser does not wait before it closes VS Code, so the test pauses at the end.
    [Tags]    network
    Set Presenter Mode    False
    Open Example VS Code With Video    extensions=${{ ["ms-python.python"] }}
    Create File In Explorer    greeting.py
    Active Editor Should Be    greeting.py
    Keyboard Input    type    print("Hello Robot Framework")
    Save File
    Run Python File
    Terminal Should Show    Hello Robot Framework
    Sleep    2s    Let the video show the result before Browser closes VS Code.




*** Keywords ***
Open Example VS Code With Video
    [Documentation]    Opens VS Code and records a video in the size of the screen.
    ...    Further named arguments, such as `extensions`, are passed on.
    [Arguments]    &{options}
    ${width}    ${height} =    Split String    %{SCREEN_SIZE=1920x1080}    x
    VAR    &{size}    width=${width}    height=${height}
    VAR    &{show_actions}    duration=${800}    position=top-right
    VAR    &{record_video}    size=${size}    showActions=${show_actions}
    Open Example VS Code    record_video=${record_video}    &{options}

Without a window manager, Set Viewport Size 1920 1080 after Open VS Code makes the workbench fill the frame instead. It emulates the size inside the page and leaves the window as it is.

ffmpeg

Section titled “ffmpeg”

Playwright needs its own ffmpeg to record. It is installed together with Browser’s browsers, and with Playwright’s install chromium. If Browser was set up without browsers, install it alone with Playwright’s install ffmpeg command. Without ffmpeg, the application’s first window does not load, and the start fails after its timeout.

Slow motion

Section titled “Slow motion”

Playwright’s slowMo is not available for Electron applications, because Playwright has no such option when it launches them. Browser’s presenter mode serves instead. Before every keyword that takes a selector, it scrolls to the element, highlights it and waits for the given duration:

Set Presenter Mode    {'duration': '1s', 'color': 'red'}
Click    id=change
Set Presenter Mode    False

Keyboard keywords such as Keyboard Input have no selector and are not slowed down. Together with showActions in the video, presenter mode makes a demonstration easy to follow.