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

この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part25 ではヘッドレスブラウザでココナラのログインに再挑戦します。

前回はココナラでの失敗原因について探り特定することができました。

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

今回は特定した原因に対して対応したいと思います!

おさらい

失敗の原因は「メールアドレスでログインする」ボタンが有効にならないことでした。

メールアドレスおよびパスワードをPHPで機械的に入力(代入)しても同様に有効にはなりませんでした。

対応案

一番簡単そうな対応となると・・・
「メールアドレスでログインする」ボタンの「disable」要素を削除することだと思いました。

これを削除してクリックするとちゃんとサーバにリクエストが送信されるはずです。

実装してみた

まずは「メールアドレスでログインする」ボタンがグレーアウトではなく明るいグリーンに変化することを確認しておきます。

実装部分です。
/var/www/html/index.php

$evaluation = $page->evaluate(
    '(() => {
        document.querySelector("#UserLoginEmail").value = "hoge";
        document.querySelector("#UserLoginPassword").value = "fuga";
        document.querySelector("form#UserLoginForm button[type=\"submit\"]").removeAttribute("disabled"); //←追加
    })()');

ついでに

ヘッドレスブラウザでの読み込み時、pngやjpgはページ読み込みに大きな時間を要するようなので読み込まないように設定を追加しました。

/var/www/html/index.php

$options = [
    'headless' => true,
    'noSandbox' => true ,
    'sendSyncDefaultTimeout' => 100000,
    'windowSize'      => [1920, 1000],
    'userAgent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36',
    'enableImages'    => false, //←追加
];

確認

http://localhost:8099/index.php にアクセスして確認します。
「メールアドレスでログインする」ボタンがちゃんと明るいグリーンになってますね😄
そして画像を読み込まない設定もちゃんと生きているようです。

それでは本番

それでは実際のアカウントを入力してクリックしてみたいと思います。

どうなることやら・・・

おおおおおお!できましたよ😳

 

まとめ

ついにやりヘッドレスブラウザでログインすることに成功しました!
一時はどうなることかとおもいましたがこれで先に進むことができそうです。

毎回ログインするのも大変なのでなんとかならないものですかね。
そんなことはいまは気にしないことにします。

現時点でのindex.htmlです。

<?php
// $a = 1;
// if ($a === 1) {
//     echo "ほげ";
// } else {
//     echo "fuga";
// }

// autoloadを読み込む
require 'vendor/autoload.php';

use HeadlessChromium\BrowserFactory;
use HeadlessChromium\Page;

use HeadlessChromium\Exception\OperationTimedOut;
use HeadlessChromium\Exception\NavigationExpired;

// whereis chromiumでパスを探した
$browserFactory = new BrowserFactory('/usr/bin/chromium');

// for Docker option
$options = [
    'headless' => true,
    'noSandbox' => true ,
    'sendSyncDefaultTimeout' => 100000,
    'windowSize'      => [1920, 1000],
    'userAgent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36',
    'enableImages'    => false,
];

// starts headless chrome
$browser = $browserFactory->createBrowser($options);

// creates a new page and navigate to an url
$page = $browser->createPage();
$page->navigate('https://coconala.com/')->waitForNavigation();

// get page title
//$pageTitle = $page->evaluate('document.title')->getReturnValue();
// ココナラにログインする(30秒待つ)
$evaluation = $page->evaluate('document.querySelector("li.c-mainNavBeforeLogin_item-pc a:first-child").click()')->waitForPageReload(Page::LOAD, 30000);

$evaluation = $page->evaluate(
    '(() => {
        document.querySelector("#UserLoginEmail").value = "hoge";
        document.querySelector("#UserLoginPassword").value = "fuga";
        document.querySelector("form#UserLoginForm button[type=\"submit\"]").removeAttribute("disabled");
    })()');

// screenshot(10秒待機)
$page->screenshot()->saveToFile('/var/www/html/bar01.png', 10000);
try{
    $evaluation = $page->evaluate('document.querySelector("form#UserLoginForm button[type=\"submit\"]").click()')->waitForPageReload(Page::LOAD, 30000);
} catch(OperationTimedOut $e) {
    echo "長すぎ";
} catch(NavigationExpired $e) {
    echo "別のページが読み込まれた";
}
// screenshot(10秒待機)
$page->screenshot()->saveToFile('/var/www/html/bar02.png', 10000);

// pdf
//$page->pdf(['printBackground'=>false])->saveToFile('/var/www/html/bar.pdf');

// bye
$browser->close();

?>

次回はブログ画面に遷移までできたらいいなと思っています。
今日はここまで!