使用puppeteer在輸入文字前,先清空輸入框的值

使用pupeeteer把日常惱人的繁瑣事自動化,是相當方便的一件事
但在輸入完畢後,總是會需要將內容清空
把幾個覺得不錯的作法整理出來

一、雙擊反白後清空

最直覺得想法: 模擬人為操作!
我自己主要也是採用這個作法
語法簡單乾淨
直接在click傳入clickCount次數就好
注意只點2下時有時會漏掉,browser點3次會是確定有全選

1
2
3
await elementHandle.click({clickCount: 3});
await elementHandle.press('Backspace');
await elementHandle.type('text');

再更精簡一點,2行就可以搞定!
畢竟全選後直接輸入文字,就會把現有內容清除了

1
2
await elementHandle.click({clickCount: 3});
await elementHandle.type('text');

二、操作鍵盤清除內容

流程人工操作得熟悉時,最常使用的就是鍵盤操作了!
ctrl + aBackspace
在puppeteer也可以做到
覺得滿有意思的,特別記錄

1
2
3
4
5
await page.click('.id');
await page.keyboard.down('Control');
await page.keyboard.press('KeyA');
await page.keyboard.up('Control');
await page.keyboard.press('Backspace');

但要注意的是,在mac下不能運作
cmd按鍵是由MacOS在控制的(見此issue)

甚至使用home、end來全選範圍也行

1
2
3
4
5
await page.keyboard.press('Home');
await page.keyboard.down('Shift');
await page.keyboard.press('End');
await page.keyboard.up('Shift');
await page.keyboard.press('Backspace');

三、指定反白範圍

這點雖然平常不太會用到,但也許某些情境下仍有用上的機會
下述範例是指定全部範圍,但可依需求傳入長度,甚至由中間再插入文字
記錄寫法便於未來可參考

1
2
3
await page.focus("input[name=email]")
await page.$eval("input[name=email]", el => el.setSelectionRange(0, el.value.length))
await page.keyboard.press('Backspace')

四、使用瀏覽器的右鍵功能全選

最乾淨的作法!直接Call 瀏覽器的api 全選、刪除!

1
2
await page.evaluate(() => document.execCommand('selectall', false, null));
await page.keyboard.press('Backspace');

參考資料

上述作法其實都是下方issue眾人集思廣義出來的結果,但要短時間爬完仍需一些時間
於是把確定可以解決的作法整理出來,便於快速查找解法!

GitHub/how to clear input field value before typing/inserting?