Wi2オプションエリアのチケット消費をコマンドで使う

## 前書き

Wi2はWifiの機器がなくてもカフェで月額プラン362円（税抜）で使えるプランです。
しかし、ルノアールではそのまま月額プランで使えるんですが、
ドトールやカフェドクリエではオプションエリア（Wi2premium, Wi2premium_club）のところが多く、
追加料金の100円する払ったチケットを消費して繋ぐのがかなりだるいです。

何がだるいって？
接続のURLとチケットが違うのでうっかり普通の接続ページ行ったのにまた購入系サイトに行くのがだるい。
しかも、1時間経つとまた消費するURLにアクセするのもだるいです。

## やること

仕方ないので、TestCafeという本来は作ったWebアプリをブラウザでテストするツールなんですけど、ブラウザ操作を自動化して以下の手順を踏んで、無味乾燥で非生産的な作業をささっとチケットの消費手順を終わらせたいです。
SeleniumもWebDriverとかのインストールもだるいので使いません。

Wi2のチケットなどの消費用URLへログイン＝＞チケット選択＝＞確認画面＝＞消費

## 前提

- Wi2の月額プランを使っている方
- Wi2のオプションエリア用チケットを購入済み (これは自動化で購入もやります)
- yarnコマンドが入っている（npmでもいけるけどこの記事はyarn前提）
- 面倒臭がり屋さん

## インストール

### yarnの初期化

```bash
mkdir wi2_apps
cd wi2_apps
yarn init
```

フォルダ作ってその中でやります。

### package.jsonへ追記

```js:package.json
  "scripts": {
    "start": "testcafe firefox test.ts",
    "buy": "testcafe firefox buy.ts"
  },
```

を`package.json`の適当なところに追加します。
最後に`,`があるので一番最後に追記した時は外すことに気を付けましょう。

僕はVivaldiを使ってますが、Vivaldiは無さそうなんで`chrome`や`firefox`や`edge`などにしますよ。
自分の使ってブラウザのに差し替えてね。

## モジュールをインストール

```
yarn add testcafe
yarn add dotenv
yarn add @types/node
```

## .env

さっきインストールした`dotenv`はローカルに入れておくと動的に`.env`ファイルを使ってくれるモジュールでした。
`require('dotenv').config();`を一行目に書くと使ってくれるよ。

以下のファイルを直下に入れよう。

```bash:.env
ID="wi2のID"
PASS="wi2のパスワード"
```

### コードを書く

先ほどの`pacakge.json`のあるのと同じディレクトリに`test.ts`（TypeScriptです）とか作って

```js:test.ts
require('dotenv').config();
import { Selector } from 'testcafe';

const id = process.env.ID;
const pass = process.env.PASS;

fixture `Getting Started`
    .page `https://service2.wi2.ne.jp/wi2was/mypageLogin?locale=ja`;


test('My first test', async t => {
    await t
        .typeText('#mypageLogin_txtLoginId', id)
        .typeText('#mypageLogin_txtPassWord', pass)
        .click('#mypageLogin_btnLogin');

    // activate
    await t
        .click('#mypageMenu_WAS03V008_BTN_RIYOU_KAKUNIN')

    const radio = Selector('input').withAttribute('name', 'rdoUseTicketVal');
    await t
        .click(radio)
        .click('#memberTicketStartInput_BTN_KAKUNIN')
        .click('#memberTicketStartConf_BTN_KAISI')
});
```

## 実行

⑴ まず、WifiをWi2Premiumに接続しておく。
（Wi2Connectで接続はまだ自動化できない。）

⑵ 以下のコマンドを実行します。

```bash:
yarn start
```

`wi2_apps`フォルダの中で実行します。

⑶ そのあとで、「Wi2 Connect」の公式ソフトウェアで接続

これでチケット消費を自動化できました。
本当は⑴と⑶の手順も自動化したい。
⑴はシェルをnodeからキックしたらできると思うけど、⑶は無理かなー？
わかったら教えてくださいね。

## 購入

```typescript:buy.ts
require('dotenv').config();
import { Selector } from 'testcafe';

const id = process.env.ID;
const pass = process.env.PASS;

// 0埋め2桁(枚数に対応)
const count = ('00' + process.argv[4]).slice(-2);

fixture `Getting Started`
    .page `https://service2.wi2.ne.jp/wi2was/mypageLogin?locale=ja`;


test('My first test', async t => {
    await t
        .typeText('#mypageLogin_txtLoginId', id)
        .typeText('#mypageLogin_txtPassWord', pass)
        .click('#mypageLogin_btnLogin');

    // buy
    await t
        .click('#mypageMenu_WAS03V008_BTN_TSUIKA_KOUNYUU')

    const buySelect = Selector('#cmbSetNumVal');
    const buyOption = buySelect.find('option');

    await t
        .click(buySelect)
        .click(buyOption.withText(count));

    await t
        .click('#memberTicketInput_WAS02V002_BTN_CONFIRM')
        .click('#memberTicketConf_BTN_NEXT');
});
```

## 購入の実行

今回2枚買いますが、嫌ならパラメータの`2`を色々変えてください。

```bash:
yarn buy 2
```

## おまけ

ヘッドレスブラウザで行う

まずPuppeteer追加。
※グローバルで`npm`じゃないとTestCafeが認識してくれませんでした。
`yarn add puppeteer`や`yarn global add puppeteer`はダメだった何でだ？

```bash:
npm install -g puppeteer
```

`package.json`を書き換え

```js:package.json
    "start": "testcafe puppeteer test.ts"
```

実はpuppeteer使わんくてもいける。

## あとがき

誰か教えてくれたら、自動で接続とかもするかも？
またはnpmにあげたいかなw

## github
https://github.com/shinriyo/wi2