google-chrome-devtoolsweb-testingrecordermacro-recorder

DevTools recorder - attribute title for a step or import array of recordings


The offers a recorder feature. This records every action taken (click, change, ...) in the browser while the recorder is running. These actions can be exported as a json file. The json format can also be imported.

{
    "title": "User orders coffe recording",
    "steps": [
        {
            "type": "setViewport",
            "width": 1280, "height": 1080, "deviceScaleFactor": 1,
            "isMobile": false, "hasTouch": false, "isLandscape": false
        },
        {
            "type": "click",
            "target": "main",
            "selectors": [ .... ],
            "offsetY": 18.0, "offsetX": 9.00
        },
        {
            "type": "change",
            "value": "P",
            "selectors": [ ... ]
            "target": "main"
        },
        {
            "type": "click",
            "target": "main",
            "selectors": [ .... ],
            "offsetY": 18.0, "offsetX": 9.00
        }
    ]
}

How add a title for each step?

According to my understanding of the documentation configure steps the recording can have a title "title": "User creates todos" But there is no option to add a "title": "User clicks add to cart button" for a step inside "steps": [{step_1}, {step_2}, {step_3} ]

In this made up example each step has a title.

{
    "title": "TodoMVC_Create_Todos",
    "steps": [
        {
            "type": "setViewport",
            "width": 1280,
            "height": 1080,
            "deviceScaleFactor": 1,
            "isMobile": false,
            "hasTouch": false,
            "isLandscape": false
        },
        {
            "type": "navigate",
            "title": "Open Todo page",
            "url": "https://demo.playwright.dev/todomvc/#/"
        },
        {
            "type": "click",
            "title": "Focus Todo Input element",
            "target": "main",
            "selectors": [ ],
        },
        {
            "type": "change",
            "title": "Start typing first Todo",
            "value": "S",
            "selectors": [ ],
            "target": "main"
        }
    ]
}

My test to add a title for step had this result:

Recorder_UI_ignores_step_title

I have also tried to combine two recording exports into an array in a single file

[
  {
    "title": "Create todos",
    "steps": [{}, {}, {}]
  },
  {
    "title": "Edit todos",
    "steps": [{}, {}, {}]
  }
]

But this is not supported.

Importing array of recordings fails

Search on feedback page

A search on User feedback bug reports w.r.t. DevTools Record Replay for title or array or import did not find any comment that is relevant for my question.

Question


Solution

  • It is currently not possible to have two recordings in one file or have a title defined for steps.