その過程で「これぜったいもっとべんりななにかがあるはず」と全部ひらがなで思い浮かべたところ、やっぱりありました。
他にもあるんでしょうか、とりまロボットのロゴがかわいいWebdriverIOでいこうかな、と。
あと、使えるんであればなるべく使いたい、TypeScriptを使いたいところ。
環境
macOS Mojave 10.14.6（いろいろあって少し古い）
node.js 12.16.1
できあがったものがこちらです
セットアップ
git clone https://github.com/atchy/app-wdio.git
npm install
実行
npx wdio
テスト対象サイトに感謝。
ちなみに、モジュールをインストールするコマンドは以下です。
npm i --save-dev @wdio/cli typescript ts-node tsconfig-paths @types/jasmine @types/webdriverio && npx wdio config
Page Object Pttern
wdioのボイラーテンプレートからプロジェクトを作成するときに、ページオブジェクトパターンの雛形を生成することができます。npx wdio configで選択した項目を以下に示します。
=========================
WDIO Configuration Helper
=========================
? Where is your automation backend located? On my local machine
? Which framework do you want to use? jasmine
? Do you want to run WebdriverIO commands synchronous or asynchronous? sync
? Where are your test specs located? ./test/specs/**/*.js
? Do you want WebdriverIO to autogenerate some test files? Yes
? Do you want to use page objects (https://martinfowler.com/bliki/PageObject.html)? Yes
? Where are your page objects located? ./test/pageobjects/**/*.js
? Are you using a compiler? TypeScript (https://www.typescriptlang.org/)
? Which reporter do you want to use? spec
? Do you want to add a service to your test setup? chromedriver
? What is the base url? http://localhost
テスト対象サイトの操作を抽象化しておくことにより、テストする際に細々とした制約（アカウントをのテキストフィールドの#idは、とか、ログインボタンの名前はなんだっけ、とか）をページオブジェクトが吸収してくれるので、テストコードはテストだけに集中することができる、と。
そのためには、対象Webサイトがテストに易しい設計であることも同時に求められるかと思います。
とはいえ
最近ではcypressのほうが強いらしいです、次回はそのあたりを・・・