PHP 初心者が WordPress の プラグイン 作成 ！ part28 ( ヘッドレスブラウザでココナラのブログを書く！ その2 成功！)

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

前回はヘッドレスブラウザでココナラのブログの入力に挑戦しました。
結果は失敗😐

PHP 初心者が WordPress の プラグイン 作成 ！ part27 ( ヘッドレスブラウザでココナラのブログを書く！)

これまで幾度となく失敗しているのでだいぶなれてきました(笑
今回はここからスタートです。

原因を探す

何が原因なのか、クエリセレクタかはたまた・・・とチェックしていたらあっさり判明。
構文に誤りがありました！ダブルコーテーションがひとつたいないというなんとも恥ずかしい😣

以下のように修正しました。

// ブログを記述する
$evaluation = $page->evaluate(
    '(() => {
        document.querySelector("div.c-title input[placeholder=\"ブログタイトル\"]").value = "ヘッドレスブラウザから書き込み！";
        document.querySelector("div.c-blogEditor_base div.c-blogBody_text"/*←ここ*/).text = "ついに書き込むことに成功！";
    })()');

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

おおお！！できましたね！
・・・と思ったらタイトルだけでした。

やはり本文は失敗していましたか。

本文が入力されていない原因の調査

本文はなぜ入力されていないのか。
まずは使用しているプロパティ(.text)が正しいのか確認です。

document.querySelector("div.c-blogEditor_base div.c-blogBody_text").text/*←このプロパティ*/ = "ついに書き込むことに成功！";

いろいろ調べてみてこちらのページを発見しました。

要素の取得方法まとめ

なるほど。textContentというプロパティを使用するのですね🤔

 

実装

調査をもとに以下のように修正してみました。

// ブログを記述する
$evaluation = $page->evaluate(
    '(() => {
        document.querySelector("div.c-title input[placeholder=\"ブログタイトル\"]").value = "ヘッドレスブラウザから書き込み！";
        document.querySelector("div.c-blogEditor_base div.c-blogBody_text").textContent = "ついに書き込むことに成功！";
    })()');

これでうまくいくか確認です。

確認

http://localhost:8099/index.php にアクセスしてみます。

できました！
機械的に入力したためかプレースフォルダの文字が消えていませんが成功です！

調査観点が正しくてよかったです。沼にはまるところでしたよ。
querySelectorでは(textContent)というプロパティを使用するんですね。
勉強になりました。

まとめ

ヘッドレスブラウザからココナラのブログの入力に挑戦しました。
構文ミスとプロパティを正しいプロパティに変更することでタイトルおよび本文に入力することに成功しました。

querySelectorの記法とjQueryの記法は似ているような気がしていたのですが違う部分もあるようですね(私の思い違い？)
次回はついに「保存(公開)」にチャレンジしますよ🙂

今日はここまで！

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

Posted by raika@blog