How to effectively write a custom gremlin while using gremlins.js with Cypress?

Question

I am using Gremlins.JS with Cypress to fuzz an application. In order to create a custom gremlin, I am trying to use this code block

function customGremlin() {
        return function attack() {
           document.getElementById("search_query_top").value = "Johnny Bravo"
        };
    }

And using it like this :

before(() => {
        return cy.visit('http://automationpractice.com/index.php').then(() =>
            cy.window().then((pageWindow) => {
                horde = createHorde({
                    window: pageWindow,
                    species : [customGremlin]
                });
            })
        );
    });

However I am getting the following error :

Cannot set property 'value' of null

for document.getElementById("search_query_top").value = "Johnny Bravo"

Any help is appreciated.