PHP 初心者が WordPress の プラグイン 作成 ！ part21 ( ヘッドレスブラウザでココナラのログイン画面に遷移 )

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

前回の記事ではヘッドレスブラウザを起動し、動作確認を行いました。

PHP 初心者が WordPress の プラグイン 作成 ！ part20 ( ヘッドレスブラウザの文字化けを解消する 成功!)

それではいよいよココナラにアクセスしてログイン画面に遷移できるのか試してみたいと思います！

ココナラにログインするには

まず通常のブラウザを使ってココナラのトップページにアクセスします。

https://coconala.com/

すると、右上に「ログイン」のボタンがあります。
これをPHPで「クリック」したいんですよねぇ😏

PHPでヘッドレスブラウザに「クリック」させる

こちらの記事を参考にさせていただいきました。
evaluate関数を使用して疑似的にクリックすればよい、ということでよいのでしょうかね？

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

ココナラのログイン部分のHTMLを眺めてみたのですが要素を取得するような特徴があまりないようです😑

 

こんな実装

ネイティブJavaScriptのセレクタの使い方わかりませんがこんな感じでやってみました。
(querySelector使えるのかな🤔)

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

// screenshot
$page->screenshot()->saveToFile('/var/www/html/bar.png');

確認

うまくいったらラッキーぐらいで実行してみましょう！

http://localhost:8099/index.php
エラーがでてしまったようですが・・・。

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/PageUtils/PageNavigation.php(128): HeadlessChromium\Utils::tryWithTimeout(30000000, Object(Generator))
#1 /var/www/html/index.php(32): HeadlessChromium\PageUtils\PageNavigation->waitForNavigation()
#2 {main}

うまく遷移できているようですよ！

ただなにか読み込めていないようで「メールアドレスでログインする」のボタンが見当たりません。

まとめ

ヘッドレスブラウザでココナラのログイン画面に遷移してみました。

待機時間を長くとっているつもりなのですがまだ足りないようです・・。

この辺りを調べていきたいと思います。

しかしquerySelectorが使えるのは助かりました！これがあればかなりはかどりますね。

現時点のindex.phpのソースコードは以下のようになっています。

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

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

use HeadlessChromium\BrowserFactory;

// 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',
];

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

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

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

// screenshot
$page->screenshot()->saveToFile('/var/www/html/bar.png');

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

// bye
$browser->close();

?>

今日はここまで！

Docker,PHP,Wordpress

Posted by raika@blog