Vue.jsで作成している画面をSelenideでテストしていたら、テキストフィールドをクリアしてもバインドした変数が変わらなくて困った

# Selenide のバージョンアップで解消されています
`Selenide` の`6.5.0`以上のバージョンを使用すれば解消されています。もし旧バージョン(`6.4.0`以下)の `Selenide` を使わなければならない場合は参考になると思います。

参考までに下記のIssueでこの事象について記載・解消されています。
* [SetValue("") sometimes doesn't work properly with some frameworks and/or validators (React, etc...) #1497](https://github.com/selenide/selenide/issues/1497)
* [#1497 clear input #1787](https://github.com/selenide/selenide/pull/1787)

# 答えを先に書くと
`Selenide`でクリア処理をした直後に下記メソッドを実行して対応できました。

``` java
import static com.codeborne.selenide.impl.Events.events;
 events.fireEvent(WebDriverRunner.driver(), $("xxxxx"), "keydown", "keypress", "input", "keyup", "change");
```

# 各バージョン情報
* Vue.js:2.6.12
* Selenide:5.16.2
    * Selenium:3.141.59

# サンプル画面
[Herokuにサンプル画面](https://clear-test-sample.herokuapp.com/)を置いています。
![sample_page.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/941522/4cf77456-f121-55a7-fab1-e41171aa6a54.gif)

単純に`input`を配置して`v-model`でバインドさせています。バインド変数の動作が見えるように変数を表示しています。
こんな感じのソースです。

``` Sample.vue
<template>
    <div class="container sample-container">
        <div class="row">
            <div class="col">
                <input id="input" class="form-control" v-model="inputText">
            </div>
        </div>
        <div class="row">
            <div class="col label-col">
                <span id="label">{{ inputText }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Sample',
  data () {
    return {
      inputText: ''
    }
  }
}
</script>
<style>
  .sample-container {
    padding: 3rem 1.5rem;
    text-align: center;
  }
  .label-col {
    text-align: left;
  }
</style>
```

# テストコードからのクリア時の挙動
このサンプル画面に対して、単純にテキストを入力して、クリアしてみると・・・
![sample_page_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/941522/8d23f283-01c5-bdea-6ae3-c0bbe67a2958.gif)

テキストフィールドの内容は消えるのですが、変数を表示している方が消えません。
つまり、`v-model`を記載しているのに変数が書き換わりません。
ちなみに、clear() を setValue("") に置き換えても挙動は変わりません。

参考までにテストコードはこのような感じです。

``` ClearTest.java

    @Test
    public void clearError() throws Exception {

        open("https://clear-test-sample.herokuapp.com/");

        // input
        $("#input").setValue("abcdef123456");
        sleep(2000);

        // clear
        $("#input").clear();
        sleep(2000);

        // assert
        $("#input").should(Condition.empty);
        $("#label").should(Condition.empty);    // fail

    }
```

# なぜ変数が書き換わらないのか？
いろいろ試してみたところ、どうもSelenideの(Seleniumの)テキストへのクリアは処理が特別らしく（？）テキストの内容をクリアしても`oninput`などのイベントが発生しないようで、Vue.js側がテキストの変更を検知することができずに変数を書き換えることができていないようです。

`Chrome`、`FireFox`ともに同じ動作をするので、もしかしたらイベントが発生しないことを仕様としているのかもしれないですね。。。自然じゃないと思いますが。

# 対処方法
イベントが発生していないのであれば、イベントを発生させればいいよね！ということで、`Selenide`の中に実装のある[Eventsというクラス](https://github.com/selenide/selenide/blob/master/src/main/java/com/codeborne/selenide/impl/Events.java)のfireEventというメソッドを使わせてもらいます。
さっきのテストコードでクリアメソッドを呼んでいる直後にfireEventを入れます。

``` ClearTest.java
    @Test
    public void fireEvent() throws Exception {

        open("https://clear-test-sample.herokuapp.com/");

        // input
        $("#input").setValue("abcdef123456");
        sleep(2000);

        // clear
        $("#input").clear();
        events.fireEvent(WebDriverRunner.driver(), $("#input"), "keydown", "keypress", "input", "keyup", "change");
        sleep(2000);

        // assert
        $("#input").should(Condition.empty);
        $("#label").should(Condition.empty);

    }
```


消えるようになりましたね！
![sample_page_3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/941522/43b8a30d-8a0d-6f52-d494-ec28d24e1516.gif)

# サンプルコード
大したコードではないのですが、テストコードは github にあげてあります。
https://github.com/rh-dyamada/cleartestsample