mocha利用してbrowser操作時に「ReferenceError: browser is not defined」というエラーが出る

以下の記事を参考してE2Eテストの環境を作ってます。

https://qiita.com/kawanet/items/fb7283c180da635a8c91

以下の設定をtest.jsというファイルに入れて

const assert = require("assert");

describe("Test", () => {
  it("Test", () => {

    // Google を開く
    browser.url("https://www.google.com/");

    // タイトルをチェックする
    assert.equal(browser.getTitle(), "Google");

    // 検索フォームに入力する
    $("form input[name=q]").setValue("webdriver.io");

    // 検索ボタンをタップする（これではうまくいかない）
    // $("form input[type=submit]").click();

    // 検索ボタンをタップする
    browser.execute(() => {
      document.querySelector("form input[type=submit]").click();
    });

    // 検索結果画面が表示されるのを待つ
    browser.waitForExist("h3 a", 5000);

    // 検索結果１位の内容を確認
    assert.equal($("h3 a").getText(), "WebdriverIO - WebDriver bindings for Node.js");
    assert.equal($("h3 a").getAttribute("href"), "http://webdriver.io/");
  });
});

mocha test.jsを実行すると

 Test
    1) Test


  0 passing (6ms)
  1 failing

  1) Test
       Test:
     ReferenceError: browser is not defined
      at Context.it (google.js:7:5)

上記のようにReferenceError: browser is not definedというエラーが出ます。

ここからの疑問はbrowserってどこからimportしてるか？です。

参考した記事を見ると

mochaではなく
wdio.conf.jsにかませて実行してますが、wdio経由で実行するとbrowserという関数が使えるようになるんでしょうか？

自分はselinium-standardに相当する環境が別に存在していてwdioはいらないかなと思って使ってないですが、wdio使うメリットはselinium-standardを実行した後、テストまで一括実行できるメリット以外にもありますか？

何か参考できる情報がありましたら教えていただければ助かります。