自動化 on IT 空間

Playwright 瀏覽器自動化工具，應用於網路爬蟲和測試

jia@jiatool.com (Jia) — Sat, 20 Nov 2021 21:00:00 +0800

前言

你還在使用 Selenium 來網路爬蟲或自動化測試嗎？或許你可以來試試另一個工具 — Playwright。

(圖片來源：Unsplash)

[小廣告] 我製作了一款可愛的「企鵝魔法師」貼圖~
歡迎下載：LINE 貼圖、Telegram 貼圖 (免費)

Playwright 套件簡介

Playwright 是微軟 Microsoft 開發的一個開源瀏覽器自動化工具，可以選擇 Chromium、Firefox、WebKit 瀏覽器，目前有 Python、JavaScript、TypeScript、.NET、Java 的 API 可供使用。

* 本篇文章以 Python 為範例，但各程式語言的 API 應該是差不多的。

	Linux	macOS	Windows
Chromium 98.0.4708.0	✅	✅	✅
WebKit 15.4	✅	✅	✅
Firefox 94.0.1	✅	✅	✅

* 此版本會持續更新，以官方文檔為主。

Playwright 第一次輸入指令就會自動下載瀏覽器，與自己使用的瀏覽器是分開的。不用像 Selenium 要手動下載，版本更新還要去更新驅動。

Playwright 在對元素(elements)操作之前，會自動等待元素準備完成(可見的、啟用的…)，不用怕元素還沒載入就執行造成錯誤，也不需要自己加等待。

就像省去了 Selenium 內的 WebDriverWait：

1
2
3


WebDriverWait(self.driver, timeout).until(
EC.presence_of_element_located((By.CSS_SELECTOR, '#search'))
)

* 詳細可以參考官方文檔：https://playwright.dev/python/docs/actionability

* Playwright 支援同步和異步(搭配 asyncio)，本篇文章皆使用同步來示範。
* Playwright 甚至能自動產生程式碼，這部分可以參考大數學堂的影片教學： [爬蟲實戰] 如何不寫任何一行程式碼透過低代碼Low-Code / No-Code 工具 Playwright撰寫網頁自動化瀏覽程式

教學

先來試試官方文檔內的基本程式：

1
2
3
4
5
6
7
8


from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto("http://playwright.dev")
print(page.title())
browser.close()

首先創造一個瀏覽器實例，開新分頁，再來前往 http://playwright.dev 網頁，並取得網頁的 title，最後關閉瀏覽器。

它預設是以「無頭模式」啟動，但為了在寫程式時觀察它運作，我們可以先將其關閉：

1

browser = p.chromium.launch(headless=False)

常見的基本操作

以下是幾種常見的網頁基本操作：

1
2
3
4
5
6
7
8


# 點擊
page.click('div')
# 輸入文字
page.fill('#search', 'query')
# 複選框和單選按鈕
page.check('#agree')
# 下拉選擇欄
page.select_option('select#colors', 'blue')

更多進階用法與參數可參考官方文檔：

滑鼠 Mouse：https://playwright.dev/python/docs/api/class-mouse
鍵盤 Keyboard：https://playwright.dev/python/docs/api/class-keyboard

元素定位

基本操作或取得元素皆使用 CSS Selector 元素定位。

關於 CSS Selector (選擇器)的寫法可以參考我以前整理的文章：
常用網頁 CSS Selector (選擇器)取得元素，搭配 Python BeautifulSoup 套件

Playwright 除了有一般的 Selector 用法以外，還有個比較特別且好用的 "文字(text)" 選擇方式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


# 取得包含此段文字的元素 (不分大小寫)
page.click('text=Log in')
# 取得與此段文字一模一樣的元素 (注意裡面還有引號)
page.click('text="Log in"')
# 如果要與 CSS Selector 結合，要使用以下方式
# 概念同等於上方的 'text=Log in'，包含此段文字 (不分大小寫)
page.click('button:text("Log in")')
# 概念同等於上方的 'text="Log in"'，文字要完全一樣
page.click('button:text-is("Log in")')
# 使用正則表達式
page.click('button:text-matches("[+-]?\\d+")')
# 還有一種是匹配內部包含文字的任何元素，可能在子元素或後代元素中
# 例如底下會匹配 <article><div>Playwright</div></article>。
element = page.wait_for_selector('article:has-text("Playwright")')

在文字匹配會對空格進行正規化，例如將多個空格轉換為一個，將換行符變成空格並忽略開頭和結尾的空格。

因為這部分有多種狀況、較複雜，我只是初步嘗試，如有錯誤歡迎底下留言告知。
參考：https://playwright.dev/python/docs/selectors/#text-selector

以及一些其他的選擇方式：

1
2
3
4


# 返回 <article> 具有 <div class=promo> 內部元素的文本內容
page.text_content("article:has(div.promo)")
# 僅點擊可見 class=button 的元素
page.click(".button:visible")

選取元素

如果要取得元素，可以使用：

1
2
3
4


# 取得元素
page.query_selector('#promo')
# 取得元素，加入等待
page.wait_for_selector('#promo')

獲取元素的文字及屬性：

1
2
3
4


# 取得元素的文字
page.query_selector('h3').text_content()
# 取得元素的屬性(attribute)
page.query_selector('section').get_attribute('class')

瀏覽器參數

