使用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 + a → Backspace
在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?