2.3 JavaScript Plugin-API

exports.__esModule = true;
exports.getLinks = getLinks;
exports.myMouseWheel = mouseWheel;

getLinks.rfdoc = `This keyword is implemented in JS.


It is super cool!`;
async function getLinks (logger, page) {
    logger('Hello World');
    const links = await page.locator('a').evaluateAll(
        elements => {
            const object = {};
            elements.filter(e => e.innerText).forEach(e => object[e.innerText] = e.href);
            return object;
        }
    );
    logger(links);
    return links;
}

mouseWheel.rfdoc = 'This Keyword scrolls the page by mouse input.';
async function mouseWheel (x, y, logger, page) {
    logger(`Mouse wheel at ${x}, ${y}`);
    await page.mouse.wheel(Number(x), Number(y));
    logger('Returning a funny string');
    return await page.evaluate('document.scrollingElement.scrollTop');
}

Exercise:

Create two JS Keywords.

• Get Hostname
• Get Protocol

window.location.protocol

returns: 'https:'

window.location.hostname

returns: 'robocon.io'

Debugging JS

To attach a JS debugger to the NodeJS side of Browser (either to debug the library's internal code or to debug your JS extension), you first have to enable the Browser library to start the Playwright process with debugging enabled and then attach to that process.

Enable Node Debugging for Playwright Process

To do so, you have to set the environment variable ROBOT_FRAMEWORK_BROWSER_NODE_DEBUG_OPTIONS. Its value will be attached as CLI options to the node process. To enable the debugger you can use --inspect or --inspect-brk.

--inspect enables debugging, and you have to attach the Node debugger after the Playwright process has started. Therefore, it is recommended to set a breakpoint in your robot code before your JS breakpoint is hit.

--inspect-brk enables debugging and pauses the node process until a debugger is attached. This is useful if you want to debug the initialization of your JS Extension or the actual start of the Playwright process. BUT: Here you have to be quick to attach the debugger, because if you are too slow, the start of the Playwright process will timeout. That timeout is currently fixed at ~5 seconds.

It is recommended to use these settings with a specific port so it does not interfere with other debugging sessions or node processes. You should set it like this: --inspect=127.0.0.1:9999 to only allow connections from localhost and use port 9999.

Setting environment variables can be done globally, which is not recommended, or (recommended) within your Robot debugging launch.json file. Example for the RobotCode extension (partial content of the "configurations" array in launch.json):

{
    "name": "RobotCode: Default",
    "type": "robotcode",
    "request": "launch",
    "purpose": "default",
    "presentation": {
        "hidden": true
    },
    "env": {
        "ROBOT_FRAMEWORK_BROWSER_NODE_DEBUG_OPTIONS": "--inspect=127.0.0.1:9999"
    },
    "pythonConfiguration": "RobotCode: Python"
}

This will set the environment variable for the Robot Code debugging session only.

Attach to Node with VSCode

To attach to the node process, you have to create a new launch configuration in your launch.json file. This "Attach to Node" configuration has to use the same port as the Playwright process (configured above).

Example for a "Attach to Node" configuration:

{
    "name": "Attach to Node",
    "port": 9999,
    "type": "node",
    "request": "attach",
    "skipFiles": [
        "<node_internals>/**"
    ]
}

How to run and attach

1. Set your breakpoints in your extension or if you want to debug Browser itself, site-packages/Browser/wrapper/index.js.
2. Set your breakpoint in the robot code early: after the Browser library has been loaded and before the JS code has been executed, or be quick with step 4.
3. Start Debug Test within the robot file or the test explorer in RobotCode/VS Code and wait until the Robot breakpoint is hit (or be quick if you have none).
4. Select the Run and Debug tab, select the option Attach to Node (or whatever name you have used), and click the play button at the top of the RUN AND DEBUG area.

Loading examples...