spectronの新しい記法 (WebdriverIO v5対応その2)

electron9~10あたりで、UIテストツールであるspectronのバックエンドのwebdriverioが、v4から v5に更新されました。

呼び出しが非同期に変化して、これまでのメソッドチェーンを使う記法が動作しなくなったため、テストの全面書き直しが必要となります。

webdriverio自体に実践的なサンプルが見つからなかったりして難儀しましたが、いろいろ調べて、最終的に参考にしたのはwebdriverioのドキュメントでした。


https://webdriver.io/docs/api.html

```

it('can handle commands using async/await', async function () { const inputElement = await $('#input') let value = await inputElement.getValue() console.log(value) // outputs: some value })

```

 

以前のspectron(WebdriverIO v4のメソッドチェーン)

```

    it("input basic test", function() {
        return this.app.client.waitForVisible('#query-area__query-input__input')
                .waitForEnabled('#query-area__query-input__input')
                .clearElement('#query-area__query-input__input')
                .setValue('#query-area__query-input__input', "Bonan matenon!")
                .getValue('#query-area__query-input__input')
                .then(function(text){assert(text === 'Bonan matenon!')})
    })

```

新しいspectron(WebderiverIO v5のasync/await)

```

    it("input basic test", async function() {

        const inputElement = await this.app.client.$('#query-area__query-input__input');
        let text;
        text = await inputElement.getValue();
        console.log(`before:'${text}'`);
        await inputElement.waitForEnabled()
        await inputElement.clearValue()
        await inputElement.setValue("Bonan matenon!")
        text = await inputElement.getValue();
        console.log(`after:'${text}'`);
        assert(text === 'Bonan matenon!')
        // assert(text === '') // test to test (falure)
    })

``` 

今回書き換えたソース:

https://github.com/MichinariNukazawa/lina_dicto/blob/master/lina_dicto/test/input_ui.js


## Element がないことをテストする処理に時間がかかる?

```

        // このnot existテスト部分で5000msec近くかかるようだが詳細不明
        isExisting = await preprintElement.isExisting();
        assert(! isExisting); // not exist

```


以上です。

spectronの新しい記法 (WebdriverIO v5対応その1)

electronのUIテストであるspectronのバックエンドのwebdriverioが、v4から v5に更新されました。

呼び出しが非同期に変化して、これまでのメソッドチェーンを使う記法が動作しなくなったため、テストの全面書き直しが必要となります。

 


 

 

webdriverio自体に実践的なサンプルが見つからなかったりして難儀しました。

そのうちspectron公式サイトのトップにサンプルが載っているのを発見。

https://www.electronjs.org/spectron

基本のWindow表示テストですが、v4のテストコードを引き写してきた覚えのある手元の同等テストとはあれこれ違う感じです。

引き写したというのはREADME.md のmochaも使ったテストで、これ自体はv5環境下でも動作します。

 https://github.com/electron-userland/spectron

 

ここでは、v5対応の準備運動代わりに、サンプルにいろいろ追加してみました。

 

## CIテストに組み込むのでパスを固定値から自動判定に変更したい

 

```

const electronPath = require('electron') // Require Electron from the binaries included in node_modules.
const path = require('path')

var app = new Application({
    //path: '/Applications/MyApp.app/Contents/MacOS/MyApp'
    path: electronPath,
    args: [path.join(__dirname, '..')]
})

```

 

## assert()でエラーを検出した場合に、最終的に自動で停止してほしい

エラーが起こってcatch節に落ちると、Ctrl+CでKillするまでターミナルに帰ってこない。 

ローカルのターミナルでテストしている限りは少し不便なだけだが、このままではCIに都合が悪い(いずれタイムアウトするだろうが、早く終わらせてエラー通知させたい)。

catch節に落ちた際に、能動的に`app.stop()`を呼ぶことでテストが終了しターミナル操作が帰ってくる。

```

    return app.stop()
}).catch(function (error) {
    // Log any failures
    console.error('Test failed', error.message)
    app.stop() // ++ exit test and return to terminal control.

})

```

 

## assert()でエラーを検出した場合に、ターミナルにエラーコードを返す

サンプルコードのままでは、ターミナルへの戻り値がゼロになっており、CIでエラー検出できない。

 これはassert()ではやらず、タイムアウトで実現した。