在教學一開始說到無頭模式，在 launch 加入 headless=False，它還有其他參數可以設定。
詳見：https://playwright.dev/python/docs/api/class-browsertype#browser-type-launch

像是傳遞給瀏覽器實例的附加參數，想讓它靜音就使用：

1
2
3


browser = playwright.chromium.launch(
args=["--mute-audio"] # 靜音
)

更多 Chromium flags 的列表：https://peter.sh/experiments/chromium-command-line-switches/

Cookies 和 Local Storage

儲存與載入 Cookies 和 Local Storage，可以用作保存登入狀態。

1
2
3
4
5


# 將存儲狀態保存到文件中
storage = context.storage_state(path="state.json")
# 使用保存的存儲狀態創建新上下文(context)
context = browser.new_context(storage_state="state.json")

結語

它還有個 GUI 工具 Trace Viewer，可以在程式執行後幫助探索操作過程，感覺非常的厲害，但這部分我就還沒嘗試過，有興趣可以參考：https://playwright.dev/python/docs/trace-viewer

Playwright 相比 Selenium 來說是比較新出來的工具(不過都已經是正式版了)，許多功能更好用，如果你原先是使用 Selenium 來寫網路爬蟲或做自動化測試，或許可以試試 Playwright，搞不好你就會愛上囉。😆

歡迎追蹤『 IT空間』FB 粉專，取得最新發文通知🔔

參考：
Playwright 官方網站
 Playwright 文檔
 Playwright API
Playwright for Python GitHub

對於自己想做的事，就放手去挑戰吧！不是因為覺得能成功就去做，而是發自內心的想要嘗試看看，這樣不管結果如何，自己都不會後悔。

—— 鈴木一朗 (棒球選手)

免費遊戲自動通知 (IFTTT + RSS)

jia@jiatool.com (Jia) — Sun, 12 Jul 2020 21:30:30 +0800

前言

想要免費遊戲，但要自己每天上網找，好麻煩?
教你啦~架個伺服器、寫個爬蟲程式、連結LINE Bot…
這也太麻煩了吧><

不！不用程式！！
只要結合 IFTTT 跟網站提供的 RSS 即可，在網站貼出免費遊戲消息時，自動傳到Line、Telegram…通知你！

資料來源

在這篇我們是要使用網站提供的RSS，因此要先取得此網站的RSS。
在此以 4Gamers 為例，目前我知道要找到網站本身提供的RSS有三種方式：

找找網站本身的RSS按鈕
試著在網站網址後方加上rss。例如：https://www.4gamers.com.tw/rss、https://gnn.gamer.com.tw/rss.xml
google看看是否有人知道

我試著在瀏覽器的網址欄輸入https://www.4gamers.com.tw/rss，結果他自動跳轉到https://www.4gamers.com.tw/rss/latest-news，那之後就使用此RSS網址。

4Gamers RSS網址

流程

前往 IFTTT 註冊自己的帳號，
點擊 Create 創建一個程序(Applets)

點擊 Create 創建 Applets

If This Then That 意思是如果這樣就那樣，
This就是觸發條件；That就是執行動作。
例如我們想要的"如果有免費相關的文章，就寄通知給我"。
點擊 This 來設定觸發條件

設定觸發條件

我這邊使用RSS來訂閱網站的文章，所以搜尋RSS。

搜尋RSS

因為我只想接收有包含特定關鍵字的文章，不想全部都接收，
(我窮，有錢的不要，只要免費的！！)
所以選擇"New feed item matches"。

選擇 New feed item matches

設定想要接收的關鍵字
Keyword輸入免費；
Feed URL輸入4Gamers的RSS網址 https://www.4gamers.com.tw/rss/latest-news

設定關鍵字及RSS網址

接下來換設定 That 執行動作。

設定執行動作

看你要使用什麼接收通知都可以，例如LINE、Telegram、Email。

LINE or Telegram

這邊以目前台灣較多人使用的LINE來示範。

第一次連結時會需要登入驗證，之後就不需要這個手續了。

Send message 寄送訊息

設定寄送訊息

Recipient(接收者)可以設定自己或指定群組，
自己指的是它會透過一個官方帳號LINE Notify來傳送，因此要先加LINE Notify為好友(和確保沒有封鎖它XD)。

設定寄送訊息

底下的message是指接收到訊息的格式，點擊右下方Add ingredient 有一些RSS的變數可加進來。

設定寄送訊息

最後一步，改個容易辨識的名稱，就完成囉~

設定 Applets 名稱

完成

點擊IFTT網頁右上角 > My Applets，可以查看自己全部設定過的程序。

查看自己全部的程序

接下來就…等…恩…等(╯▽╰ )，等到有包含"免費"的文章，就會在LINE中的 LINE Notify聊天室收到如下的通知。

LINE 收到通知囉~

結語

怎樣😉 有沒有很簡單啊~

IFTTT裡頭還有非常多可以連結的平台，透過這篇文章學到了基礎，自己舉一反三還可以創造許多實用、有趣的功能呢~
IFTTT還有另一個很大的應用是在自動化智慧居家的部分。

如有遇到其他問題，或文章內容有誤，歡迎底下留言~😙

參考：
IFTTT 官網

莫札特曾經說過大膽地踏上旅途吧，我不知道路途的前方究竟有什麼，
但是，我們還是邁出了步伐，我們仍在旅途之中。

—— 四月是你的謊言