我們通過一個簡單的例子了解一下如何快速填寫網(wǎng)頁表單。

一、場景展示

CL 經(jīng)常需要登錄家里的路由器看一下網(wǎng)絡狀態(tài)，每次都要鼠標和鍵盤要換好幾次手，比較麻煩，就像這樣：

作為一名資深懶客，這顯然無法忍受，所以就做了一個簡單動作實現(xiàn)了一鍵登錄：

前置條件

瀏覽器已安裝擴展并正常連接

如果您還沒有安裝，可以從官網(wǎng)下載頁面找到瀏覽器擴展商店的鏈接。

了解 CSS 選擇器

在瀏覽器中通常使用 CSS選擇器（簡稱 選擇器）?來定位元素。如果你對網(wǎng)頁技術不太熟，可以大概把選擇器理解為元素的 “家庭地址”。

如何獲得元素的選擇器？方法很多：

- 在瀏覽器網(wǎng)頁上按 Ctrl+Shift+C，鼠標懸浮在元素上時，瀏覽器會高亮顯示，點擊選中要控制的元素，從右側控制臺的元素樹上找到對應的節(jié)點，右鍵菜單中復制選擇器（selector）即可。

也可以F12打開控制臺后，點擊箭頭圖標開始選擇。

動作實現(xiàn)步驟

（1）打開網(wǎng)址并等待加載完成

通過瀏覽器控制打開網(wǎng)址，選擇 “等待操作完成”?可實現(xiàn)等待網(wǎng)頁加載完畢后再繼續(xù)。

（2）觸發(fā)點擊開始按鈕

在步驟中觸發(fā) #normalphoto 元素的點擊事件。

測試效果：

（3）輸入賬號

更新元素信息，為用戶名輸入框更新值為user。

測試效果：

（4）輸入密碼，和上一步類似，就不再贅述了

（5）提交表單

每種表單提交方式不太一樣，有的直接回車就可以提交，有的要模擬點擊提交按鈕，以測試為準。本例中可以直接使用回車提交。

總結

通過瀏覽器控制模塊，您可以自由控制網(wǎng)頁，實現(xiàn)模擬點擊元素、填寫表單，以及從網(wǎng)頁提取數(shù)據(jù)，甚至運行自定義的javascript代碼。如果您日常工作有方面的需求，不妨一試。

這篇文檔介紹了一些常見元素的更新方法，敬請參考：https://getquicker.net/KC/Help/Doc/web-page-control

本文使用 文章同步助手 同步