mochaテストフレームワークに、非同期テストのために 「done()を呼ばないとタイムアウトになる」という仕組みがあるので、それを利用した。

 

 ```

it("Test for Window", function(done){ // ++ In mocha testing framework
  app.start().then(function () {
    ~
  }).then(function () {
    // Stop the application
 
    done(); // ++ Test result to Success
    return app.stop()
  }).catch(function (error) {
    // Log any failures
    console.error('Test failed', error.message)
    app.stop()
 
    // done(); // ++ Test result `not done()` is Failure, of timeout when catched error.
  })  
}).timeout(4000); // ++ Optional timeout msec (default 2000)

```

実行結果:

```

MN@daisy-bell:lina_dicto/$ ARG=wakeup make test
cd lina_dicto && npm run test test/wakeup

> lina_dicto@0.2.11 test /home/nuka/lina_dicto/lina_dicto
> mocha --require intelli-espower-loader "test/wakeup"



Test failed   # test/wakeup.js:26
 
  assert.equal(title, "lina_dicto - Esperanto / Japanese -xx")
               |                                              
               "lina_dicto - Esperanto / Japanese -"          
 
  1) window

  0 passing (2s)
  1 failing

  1) window:
     Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (/home/nuka/lina_dicto/lina_dicto/test/wakeup.js)
      at listOnTimeout (internal/timers.js:554:17)
      at processTimers (internal/timers.js:497:7)



npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! lina_dicto@0.2.11 test: `mocha --require intelli-espower-loader "test/wakeup"`
~
MN@daisy-bell:lina_dicto/$ echo $?
2

```




 

node12がインストールできない場合 (Ubuntuでnode10がインストールされてしまう)

Ubuntu20.04でnodejsのAPTリポジトリを 設定済みで、リポジトリを 12.xに変更してnode12にしようとしてもなぜかnode10がインストールされる。




まず基本手順は、リポジトリ書き換えでバージョン指定。数字のところを書き換えるだけ。

sudo vim /etc/apt/sources.list.d/nodesource.list

```

deb https://deb.nodesource.com/node_12.x focal main
deb-src https://deb.nodesource.com/node_12.x focal main
```

` sudo apt update` を忘れない。

このあとnodejsの削除・インストールで再インストールを行うと、なぜかnode10がインストールされる。


```

MN@daisy-bell:vscode/$ apt list --upgradable -a
一覧表示... 完了
nodejs/不明 12.19.0-deb-1nodesource1 amd64 [10.19.0~dfsg-3ubuntu1 からアップグレード可]
nodejs/focal,now 10.19.0~dfsg-3ubuntu1 amd64 [インストール済み、12.19.0-deb-1nodesource1 にアップグレード可]

```

 

一覧によるとsudo apt upgrade で更新されるらしいのだが、実際にやってみると壊れた依存関係で失敗する。

`sudo apt remove nodejs-legacy` だけしてもやはり失敗する。

 

```

MN@daisy-bell:vscode/$ sudo apt upgrade nodejs
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
アップグレードパッケージを検出しています... 完了
インストールすることができないパッケージがありました。おそらく、あり得
ない状況を要求したか、(不安定版ディストリビューションを使用しているの
であれば) 必要なパッケージがまだ作成されていなかったり Incoming から移
動されていないことが考えられます。
以下の情報がこの問題を解決するために役立つかもしれません:

以下のパッケージには満たせない依存関係があります:
 libnode64 : 競合: nodejs-legacy
E: 壊れたパッケージ

```
 

 nodejsを一旦削除し、残ったlibnode64 をautoremove で削除して解決。

 

```

MN@daisy-bell:vscode/$ sudo apt remove nodejs
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
以下のパッケージが自動でインストールされましたが、もう必要とされていません:
  libc-ares2 libnode64 nodejs-doc
これを削除するには 'sudo apt autoremove' を利用してください。
以下のパッケージは「削除」されます:
  nodejs
アップグレード: 0 個、新規インストール: 0 個、削除: 1 個、保留: 0 個。
この操作後に 158 kB のディスク容量が解放されます。
続行しますか? [Y/n] y
(データベースを読み込んでいます ... 現在 245429 個のファイルとディレクトリがイン
ストールされています。)
nodejs (10.19.0~dfsg-3ubuntu1) を削除しています ...
man-db (2.9.1-1) のトリガを処理しています ...
MN@daisy-bell:vscode/$ sudo apt autoremove
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
以下のパッケージは「削除」されます:
  libc-ares2 libnode64 nodejs-doc
アップグレード: 0 個、新規インストール: 0 個、削除: 3 個、保留: 0 個。
この操作後に 30.5 MB のディスク容量が解放されます。
続行しますか? [Y/n] y
(データベースを読み込んでいます ... 現在 245419 個のファイルとディレクトリがイン
ストールされています。)
libnode64:amd64 (10.19.0~dfsg-3ubuntu1) を削除しています ...
libc-ares2:amd64 (1.15.0-1build1) を削除しています ...
nodejs-doc (10.19.0~dfsg-3ubuntu1) を削除しています ...
libc-bin (2.31-0ubuntu9.1) のトリガを処理しています ...

```

