How can I access all the "text" properties of the json of cucumber's "step"-object and log them to the console?

Question

I'm trying to log the string/regex of a step description of a cucumber 'step'-oject to the console. This is an example step

Given Alice is hungry

... and this is the first line to the step definition

Given( /^Alice is hungry$/, () => {

I'm trying to log 'Given Alice is hungry' to console, using the string representation of a 'step'-object that's provided as an argument, in the context of a cucumber-specific hook of webdriverio. Running

beforeStep: function ({ uri, feature, step }, context) {
    console.log(`Running "${JSON.stringify(step, null, 4)}"`);
}

...produces this output:

[0-0] Running "{
    "uri": "featureFiles\\dev\\my-first-feature-file.feature",
    "feature": {
        "type": "Feature",
        "tags": [],
        "location": {
            "line": 8,
            "column": 1
        },
        "language": "en",
        "keyword": "Functionality",
        "name": "Eating too many cucumbers is not good for you",
        "children": [
            {
                "type": "Scenario",
                "tags": [
                    {
                        "type": "Tag",
                        "location": {
                            "line": 10,
                            "column": 3
                        },
                        "name": "@Szenario-Eating-all-the-cucumbers"
                    }
                ],
                "location": {
                    "line": 11,
                    "column": 3
                },
                "keyword": "Szenario",
                "name": "Eating a few is no problem",
                "steps": [
                    {
                        "type": "Hook",
                        "location": {
                            "line": 187,
                            "column": 0,
                            "uri": "node_modules\\@wdio\\cucumber-framework\\build\\index
.js"
                        },
                        "keyword": "Hook",
                        "text": ""
                    },
                    {
                        "type": "Step",
                        "location": {
                            "line": 12,
                            "column": 3
                        },
                        "keyword": "Given",
                        "text": "Alice is hungry"
                    },
                    {
                        "type": "Step",
                        "location": {
                            "line": 13,
                            "column": 5
                        },
                        "keyword": "When ",
                        "text": "she eats 3 cucumbers'"
                    },
                    {
                        "type": "Step",
                        "location": {
                            "line": 14,
                            "column": 5
                        },
                        "keyword": "Then ",
                        "text": "she will be full"
                    },
                    

However, when I use

beforeStep: function ({ uri, feature, step }, context) {
    // eslint-disable-next-line no-undef
    console.log(\`Running step "${step.text}"`);
}

...all i get is

 [0-0] Running "undefined"
 [0-0] Running "undefined"

I've tried these 2 options instead:

console.log(`Running "${step.feature.children.steps.text}"`);
console.log(`Running "${feature.children.steps.text}"`);

In both cases this produces the following result:

[0-0] Error in "BeforeStep Hook"
Cannot read property 'text' of undefined

What am I doing wrong?

Answer 1

Let's take this example:

${step.feature.children.steps.text}

children is an array, so you can't just type .steps. You need to access a certain element first, like [0].steps.

Similarly with steps, steps is an array:

"steps": [ ... ]

This ${step.text} doesn't work because step doesn't have a property text. It has the following keys:

uri
feature