How to insert strings in non form fields without lots of keyPress

CodeceptJS
1

I want to code a little example for tool evaluation.
I use wikipedia as example.
I want to insert a search criteria and check that the correct article has been opened.
I’m using Puppeteer as driver.

Please have a look at the code attached.

My question: Is there another way, a more convenient and elegant way, to insert text.
Something like I.type(“Zwiebel”) for example?

Scenario("I find the article I'm searching for", (I) => {
  I.amOnPage('https://de.m.wikipedia.org/wiki/Wikipedia:Hauptseite');
  I.see('Artikel des Tages');
  I.fillField('//*[@id="searchInput"]', "Zwiebel"); // > This does not enter any text. I suppose this directive does not work in the indicated element

  //This works, but takes quite a while to execute plus it is not elegant 
  I.click('//*[@id="searchInput"]');
  I.pressKey('Z'); 
  I.pressKey('w');
  I.pressKey('i');
  I.pressKey('e');
  I.pressKey('b');
  I.pressKey('e');
  I.pressKey('l');

  I.pressKey('Enter');
  I.seeInTitle("Zwiebel");
});
2

The answer I found is:

  1. Create a helper
  2. In the helper insert a function like
    async keyboardType(text) {
    const { page } = this.helpers.Puppeteer;
    page.keyboard.type(text);
    }
  3. In the test use this function like
    I.keyboardType(‘Zwiebel’);