以上です

 

 

electronの右クリックメニューから選択テキストを使う

lina_dictoにて、選択テキストを右クリックメニューでGoogle検索とGoogle翻訳にかける機能を実装しました。



右クリックメニューはcontextmenuで設定できます。

プロセス間通信がんばってねという記述もありますが、必要ありません。

window.getSelection();の戻り値で取れます。
返り値はオブジェクトなのでtoString()を忘れないよう注意。

Google検索のURLは
`'https://www.google.com/search?q=' + keyword.replace(/\s+/, '+');`
といった感じで生成。

Google翻訳のURL生成
```
    static get_google_translate_url(keyword, src_lang, dst_lang)
    {
        // ex. eo to ja, `https://translate.google.co.jp/#eo/ja/bona`
        const link = 'https://translate.google.co.jp'
            + '/#' + src_lang
            + '/' + dst_lang
            + '/' + encodeURIComponent(keyword);
        return link;
    }

```

ブラウザはOpenにURLを渡すとデフォルトブラウザが開きます。
`require('electron').shell.openExternal(link)`



結果、lina_dictoで使っている右クリックメニューのコードは以下。

```
    static init()
    {

        //! context menu (light click menu)
        var menu = new Menu();

        menu.append(new MenuItem({
            label: 'Copy',
            accelerator: 'CmdOrCtrl+C',
            role: 'copy'
        }));
        menu.append(new MenuItem({
            label: 'Paste',
            accelerator: 'CmdOrCtrl+V',
            role: 'paste'
        }));
        menu.append(new MenuItem({
            label: 'goto google search(external browser)',
            click: function(){
                const keyword = window.getSelection().toString();
                if(0 == keyword){
                    alert("text no selected");
                    return;
                }
                const link = 'https://www.google.com/search?q=' + keyword.replace(/\s+/, '+');
                //const src_lang =;
                //const dst_lang = '';
                //const link = ExternalBrowser.get_google_translate_url(
                //        keyword, src_lang, dst_lang);
                ExternalBrowser.open(link);
            }
        }));
        menu.append(new MenuItem({
            label: 'goto google translate(external browser)',
            click: function(){
                const keyword = window.getSelection().toString();
                if(0 == keyword){
                    alert("text no selected");
                    return;
                }
                const isEsp = Esperanto.is_esperanto_string(keyword);
                const src_lang = (isEsp ? Language.get_code_by_google() : 'ja');
                const dst_lang = ((! isEsp) ? Language.get_code_by_google() : 'ja');
                const link = ExternalBrowser.get_google_translate_url(
                        keyword, src_lang, dst_lang);
                ExternalBrowser.open(link);
            }
        }));

        window.addEventListener('contextmenu', function (e) {
            e.preventDefault();
            menu.popup(remote.getCurrentWindow());
        }, false);

        return true;
    }

```

接写リング買いました


マクロレンズ2万円〜に対して、接写リング1000円〜、だったので試しました。(私が買ったのは3000円くらい)





撮影したのは3Dプリンタの出力物。サイズは2cmちょっとです。





比較として、接写リング無しだとこんな感じです。







eletctronでコマンドライン引数を受け取る (とmacosxの注意点)

eletctronでコマンドライン引数を受け取る場合に、macosx固有の注意点として"-psn_0_xxxxxx"のような引数に対処する必要がある。

daisy-sequenceをデバッグしていて発見。



# よく紹介されるelectronでの引数の受け取り方法

electronで引数にファイルを受け取る時、以下の対応が必要となる。

## electronはデバッグとリリースでコマンドライン引数の数が異なる

デバッグではElectron実行ファイルのパスだけでなく、アプリのmainを入れたjsのパスも引数として渡される。
```
let argv = remote.process.argv;

     if(argv[0].endsWith('lectron')){
        argv.shift();
    }

