[JavaScript] 10 cookieの使用 検索時間の記録

[M1 Mac, Big Sur 11.7.2]

MySQLアプリの検索時間をcookieに都度記録し、検索が完了してリロードされた時に最終記録を表示するようにしました。意味がないのですがプログレスバーはいきなり最後だけ100%で表示されます。

PHPもJavaScriptも初心者なので、HTMLを加えた3者が混在するPHPファイルを書くのは骨が折れます。どちらもそれなりに書けるようになるとスクリプト言語はPythonを合わせた3言語を学んだことになります。

Rubyも学んでみたいですが、それにしかできないことでもないと着手しそうにないですね。

MySQL検索終了時
<input id="checkBox" type="checkbox" name="checkBox" value="開始" onClick="startTimer()"/>

<span id="elapsedTime"></span>

<script language="javascript" type="text/javascript">

    function getCookieValue(key) {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
            var cookiesArray = cookie.split('='); 
            if (cookiesArray[0].trim() == key.trim()) { 
                return cookiesArray[1];
            }
        }
        return '';
    }

    function showElapsedTime(time) {
        var now = new Date();
        const eTime = Math.floor((now - time)/1000);
        document.cookie="time=" + eTime + ";";
        console.log(eTime);

        var eTimeShow = "検索時間(秒) " + eTime;
        console.log(eTimeShow);
        document.getElementById("elapsedTime").innerHTML = eTimeShow;

        return eTimeShow;
    }

    function startTimer(){
        var startTime = new Date();

        setInterval(
            function()
            {showElapsedTime(startTime);}
            ,1000 ) ;
    }

    try {
        let checkBox = document.getElementById('checkBox');
        console.log("checkBox: %b", checkBox.checked);

        if (checkBox.checked == false){
            var time = getCookieValue("time");
            var eTimeShow = "検索時間(秒) " + time;
            console.log(eTimeShow);
            document.getElementById("elapsedTime").innerHTML = eTimeShow;
        }
    }
    catch(e){
    }
</script>

[PHP] 08 MySQLアプリの自動操作 php-webdriver

[M1 Mac, Big Sur 11.7.2, PHP 8.2.1, MySQL 8.0.31]

製作中のWebアプリをphp-webdriverで自動操作しています。

プログレスバーの方はcookieやセッション変数を使っても解決しませんでした。cookieはブラウザをリロードするまで更新しないので今回のような即時反映には向かないです。

PHPからJavaScriptへの変数受け渡しも反映が遅くて使えません。

<?php
require_once ('../../composer/vendor/autoload.php');
use Facebook\WebDriver\Chrome\ChromeDriver;
use Facebook\WebDriver\WebDriverExpectedCondition;
use Facebook\WebDriver\WebDriverBy;

# MySQLサーバ起動判定
exec('mysqladmin ping', $out, $ret);
$out_str = $out[0];
$out_str2 = sprintf("out_str: %s", $out_str);
echo $out_str2;

if(strpos($out[0],'alive') === false){
    exec('mysql.server start');
}else{
    print 'MySQLは起動しています';
    echo "\n";
}

# Webサーバ起動
exec('php -S localhost:8890 -t "/Volumes/DATA_m1/code/PHP/projects/02_mysql_searcher23" > /dev/null &');

# chromedriverのパス設定
$driverPath = realpath("/opt/homebrew/Caskroom/chromedriver/109.0.5414.74/chromedriver");
putenv("webdriver.chrome.driver=" . $driverPath);

# Chromeを起動しphpスクリプトを実行
$driver = ChromeDriver::start();
$driver->get('http://localhost:8890/input.php');

# Chrome表示待機
$driver->wait(10)->until(
    WebDriverExpectedCondition::visibilityOfElementLocated(WebDriverBy::id("form_submit"))
);

sleep(1);
# 自動入力
$driver->findElement(WebDriverBy::id("input1"))->sendKeys("lpw");
sleep(1);
$driver->findElement(WebDriverBy::id("input2"))->sendKeys("Email");
sleep(1);
$driver->findElement(WebDriverBy::id("input3"))->sendKeys("@yahoo.co.jp");
sleep(1);
# 入力ボタン押下
$driver->findElement(WebDriverBy::id("button"))->click();

# search.phpへの遷移待機
$driver->wait(10)->until(
    WebDriverExpectedCondition::visibilityOfElementLocated(WebDriverBy::id("clockTime"))
);

sleep(1);
# チェックボックス押下
$driver->findElement(WebDriverBy::id("checkBox"))->click();
# 検索ボタン押下
$driver->findElement(WebDriverBy::id("button2"))->click();

?>