Phantom.jsを使用し、Vue.jsで作成されたページにログインする

概要

Phantom.jsを使用し、ログイン後のページでスクリーンショットを撮りたいことがあり、jQueryでフォームを埋めて、送信ボタンをクリックさせて送信する。

バリデーションエラー!!「フォームを入力して下さい。」
Value値埋めてるやん。。。なんで。。。とハマったので、書き留めておきます。

ログインページのソースコードの見るとinputタグに「v-model」とある。

なにこれ？？

Vue.jsの記法である。
v-modelは入力されたデータを入力されたタイミングで、Valueではなく別の変数？に格納している。。。とのこと。。。わからん。。

解決策

フォームに「打ち込んだぞー！！！！」と教えてあげる必要がある。
参考コード

$('input[name="email"]')[0].dispatchEvent(new Event('input'));

参考コード

var page = require('webpage').create();
var url = 'ログインページURL'

page.open(url, function(status) {
    if(status === "success") {
　　　　　//ここはおまじない（なくても動くと思う。）
        page.includeJs("https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js", function() {
            // jqueryを使いたいので読み込み
            page.includeJs('https://code.jquery.com/jquery-3.5.1.slim.min.js', function() {
                    setTimeout(function() {
                        $('input[name="email"]').attr('value', 'メールアドレス');
                        $('input[name="password"]').attr('value', 'パスワード';

                        $('input[name="email"]')[0].dispatchEvent(new Event('input'));
                        $('input[name="password"]')[0].dispatchEvent(new Event('input'));

                        var btn = document.getElementsByClassName('btn-dark')[0];
                        btn.click();
                    },3000);
                });
            });
        });
    }

    setTimeout(function() {
            //記念撮影
            page.render('test.png');
            phantom.exit();
    },5000);
});

あとがき

ログインページがVue.jsで作られていて、ハマる。みたいなことは今後増えて来ることは間違いないので知っておいて損は無いと思います。頭の片隅にでも置いていてください。
「なんで、Phantom.jsを使ってんの？サポート切れてね？jQuery脱却しないの？」というツッコミは勘弁して下さいね。苦笑