```
ここで'lectron'とendsWithでマッチしているのは、プラットフォームにより'Electron'/'electron'で先頭大文字小文字の2パターンがあるため。

## electronは OSXでは'open-file' イベントを受ける


electronアプリにGUI上からファイルを渡して開く時、(ファイルをドロップして開く等)macosxではwin/linuxのように通常引数では受け取れないため、以下のコールバックで受け取る。

``` : electronベース(nodeプロセス側)でコールバック受け取り
// MacOSX
global.sharedObject = {'osx_open_file': null};
let openFileHandler = function(event, path) {
    event.preventDefault();
    global.sharedObject.osx_open_file = path;
};
app.on('open-file', openFileHandler);

```
```: electronアプリ(レンダラプロセス側)で上で保存した値を受け取り
     if(typeof remote.getGlobal('sharedObject').osx_open_file === 'string'){
        if(null === arg.open_filepath){
            arg.open_filepath = remote.getGlobal('sharedObject').osx_open_file;
        }
    }

```

# macosxのelectronで引数から"-psn_0_xxxxxx"を取り除く

macosxでリリースしたアプリをダウンロードして起動すると、初回起動時に、
"-psn_0_xxxxxx"のような引数を受け取る場合がある。





これを適切に取り除く必要がある。
```
         if(/^-psn_0_[0-9]+$/.test(arg.open_filepath)){
            // macosxでブラウザからダウンロードしたバイナリを初回起動した際に、
            // 渡される場合のあるコマンドライン引数(ex. '-psn_0_2958034')を除外する。
            console.debug("through for macosx:", arg.open_filepath);
            return true;
        }

```

ただし、初回起動時から引数でさらにファイルパスを渡された場合に、うまく行かないかもしれない。(その場合の引数の順序などの動作は確認していない。)

不明な引数について今回の話に近い報告がされているissue
https://github.com/electron/electron/issues/4403

## テスト方法

なお、macosxでテストする際、「ネットワークからダウンロードしたファイル」のフラグをONにする必要がある。
これには実行ファイル(の配布zip)をchrome にドロップすると良い。ドロップしたファイルがダウンロード扱いされる。

mi band4について(元mi band3ユーザとして)

mi band4を買いました。
元はアクティビティトラッカーを着けて使ってみようと、初めてのバンドとしてmi band3を買い、使っていました。ところが去年の年末あたり外出した際に無くしてしまい、しばらくバンド無しで過ごしていました。(純正シリコンバンドから本体がすぽんと抜けてしまったようで、気づいたら無くなっていました。)
こういうときに「あー残念」で済むのが安いバンドの良いところです。

mi band4登場は知っていましたが、今回購入するにあたって、事前調査で自分の用途(歩数と心拍が取れていればいい)では、あまり差がなかったため、今回もmi band3でいいやと思っていました。ですが、もう取扱がほとんど無いようで、差額も500円いかないようだったので、せっかくだからとmi band4にしました。買ったのは日本版(smart と付いている方)ではなくglobal版です。

で、mi band3と比較しての感想ですが。
- 純正バンドが固くなった気がする。最初、はめていて違和感があった。今は多分慣れた。
-  やっぱりカラー画面である必要はなかった。カラーだから困ったりはしないが。
- 音楽再生機能はセットアップ時に自動接続されなかったようなので使っていない。今度暇なときにでも試そうと思ってます。
-  純正アプリは相変わらず。心拍歩数以外もgoogle fit連携して欲しい。
- 画面の明るさ調整って3にあったっけ? 4にはある。
- 3に無かった、座りっぱなし防止タイマみたいな機能が増えた? 素晴らしい。
 睡眠や心拍の測定精度が良くなったのかは正直自分にはわからないので、感想はそれ以外になります。

「座りっぱなし防止」が、事前調査で気づかなかった(多分)mi band4の新機能で、これがPCデスクワークの多い自分にはありがたいし、すごく面白いです。mi band4にしてよかった。

spectronの新しい記法 (WebdriverIO v5対応その2)

electron9~10あたりで、UIテストツールであるspectronのバックエンドのwebdriverioが、v4から v5に更新されました。 呼び出しが非同期に変化して、これまでのメソッドチェーンを使う記法が動作しなくなったため、テストの全面書き直しが必要となります。 we...