PHP 初心者が WordPress の プラグイン 作成 ！ part22 ( ヘッドレスブラウザでココナラのログインに挑戦 )

この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part22 ではヘッドレスブラウザでココナラにログインしてみようと思います。

前回、ココナラのトップページからログイン画面遷移まで確認を行いました。

PHP 初心者が WordPress の プラグイン 作成 ！ part21 ( ヘッドレスブラウザでココナラのログイン画面に遷移 )
予想に反してあっさりと画面遷移できてしまったので驚いています。
しかもquerySelectorのセレクタが問題なく要素を取得しクリックしたことにはうれしかったです😄

今回はさらにこの先のログインを行いたいと思ます。

ココナラにログイン

ココナラへログインするにはいろいろなアカウントが使用できます。

私はメールアドレスでログインする方法をとっているので

  1. メールアドレス入力
  2. パスワード入力
  3. 「メールアドレスでログインする」をクリック

という手順を経てログインとなります。

しかし先日の状況だとスタイルが崩れていたばかりか「メールアドレスでログインする」のボタンがありませんでした。
どうすればいいのかな？

とりあえず進めてみたいと思います。

アカウント入力を実装

まずメールアドレスとパスワードを入力しなければいけません。
該当部分のHTMLは以下のようになっていました

それぞれのインプットタグにid属性が付与されていますね。これはラッキーです。
クエリセレクタが単純になります。

実装の抜粋を以下に記載します。

// ココナラにログインする
$evaluation = $page->evaluate('document.querySelector("li.c-mainNavBeforeLogin_item-pc a:first-child").click()')->waitForPageReload();

$evaluation = $page->evaluate('document.querySelector("#UserLoginEmail").value(hoge)');
$evaluation = $page->evaluate('document.querySelector("#UserLoginPassword").value(fuga)');

こんな感じでいいのかしら🤔
クエリセレクタはこちらの記事を頼りに実装しました。

[JavaScript] querySelector() の使い方

ここまでで一度実行して確認したいと思います。

http://localhost:8099/index.html

だめでした！

Uncaught HeadlessChromium\Exception\OperationTimedOut: Operation timed out (30sec) in /var/www/html/vendor/chrome-php/chrome/src/Utils.php:69
Stack trace:
#0 /var/www/html/vendor/chrome-php/chrome/src/Page.php(349): HeadlessChromium\Utils::tryWithTimeout(30000000, Object(Generator))
#1 /var/www/html/vendor/chrome-php/chrome/src/PageUtils/PageEvaluation.php(64): HeadlessChromium\Page->waitForReload('load', 30000, '9C3ECB0BBF20952...')
#2 /var/www/html/index.php(37): HeadlessChromium\PageUtils\PageEvaluation->waitForPageReload()
#3 {main}

ページリロードに30秒以上使っているようです。

まだ「あったまって」いないのかと思い再度確認。

こんどはスクリーンショットのところでタイムアウト！

Uncaught HeadlessChromium\Exception\OperationTimedOut: Operation timed out (5sec) in /var/www/html/vendor/chrome-php/chrome/src/Utils.php:69
Stack trace:
#0 /var/www/html/vendor/chrome-php/chrome/src/Communication/ResponseReader.php(108): HeadlessChromium\Utils::tryWithTimeout(5000000, Object(Generator))
#1 /var/www/html/vendor/chrome-php/chrome/src/PageUtils/AbstractBinaryInput.php(64): HeadlessChromium\Communication\ResponseReader->waitForResponse(5000)
#2 /var/www/html/index.php(43): HeadlessChromium\PageUtils\AbstractBinaryInput->saveToFile('/var/www/html/b...')
#3 {main}

ここは機能の現象と同じですね。

以下のページを参考に、とりあえずクエリセレクタの書き方も変えてみました。
きっとなにも変わらないと思いますが(笑

Chrome PHP 覚書 | FH_BLOG | フライング・ハイ・ワークス (flying-h.co.jp)

headless-chromium-php/form-submit.php at 0.10 · chrome-php/headless-chromium-php · GitHub

// ココナラにログインする
$evaluation = $page->evaluate('document.querySelector("li.c-mainNavBeforeLogin_item-pc a:first-child").click()')->waitForPageReload();

$evaluation = $page->evaluate(
    '(() => {
        document.querySelector("#UserLoginEmail").value = "hoge";
        document.querySelector("#UserLoginPassword").value = "fuga";
    })()');

おお！

奇跡的にうまくいったようです。

しかし安定しないですね・・・。(イメージ保存が)

saveToFileは以下のような実装になっているようです。

/var/www/html/vendor/chrome-php/chrome/src/PageUtils/AbstractBinaryInput.php

  /**
     * Save data to the given file
     * @param string $path
     * @throws FilesystemException
     * @throws ScreenshotFailed
     */
    public function saveToFile(string $path, int $timeout = 5000)
    {・・・・}

このメソッドでデフォルトのタイムアウトが5秒(5,000)に設定されているのです。
私の環境ではこれでは足りないことが多いようです。なので倍の10秒(10,000)にしておきましょう。

本プラグイン作成とは関係が薄いですがこの画像が無いと成功しているのか判断が難しいので念のためです。

// screenshot(10秒待機)
$page->screenshot()->saveToFile('/var/www/html/bar.png', 10000);

ログインを実装

次に「メールアドレスでログインする」をクリックです。

該当の要素は以下の部分です。

この要素はidが無いですね・・・。

ではformタグのid配下の buttonという風に表現しましょう。

$evaluation = $page->evaluate('document.querySelector("form#UserLoginForm button[type=\"submit\"]").click()')->waitForPageReload();

 

確認

それでは確認してみましょう。

※実際には私のアカウントを使用してログインしています。

http://localhost:8099/index.html

結果は失敗でした！

Uncaught HeadlessChromium\Exception\OperationTimedOut: Operation timed out (30sec) in /var/www/html/vendor/chrome-php/chrome/src/Utils.php:69
Stack trace:
#0 /var/www/html/vendor/chrome-php/chrome/src/Page.php(349): HeadlessChromium\Utils::tryWithTimeout(30000000, Object(Generator))
#1 /var/www/html/vendor/chrome-php/chrome/src/PageUtils/PageEvaluation.php(64): HeadlessChromium\Page->waitForReload('load', 30000, 'FE560AD246A1938...')
#2 /var/www/html/index.php(44): HeadlessChromium\PageUtils\PageEvaluation->waitForPageReload()
#3 {main}

ログインをクリックしたあたりでタイムアウトになっているようです😥

まとめ

ヘッドレスブラウザを使用してココナラへログインに挑戦しました。

結果は失敗・・・。やはりタイムアウトが目立っていますね。

次はこの値を変更し安定させたいと思います。

今日はここまで！

Docker,PHP,Wordpress,環境構築PHP,WordPress,プラグイン

Posted by raika@blog