puppeteerがバージョンアップしたので対応した

ひさしぶり管理画面の更新があったので
以前、作ったpuppeteerを使って自動テストをおこなったら
バージョンアップで使えなくなった所があった

masalib.hatenablog.com

もう１度、APIのリファレンスを見直したら、結構修正することになった
時間はかかったが便利になった

page.typeがセレクターが追加になった
page.evaluateHandleが追加になった
page.keyboard
page.waitForNavigation
感想

page.typeがセレクターが追加になった

今まではfocusしてtypeしていたがそれを１発でできるようになった

バージョンアップ前（1.0）

await page.focus('input[name=loginuser]');
await page.type(SITE_ID);
await page.focus('input[name=passwd]');
await page.type(SITE_PW);

バージョンアップ後（1.3）

await page.type('input[name=loginuser]',SITE_ID);
await page.type('input[name=passwd]',SITE_PW);

楽になったかも

page.evaluateHandleが追加になった

検証したサイトはガチのレガシーサイトでframeとかバリバリ使っています
リンクにtargetとか設定されていた
私の技術ではtargetが指定されているページが
puppeteerが上手く操作できず、テストをするプログラムのtargetを消して対応していた

バージョンアップでpage.evaluateHandleが指定できるようになり
listFormのtargetを消す事ができた
これで別targetになってページ操作ができないという事がなくなった

const form = await page.$('#listForm');
element = await page.$('#listForm')
await page.evaluateHandle((el) => {
        el.target = '';
 }, element)

page.keyboard

自分が知らなかっただけかもしれないのですが
page.keyboardのメソッドが便利だった

フォーカスをあたっている所に
対して追記はできたのですが消すのがよくわからず、放置していた

page.keyboardのメソッドを使うと既存の文字列を消すことができた

await page.focus('input[name=art_title]');
await page.keyboard.down('Shift');
await page.keyboard.press('End');
await page.keyboard.press('Backspace');
await page.keyboard.up('Shift');
await page.keyboard.type('テスト用更新');

これでテスト用更新という文字だけがはいるようになった

page.waitForNavigation

確実に前もあったのですが、以前作成した時は理解できず
秒数を指定してにげた所があるのですが
ちゃんと待ち時間を考慮した作りができるようになった

修正前

console.log("更新処理開始");
var submitoElement = await page.$('#submit1');
await submitoElement.click();
await page.waitFor(2000);	// ここが適当な時間だった
console.log(page.url());	
console.log("更新処理終了");

修正後

console.log("更新処理開始");
var submitoElement = await page.$('#submit1');
await submitoElement.click();
await page.waitForNavigation({waitUntil: 'load'})	// ロードされるまで待ってくれる
console.log(page.url());	
console.log("更新処理終了");